パーティクルって面白そうだけど使ったことがなかったので、せっかくだからと思い使ってみた。
結果、思いのほか良い感じで、まるで魔法のように消えて見えるようになった。
MOON.js には 2つのパーティクル表示 API が用意されている。
下記は先日のカンファレンス資料のパーティクルのページ。
- showParticle(x,y,vx,vy,life)
パーティクルを一つ表示する。
x パーティクルの初期位置。
y パーティクルの初期位置。
vx パーティクルの1フレーム辺りの移動量。
vy パーティクルの1フレーム辺りの移動量。
life パーティクルが消えるまでのフレーム数。 - showParticles(particleParams)
パーティクルを複数表示する。
particleParams 表示したいパーティクルの情報。x,y,vx,vy,life,x,…と並べていく。
これを使うと簡単にパーティクル表示ができる。
実際に使う場合には 1つしか出さないことはなかなかないと思うので、通常は showParticles を使うんじゃないのかな。
で、この showParticles には x,y,vx,vy,life を パーティクルの分だけ詰め込んだ配列を渡せば、後は勝手にパーティクルを表示してくれる。
それぞれの引数の意味は資料に書いてある通りなのだけど、vx,vy,life の値が良くわからず最初に指定した 2,2,100 という値では流星が一瞬画面を飛び交っただけだったりした。
最終的には vx,vy は下記のコードで、life は 40としてみた。(lifeの値は参考ページから拝借!)
var vx = (Math.random()-0.5)/10.0; var vy = (Math.random()-0.5)/10.0;
後は消去する矩形の端に沿ってパーティクルを表示すれば良いのだけど、どれ位の量を表示すれば良いのかわからなかったので適当に 15ドット間隔で表示するようにした。
実際にこの数字で見てみるとそこそこ良い感じだったので、もう少し間隔を詰めた方が良い気もしたけど表示する間隔は 15のままにしてある。
最後にパーティクルを表示するタイミングだけど、これは MOON.setPaperJSON(backing,paperJSON); の直後。一瞬あいだが空いたりして変になるかな?と思ったけど、特にそんなことはなくタイミング良く表示されているように見える。
パーティクル込みのシールのダウンロードはこちら
実は Particle を画面に出せるようになるまで小一時間悩んだ。
資料を見ると showParticle(x,y,vx,vy,life) と書いてあって、showParticles(particleParams) の方も「x,y,vx,vy,life,x,…と並べていく。」とある。
これでてっきり、呼び出す引数の数がどんどん増えていくのだと思い込んで、JavaScriptって凄いことするな〜と感心。
そして次に「で、このずらずらと並ぶ変数はどうやって記述すれば良いのだろう?」と悩んだ。
小一時間悩んだ。
結局、command = “showParticles(“+args+”)”; みたいにして文字列を作って、それを実行するのかな〜?なんて思ってちょっと Webを検索したら…。
なんだ配列で渡すんじゃん!ということに。
無知故の変な思い込み、怖い!