簡単なサンプル

サンプル

 まず今回紹介するサンプルを見ていただきます。

 準備したCanvas上に色と大きさの異なる矩形を適当な位置へ配置しゆっくり消していくという一連の動作を永遠に繰り返します。

コード

void setup(){
	size(320, 120);
	noStroke();
	frameRate(10);
}

void draw(){
	fill(255, 20);
	rect(0, 0, width, height);
	fill(random(255), random(255), random(255), random(255));
	rect(random(width), random(height), random(width), random(height));
}

<sample.pde>

noStroke()

 オブジェクトの輪郭を描画しないようにする命令です。
 この命令がないと、以下のようになります。

<sample_nostroke.pde>

frameRate(10)

 1秒間にdraw()関数を実行する回数を設定する命令です。
 デフォルトは60ですが、10~20くらいに設定するのが適当だと思います。
 大きなCanvasサイズを利用する場合や処理が複雑な場合は高負荷になりやすいので、frameRateの値を下げて訪問者をお迎えしましょう。

<sample_framerate.pde>

 frameRateを5に設定した場合です。

fill(255, 20)

 オブジェクトを描画する際の塗り色を設定します。
 fill(r, g, b, a)が標準書式ですが、上記のようにfill(n1, n2)とすると、fill(n1, n1, n1, n2)と記述した場合と同じになります。
 全ての値は0~255で設定します。上記の場合は白色、透明度20/255*100パーセントを塗り色に設定しています。

rect(x, y, width, height)

 座標(x, y)を開始位置として、(width, height)の大きさの矩形を描画します。

※ここで示しているwidth、heightは描画する矩形の幅と高さを意味し、次に示すwidth、heightとは別物です

(システム変数としての)width、height

 少し紛らわしいですが、ここでいうwidth、heightは幅、高さという意味ではありません。
 size命令で作成したCanvasの幅と高さは、システム変数としてwidth、heightに代入されて、プログラムの中で利用することが出来ます。
 今回の例で言えば、size(320, 120)で初期化したので、widthには320、heightには120が代入されます。

random(n)

 0~nの乱数をfloatで発生させることできます。
 素敵なことに、random(n1, n2)と引数を2つ使うとn1~n2の値を作ってくれます。
 結果はfloat値で返ってくるので、整数で使う場合はint()を利用する必要があります。

最後の2行

 色、形を乱数で決めています。

<sample_randomless.pde>

 矩形の位置以外を固定すると、このようになります。

その他

 ドロー系のような使い勝手のライブラリに慣れている方には、ペイント系のProcessing.jsはとっつき難いかもしれません。
 しかし公式トップにVisualization Languageとある通り、描画処理で他と一線を画すと感じています。
 速度、表現力や手軽さを求める方にはお勧めのライブラリです。