not good but great

プログラミング、アート、映画・本の感想について書きます。

Javascript

海外のアーティストであるRafaël Rozendaalさんの作品がおもしろい

Rafaël Rozendaalさんの作品が面白い 海外のアーティストであるRafaël Rozendaalさんの作品がおもしろくて、最近見始めました。 http://www.newrafael.com/自分でも真似して作ってみようかと思いました。真似と言っても、ソースコードを見るわけではなく、動…

requestAnimationFrameを無名関数で実行する

function draw(){ requestAnimationFrame(draw); alert("hogege"); }; draw(); 関数宣言をしてから、「draw();」するやり方をいつもしていました。 (function draw(){ requestAnimationFrame(draw); alert("hogege"); })(); 無名関数を使って、後で「draw();…

Firefox NightlyでSIMD.JSを実行する

SIMD.JSで高速化 Exciting! RT @anssik: We're seeing ~4-10x JavaScript performance speedup with SIMD.JS: https://t.co/ZKoO0FdfNC— Jesse L Rosenberg (@nervous_jesse) 2014, 3月 29 SIMD.JSというものを使えば、JSのパフォーマンスが上がるというツイ…

媒介変数に三角関数を掛けて予想不能な動きを作る

媒介変数を使う 高校の数学で媒介変数(パラメータ)によって図形を表す問題をやったことがあります。それをプログラミングに適用したら、コードも簡単だし、おもしろいこともできるのではないかと思いました。 RETURN 円の媒介変数表示

Blende ModeのXORを使って模様を作る

demo

セグメントの位置を周期的に動かして、くねくねうごく円を作る

以前CSSでぐにょぐにょする円を作りました。 demo 今回はPaper.jsで作ってみました。 Paper.js Editor

getPointAt()を使ってパス上に点を描画する

demo A Pen by naoyashiga. 久しぶりにgistを使ってみました。

Web Audio APIを使ってゲームの効果音を作成する

今までに作ったブロック崩し 最近はブロック崩しを作っていました。 Javascriptでブロック崩しを作ったよ - not good but great玉の数を増やしたりしてました hitOptionsを使い当たり判定を厳密にし、弾丸同士を完全弾性衝突させる - not good but great 問題…

hitOptionsを使い当たり判定を厳密にし、弾丸同士を完全弾性衝突させる

demo Paper.js Editor 球を複数にしたブロック崩し - jsdo.it - Share JavaScript, HTML5 and CSS 当たり判定を厳密にする options.bounds: Boolean – hit test the corners and side-centers of the bounding rectangle of items (item.bounds). hitTestの…

Javascriptでブロック崩しを作ったよ

demo GitHubにも公開してあります。 naoyashiga/BreakBrick · GitHub

当たり判定をしてドラッグでアンカーポイントを動かす

demo セグメントをドラッグで曲げることができます。

方向ベクトルを使ってアニメーションさせながら動かす

方向ベクトルを使ってアイテムを動かす demo Paper.js Editor code var text = new PointText({ point:view.center, justification:"center", fontSize:30, fillColor:"black" }); var destination = Point.random() * view.size; function onFrame(event){ …

raster.getAverageColorでPathの平均色を取得する

demo 円が動きます。円の色は背景の画像の平均色です。円で囲まれた範囲内の平均色となります。

Paper.jsでCanvasに画像を表示させて、ピクセルデータを取得する

画像の読み込み方 Rasterを使う Paper.jsの特徴はベクトルデータを扱えることで描画が綺麗で高速であるということです。

Paper.jsでアイテムをたくさん複製したい時はSymbolを使おう

Symbolのメリット Symbolはアイテムをたくさん複製したいときに、メモリを節約することができます。

Paper.jsでレイヤーの細かい指定、グループ化をやってみる

最前面、最背面レイヤー demo Paper.js Editor code var path = new Path.Circle(new Point(80,50),35); var secondPath = new Path.Circle(new Point(120,50),35); project.activeLayer.firstChild.fillColor = "red"; project.activeLayer.lastChild.fillC…

Paper.jsのBlend Modeを試してみる

BlendModeを指定する CSSのblend modeと種類は同じ String('normal', 'multiply', 'screen', 'overlay', 'soft-light', 'hard-light', 'color-dodge', 'color-burn', 'darken', 'lighten', 'difference', 'exclusion', 'hue', 'saturation', 'luminosity', '…

Paper.jsでnormalizeして単位ベクトルを作成する

単位ベクトルの作成 単位ベクトルの作成はベクトルで何かやりたいときには役に立つと思います。特にベクトルの方法だけ知りたくて、長さは別に定義したいときなどに使われるのではないでしょうか。

Drawing zigzag lines and shapes by using vector on Paper.js.

Orbit of Mouse Drag function onMouseDrag(event){ path.add(event.middlePoint); } event.middlePoint describes the point in the middle between event.lastPoint and event.point.

Paper.jsのVectorの性質を使っていろいろな図形を描く

ドラッグの軌跡を追う function onMouseDrag(event){ path.add(event.middlePoint); } onMouseDragだけ抜粋しました。一つ前の点と現在の点との中点を描画します。 軌跡の両側に点を打つ Paper.js Editor

event.middlePointとevent.deltaを線や円に応用してみる

用語解説 Paper.jsでマウスのドラッグスピードに合わせて、線の太さが変わるように頑張ってみた - not good but great 上記エントリで用語解説はしたのですが、リファレンスの別ページに詳しく載っていたので、改めて書きます。 middlePointとは? event.midd…

Paper.jsでマウスのドラッグスピードに合わせて、線の太さが変わるように頑張ってみた

お絵かきツールをつくる demo マウスのドラッグで線を引けるようにしています。 Paper.js Editor var path; function onMouseDown(e){ path = new Path({ strokeColor:"black", strokeWidth:10 }); } function onMouseDrag(event) { path.add(event.point); …

パスをSmoothing、Simplifying、Flatteningさせる

まずは用語解説 セグメントとは? Paper.jsにおいて出てくるセグメントとは、イラストレーターにおけるセグメントと同じ意味だと思います。セグメントはポイントとポイントを結ぶ線です。ここでいうポイントはイラストレータで言うアンカーポイントを指します…

Paper.jsでセグメントを消す、色やスタイルの設定をする

セグメントを消す demo code var circle = new Path.Circle(new Point(100,70),50); circle.strokeColor = "black"; circle.selected = true; //左 circle.removeSegment(0); //上 //circle.removeSegment(1); //右 //circle.removeSegment(2); //下 //circl…

Paper.jsで長方形、円、角丸、多角形を描いてみる

Pathを描画する smooth()で正方形を円にする smooth()を使うことで、ポイントとポイントを繋ぐ線が滑らかになります。 http://paperjs.org/tutorials/paths/working-with-path-items/ いろんな図形を描く http://paperjs.org/tutorials/paths/creating-prede…

Paper.jsで使うPaperScriptの特徴と、直接Javascriptで実行するときの違い

Paper.jsとは? canvasを用いて、ベクターグラフィックをjsを簡単に描画できるようにしたライブラリです。サンプルはどれもかっこいいです。 Paper.js - Paper.js PaperScriptを使う PaperScriptとは? Paper.jsではJavascriptを独自拡張したPaperScriptという…

TitaniumでTableViewにrowを追加するときは、insertRowAfterよりもappendRow

背景 下までスクロールしたら、新しくTableViewに要素を追加しようと思いました。 insertRowAfterがうまくいかない 調べると「insertRowAfter」というのが出てきました。 insertRowAfter( index, row, [animation] ) : voidParameters index : Number Index …

yql.query.multiで個別に読み込み件数を指定してフィードを読み込む

前回までの問題 前回の問題は下の通りでした limitの制限がJRAと楽天競馬の二つを合わせたフィードに適用されていないこと 二つのフィードを日時順にソートできていないこと ・前回エントリ YQLで複数フィードを読み込む件数を指定しても反映されない、ソー…

Titaniumで共通な処理をexportsに関数として設定して、requireで読み込む

CommonJS準拠に書き直してみよう 前回エントリでCommonJSについて少し知ることが出来ました。それまで書いていたコードをCommonJSに従って書き変えることにしました。具体的にはexportsで関数を作成して、requireで読み込むことをします。・前回エントリ Tit…

Titaniumで共通な処理をexportsに関数として設定して、requireで読み込む

CommonJS準拠に書き直してみよう 前回エントリでCommonJSについて少し知ることが出来ました。それまで書いていたコードをCommonJSに従って書き変えることにしました。具体的にはexportsで関数を作成して、requireで読み込むことをします。・前回エントリ Tit…