WebGLその10：パーティクル

WebGL

パーティクルっぽいクラスを作って、色加算で遊びましょう
■index.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>SanoWebGLSample10.html</title>
</head>
<script type="text/javascript" src="webglut03.js"></script>
<script>
//------------------------------------------------------------------------
//    
//------------------------------------------------------------------------
var    gl;
var    imageData;        //イメージデータ
var    max     = 100;
var    PartData    = Array( max );
//------------------------------------------------------------------------
//    初期化
//------------------------------------------------------------------------
function    init()
{
    // gl用コンテキストを取得
    gl    = Ginit( document.getElementById("c") );
    G2Dinit();
    //    パーティクル設定
    initParticle();
    //    メインループ登録
    setInterval( "MainLoop()", 33 );
}
//------------------------------------------------------------------------
//    メインループ
//------------------------------------------------------------------------
function MainLoop()
{
    // 画面クリア
    Gclear();
    //    加算
    gl.blendFuncSeparate( gl.SRC_ALPHA, gl.ONE, gl.ONE, gl.ONE );
    gl.blendEquationSeparate( gl.FUNC_ADD, gl.FUNC_ADD );
    // 描画
    for( var i = 0 ; i < max  ; i++ ){
        G2Dimage( imageData, PartData[i].X, PartData[i].Y, 200, 200 );
        PartData[i].Move();
    }

}

//------------------------------------------------------------------------
//    パーティクルの初期化
//------------------------------------------------------------------------
function    initParticle()
{
    var    ang;
    for( var i = 0 ; i < max ; i++ ){
        PartData[i]    = new Particle();
    }
    //    テクスチャ登録
    imageData    = GsetImage( "ball.png" );
}

//------------------------------------------------------------------------
//    パーティクルクラス
//------------------------------------------------------------------------
var    Particle = function(){
    this.X    = Math.random() * (gl.viewportWidth-128);
    this.Y    = Math.random() * (gl.viewportHeight-128);
    var    ang    = Math.random() * 3.141592 * 2;
    this.AX    = Math.sin( ang );
    this.AY    = Math.sin( ang );
    this.Move = function() {
        this.X    += this.AX;
        if( this.X < -128 )
            this.AX    = -this.AX;
        if( this.X > gl.viewportWidth-128 )
            this.AX    = -this.AX;
        this.Y    += this.AY;
        if( this.Y < -128 )
            this.AY    = -this.AY;
        if( this.Y > gl.viewportHeight-128 )
            this.AY    = -this.AY;
    }; 
};
</script>
</head>
<body onload="init();">
<canvas id="c" style="border:none" width="640" height="480">
</body>
</html>

これを表示すると