いろいろな形をいろいろな色で描こう：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つ目の引数が読み込み完了を受けるコールバック関数となっており、その中で描画するようにしています。
