Canvas＆Processing
～ ウェブの最新技術が魅せる「Firefoxの灯」（2）

Processing & Flash

　以前は、灯のほとんどをFlashで実装していましたが、今回は主にSVGとCanvasを用いて実装しています。特に、灯のアニメーションを伴った描画についてはCanvasを優しく包むProcessing.jsで実装しています。本章では、ProcessingとFlashをプログラムの面から比較してみます。

フレームごとの描画：Processing編

　Processing.jsでもFlashでも、フレームごとに描画することが可能となっており、スムースなアニメーションが実現されます。それぞれ以下のように実装します（HTMLはJavaScriptの読み込み先をpf_1.jsに変更しただけなので割愛します）。

JavaScript: pf_1.js

$(document).ready(function(){
    //Processing でラップする Canvas を取得
    var canvas = document.getElementById("main_canvas");
    //Processing オブジェクトを作成し、初期化
    new Processing(canvas, Main.init); 
});

var Main = {
    init: function(processing) {
        //draw メソッドは、フレームごとに呼ばれる
        processing.draw = Main.draw;
        //フレームレートを 30 にする。(1秒を30コマで分割、1コマごとに draw を呼び出す)
        processing.frameRate(30);

        //draw の引数には processing インスタンスが渡されないので確保しておく
        Main.processing = processing;
    },
    
    draw: function() {
        //各フレーム、このメソッドが呼ばれる
    }
}

上記ソースコードを実装したサンプル

　このサンプルではフレームレートに30を設定しました。これは、1秒間を30コマで描画することを表し、各コマの描画にはdrawメソッドが呼ばれることになります。

簡単なアニメーションの実装：Processing編

　せっかくなので、アニメーションさせてみます（HTMLはJavaScriptの読み込み先をpf_2.jsに変更しただけなので割愛します）。

JavaScript: pf_2.js

//jQuery によるドキュメントの読み込みと Processing を new するところは同様なので中略

var CIRCLE_SIZE = 50;
var CIRCLE_HALF_SIZE = CIRCLE_SIZE/2;
var Main = {
    init: function(processing) {
        //Processing のキャンバスサイズを 400x400 にする
        processing.size(400, 400);
        //draw メソッドは、フレームごとに呼ばれる
        processing.draw = Main.draw;
        //フレームレートを 30 にする。(1秒を30コマで分割、1コマごとに draw を呼び出す)
        processing.frameRate(30);

        //draw の引数には processing インスタンスが渡されないので確保しておく
        Main.processing = processing;
        
        //現在の X 座標
        Main.current_x = Main.processing.width/2;
        //X方向のベクトル
        Main.vector_x = 10;
    },
    
    draw: function() {
        //このアニメーションは、左右に動く円が壁面に当たったら跳ね返るようにするもの。
        //以前の描画が残っているため、Canvas を綺麗にする。
        Main.background(0, 0);

        //現在の座標に、ベクトルを足す
        Main.current_x += Main.vector_x;
        if (0 > Main.current_x-CIRCLE_HALF_SIZE || Main.processing.width < Main.current_x+CIRCLE_HALF_SIZE) {
            //円の左端が 0 より小さいか、右端が描画領域より大きい場合は、ベクトルを逆にする
            Main.vector_x = -Main.vector_x;
        }
        //円を描く
        Main.processing.fill(0, 0, 255);
        Main.processing.ellipse(Main.current_x, 200, CIRCLE_SIZE, CIRCLE_SIZE);
    }
}

上記ソースコードを実装したサンプル

　アニメーションは時間をまたぐので、必要なデータは確保しておく必要があります。サンプルでは、Main.current_xに現在のX座標を、Main.vector_xに現在の進むべきベクトルを保持するようにしています。各コマでの描画ではまず、clearメソッドによって、Canvas内容をクリアしています。これを呼ばないと前回までの描画内容の上に重ねて描画するようになり、サンプルでは最終的に青い横棒のような絵になることが予想できます。Processingに関して特筆すべき点はこれぐらいで、後はアプリケーションの領域になります。

フレームごとの描画：Flash編

　Flashでは、onEnterFrameを用いてフレームごとに描画を行います。ソースだけ抜粋すると以下のようになります。

this.addEventListener(Event.ENTER_FRAME, draw);
function draw(e) {
    //フレームごとに呼ばれる
}

上記ソースコードを実装したサンプル

　このようにフレームが切り替わるごとに呼ばれるイベントonEnterFrameのイベントリスナを登録すれば良いわけです。フレームレートは、Flashドキュメントのプロパティで変更が可能です。

簡単なアニメーションの実装：Flash編

　同様のアニメーションを行ってみます。

this.addEventListener(Event.ENTER_FRAME, draw);

var CIRCLE_SIZE = 50;
var CIRCLE_HALF_SIZE = CIRCLE_SIZE/2;

//現在の X 座標
var current_x = 100;
//X方向のベクトル
var vector_x = 10;

function draw(e) {
    //描画のクリア
    this.graphics.clear();
    
    //現在の座標に、ベクトルを足す
    current_x += vector_x;
    if (0 > current_x-CIRCLE_HALF_SIZE || 400 < current_x+CIRCLE_HALF_SIZE) {
        //円の左端が 0 より小さいか、右端が描画領域より大きい場合は、ベクトルを逆にする
        vector_x = -vector_x;
    }

    //色
    this.graphics.beginFill(0x0000ff);
    //描画 ここでの指定は半径なので、半分に
    this.graphics.drawCircle(current_x, 200, CIRCLE_SIZE/2);
}

上記ソースコードを実装したサンプル

　これまで説明したように、ProcessingとFlashではそれぞれの方言はあるものの、基本的には同じような考えに沿ってコードを書くことができます。