HTML5 / Canvas でパーティクル


Canvasでパーティクルっぽいのやってみます。
当時の論文とか検索したら見つかる時代なんすね…
particle systems william t. reeves – Google Scholar

パーティクルは円で書くことにします。

1
2
3
4
5
6
var context = $('#canvas')[0].getContext('2d');
context.fillStyle = color;
context.beginPath();
context.arc(x, y, r, 0, 2 * Math.PI, true);
context.closePath();
context.fill();

beginPath〜closePathで描画パスを指定、fillで塗りつぶします。lineToで線描いたりも出来ます。
arc は円(弧)を中心 (x, y) に半径 r で描きます。上記の場合、0 〜 2π(360度)で描くので円になります。最後の引数は true なら反時計回り、false で時計回りに描きますが、今回は円なので関係ないです。

あと、色の指定はRGBAでも指定できるので、使い慣れた #FFFFFF ではなく、rgba(255, 255, 255, 1.0) を使うことにします。この辺はCSSと同じなのかな。

パーティクルには以下のような属性を与えます。

  1. 位置
  2. 速度と方向
  3. 大きさ
  4. 透明度
  5. 寿命

まあ、全部指定しなくてもイイしね。
各属性は乱数を使ってバラつきを持たせるように生成します。
あとはフレーム毎に各パーティクルを動かせば、それっぼいのが出来ます。

試しに、モノクロの円をランダムに生成して透明度を上げながら上に移動させます。物理シミュレーションとかではないので参考までに。
サンプル

Reference
Willam T. Reeves “Particle Systems – A Technique for Modeling a Class of Fuzzy Objects” 1983

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です