HTML5とCanvasで作られたパーティクルエンジン


JavaScriptで出来たパーティクルエンジンをご紹介。
コード量も多くないので、カスタマイズして使えそうです。

20100613-01

IT/WEB業界への転職なら求人サイトGreen

デモ

画面を表示すると、マウスの動きに合わせてパーティクルも動くようになっています。
500個ほど表示させているようですが、動きもすごくスムーズですね。

以下のようなコードで動作させているようです。

function  run()
{
ctx.globalCompositeOperation = "source-over";
ctx.fillStyle = "rgba(8,8,12,.65)";
ctx.fillRect( 0 , 0 , canvasW , canvasH );
ctx.globalCompositeOperation = "lighter";
mouseVX    = mouseX - prevMouseX;
mouseVY    = mouseY - prevMouseY;
prevMouseX = mouseX;
prevMouseY = mouseY;
var toDist   = canvasW / 1.15;
var stirDist = canvasW / 8;
var blowDist = canvasW / 2;
var Mrnd   = Math.random;
var Mabs   = Math.abs;
var Msqrt  = Math.sqrt;
var Mcos   = Math.cos;
var Msin   = Math.sin;
var Matan2 = Math.atan2;
var Mmax   = Math.max;
var Mmin   = Math.min;
var i = numMovers;
while( i-- )
{
var m  = movers[i];
var x  = m.x;
var y  = m.y;
var vX = m.vX;
var vY = m.vY;
var dX = x - mouseX;
var dY = y - mouseY;
var d = Msqrt( dX * dX + dY * dY );
var a = Matan2( dY , dX );
var cosA = Mcos( a );
var sinA = Msin( a );
if( isMouseDown )
{
if( d  canvasW )
{
nextX = canvasW;
vX *= -1;
}
else if( nextX <0 )
{
nextX = 0;
vX *= -1;
}
if( nextY> canvasH )
{
nextY = canvasH;
vY *= -1;
}
else if( nextY <0 )
{
nextY = 0;
vY *= -1;
}
m.vX = vX;
m.vY = vY;
m.x  = nextX;
m.y  = nextY;
ctx.fillStyle = m.color;
ctx.beginPath();
ctx.arc( nextX , nextY , sc , 0 , radCirc , true );
ctx.closePath();
ctx.fill();          
}
}

Flashでなくとも、こういった表現ができるのは嬉しいですね。

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

follow us in feedly