2015.04.18 [土] canvas要素でパーティクル vol.2
前の記事「canvas要素でパーティクル vol.1」の続きです。
ここまでで、四角い粒子が散らばっている動きができています。
現在、画面上には変数particleNumに設定されている100個の粒子が表示されており、100以上はでないようにfor文で設定されています。
for (var i = 0; i < particleNum; i++){ new Particle(); }
これを一度に100個出るように、setIntarvalに入れると、どばどば〜と粒子が湧き出るように表示されます。
数が多すぎるので、変数particleNumの数値を調整します。10〜20ぐらいでしょうか。
1割ぐらいの粒子の動きが変わるようにMath.randomで設定をします。さらに粒子の透明度も変更します。
- - - - - - - - - Particle.prototype.draw = function(){ this.x += this.vx; this.y += this.vy; → if (Math.random() < 0.1){ this.vx = Math.random() *10 -5; this.vy = Math.random() *10 -5; } this.life++; if(this.life >= this.maxLife){ delete particles[this.id]; } → context.fillStyle = "rgba( 255, 255, 255, 0.5)"; context.fillRect(this.x, this.y, 10, 10); }; - - - - - - - - -
さらに、色もランダムに変わるようにします。
context.fillStyle = "hsla("+parseInt(Math.random()*360, 10)+",100%,50%, 0.2)";
前回も書きましたが、白い粒子が表示される毎に全体を黒く塗りつぶすことでアニメーションしているように見せているのですが、この黒に透明度を加えると、都度、不透明度が濃くなり残像が残るようなアニメーションになります。
- - - - - - - - - setInterval(function(){ → context.fillStyle = "rgba( 0, 0, 0, 0.1)"; context.fillRect(0, 0, canvas.width, canvas.height); for (var i = 0; i < particleNum; i++){ new Particle(); } - - - - - - - - -
globalCompositeOperationを使って"source-over"(普通の重なり)から、"lighter"(色を加算)したものへ変化させることにより、中心が光で眩い感じをだしています。
- - - - - - - - - setInterval(function(){ → context.globalCompositeOperation = "source-over"; context.fillStyle = "rgba(0, 0, 0, 0.5)"; context.fillRect(0, 0, canvas.width, canvas.height); for (var i = 0; i < particleNum; i++){ new Particle(); } → context.globalCompositeOperation = "lighter"; for ( var i in particles){ particles[i].draw(); } }, 30); - - - - - - - - -
とりあえず、動く粒子の集合体ができあがりました。次回は、これにインタラクティブな動きを入れていきたいと思います。