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

JavaScriptでWindowを操作

あんまりjQueryとか関係なく普通のJavaScriptですが、仕事でウィンドウの操作する必要があり調査も兼ねて。

画面サイズを取得
ウィンドウ開く前に画面のサイズがわかってた方がイイよね。

1
2
var screenWidth = screen.availWidth;
var screenHeight = screen.availHeight;

screen.width, screen.height でも問題ないけど、JavaScript でウィンドウ動かしたりするのでコチラで。

ウィンドウサイズの取得
ウィンドウのサイズを調べます。

1
2
var windowWidth = window.outerWidth;
var windowHeight = window.outerHeight;

IEでは outerWidth, outerHeight が使えないので innerWidth, innerHeight を使う。さらにバージョンでも違うみたいなので、jQueryで取得しても良いかも。

1
2
var windowWidth = $(window).width();
var windowHeight = $(window).height();

ウィンドウサイズは環境やブラウザによって違うのであまりアテにならない。JavaScriptでは指定するだけにとどめた方が良いかも。

ウィンドウを開く
定番過ぎますが一応。

1
var popup = window.open(location, name, option);

あとで操作できるように、適当な変数に保持します。引数の説明は下記。
location: URLの指定
name: window名
option: 下記の項目を key=value,key=value,… とカンマ区切りで指定

  • width: 横幅(innerWidth)
  • height: 縦幅(innerHeight)
  • left: ウィンドウ左端の位置(X座標)
  • top: ウィンドウ上端の位置(Y座標)
  • location: ロケーションバーの有無(yes / no)
  • menubar: メニューバーの有無(yes / no}
  • toolbar: ツールバーの有無(yes / no)
  • scrollbars: スクロールバーの有無(yes / no)
  • status: ステータスバーの有無(yes / no)
  • resizable: サイズ変更の可否(yes / no)

オプション指定しても、その通りにならないこともまああるよね。

ウィンドウを閉じる
開いたので閉じます。保持してた変数で指定。

1
popup.close();

ウィンドウの移動
座標の指定と、差分の指定ができます。座標指定はウィンドウの左上です。

1
2
popup.moveTo(x, y); // 座標指定
popup.moveBy(dx, dy); // 差分の指定

あ、自分自身は window.moveTo で移動します。例は、ポップアップの移動です。

ウィンドウサイズの指定
ウィンドウのサイズを指定します。サイズはウィンドウの左上を基点に変更されます。

1
popup.resizeTo(width, height);

ウィンドウの拡大縮小みたいなイメージの動作にしたければ、resizeTo と moveTo を併用するとよいかも。ウィンドウの中心が指定座標になるように、ウィンドウサイズの半分だけ位置を調整するとか。

これだけあれば、ウィンドウ自体のアニメーションぽいことは出来そうかな。
サンプル