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

いろいろな形をいろいろな色で描こう：Processing.js編

　では、Canvas要素の時に描画したように、Processing.jsを使って線や円、自由曲線などを描いてみましょう（HTMLはJavaScriptの読み込み先をprocessing_3.jsに変更しただけなので割愛します）。

JavaScript: processing_3.js

//jQuery によるドキュメントの読み込みと Processing を new するところは同様なので中略
var Main = {
    init: function(processing) {
        //Processing のキャンバスサイズを 400x400 にする
        processing.size(400, 400);

        //線を描く xy(200, 50)とxy(200, 350)に、幅5の黒色の線を引く
        processing.strokeWeight(5);
        processing.stroke(0, 0, 0);
        processing.line(200, 50, 200, 350);

        //三角を描く 縁の幅が4で黒色、塗りつぶしが白色の三角形を描く
        //triangle を使うこともできるが、ここでは多角形の書き方の基本として以下のように描く
        processing.strokeWeight(4);
        processing.fill(255, 255, 255);
        processing.beginShape();
        processing.vertex(200, 50);
        processing.vertex(150, 150);
        processing.vertex(250, 150);
        processing.vertex(200, 50);
        processing.endShape();

        //円を描く
        processing.fill(0, 0, 255, 255*0.8);
        processing.ellipse(200, 200, 100, 100);

        //塗りつぶしの色を赤にする
        processing.fill(255, 0, 0);
        //矩形
        processing.rect(150, 250, 100, 50);
    }
}

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

　このようにCanvasでの描画より、ややシンプルに描くことが可能です。色や透明度、ストロークなどの指定は、Canvasでは属性の変更だったのに対し、Processingではメソッドを介して変更する点が違います。また、先ほど説明したように、形を書き出すとfill、strokeで指定した情報で塗りつぶしとストロークが書き出され、透明度の指定もCanvasでは0 - 1.0、Processingでは0 - 255となっています。

文字を描こう：Processing.js編

　Canvas要素の時と同じように、もちろん文字も描けます（HTMLはJavaScriptの読み込み先をprocessing_4.jsに変更しただけなので割愛します）。

JavaScript: processing_4.js

//jQuery によるドキュメントの読み込みと Processing を new するところは同様なので中略
var Main = {
    init: function(processing) {
        //中略

        //フォントを "20pt Arial"にし、白で塗りつぶしで文字列を描く
        //縁取りはまだできないので、外部ライブラリと組み合わせるなどが必要
        var font = processing.createFont("Arial", 32);
        processing.textFont(font);
        processing.fill(255, 255, 255);
        processing.text("HELLO CANVAS", 72, 100);
    }
}

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

　文字列の描画もできますが、CanvasにおけるstrokeTextに該当するメソッドがまだ用意されていないようです。Processing.jsでは、例えば、Glyphを実現するGlyph Methodなどを利用すれば良いかもしれません。

イメージを描こう：Processing.js編

　早速描いてみましょう（HTMLはJavaScriptの読み込み先をprocessing_5.jsに変更しただけなので割愛します）。

JavaScript: processing_5.js

//jQuery によるドキュメントの読み込みと Processing を new するところは同様なので中略
var Main = {
    init: function(processing) {
        //中略

        //イメージの描画
        var image = processing.loadImage("dino", "png", function () {
            //イメージのロードイベントを取って描画する
            processing.image(image, 200, 200);
        });
    }
}

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

　loadImage()した直後にimage()をしても、イメージがまだ読み込まれていない可能性があるため、読み込み完了を受けてから描画するようにしています。この場合、loadImage()の3つ目の引数が読み込み完了を受けるコールバック関数となっており、その中で描画するようにしています。