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

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

デモ

画面を表示すると、マウスの動きに合わせてパーティクルも動くようになっています。
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でなくとも、こういった表現ができるのは嬉しいですね。