【CodePen】JavaScriptとcanvasで誘導弾パーティクル

CodePenが埋め込めるようになった記念に、誘導弾風のアルゴリズムでパーティクルがマウスに集まってくるという先日作ったサンプルを埋めてみます。

See the Pen Homing Particles by Akira Ikeda (@akicho8) on CodePen.

技術的におもしろいところは描画領域の消去方法です。他の方のコードを読みまくって知ったのですが、clearRect で全消去するのではなく次のように描画方法を destination-out かつ半透明で描画すると徐々に消えていく効果が得られることがわかりました。

ctx.globalCompositeOperation = "destination-out"
ctx.fillStyle = "rgba(0, 0, 0, 0.2)"
ctx.fillRect(0, 0, w, h)

またパーティクルのオブジェクトの方は lighter で描画することで重なった部分が光っているような効果になります。

ctx.globalCompositeOperation = "lighter"

参照

globalCompositeOperation プロパティ - Canvasリファレンス - HTML5.JP
http://www.html5.jp/canvas/ref/property/globalCompositeOperation.html