Processing.jsによるHTML5 Canvasグラフィック (2/5)

では、draw関数で実行している処理を見てみましょう。ここでは「fill」とか「stroke」とか「ract」とか、いろいろな関数を実行しています。これらが、描画のための関数なのです。では、主な描画用関数を以下に整理しましょう。


・描画エリアのサイズ設定

size( 横幅 , 縦幅 );

まず最初に行うべきことは、Canvasすなわち描画するエリアのサイズを設定することです。これは、sizeで縦横の幅（ドット数）を設定するだけです。


・バックグラウンドの設定

background( 輝度 )
background( 赤, 緑, 青 )

これは、描画に使う<Canvas>タグの背景色を設定するものです。単に１つの引数だけ指定すると、輝度を示すものとして判断され、グレースケールで背景色が指定されます。３つの引数を指定すると、RGB各色の輝度と判断されます。各値は、０～255の値で指定します。


・線の太さの設定

strokeWeight( 太さ )

描画する図形の線の太さを指定します。これは、そのままドット数の値と考えてよいでしょう。


・描画色の設定

stroke( 赤, 緑, 青 )
fill( 赤, 緑, 青 )

図形の描画は、まず「stroke」と「fill」で、図形の色を設定しておきます。strokeが線分の色、fillが塗りつぶす色です。いずれも、RGBの各色を指定すればOKです。まだ、第４引数にアルファチャンネルの値を指定し、半透明の色を指定することも可能です。


・図形の描画

rect( 横位置, 縦位置, 横幅, 縦幅 )
ellipse( 横位置, 縦位置, 横幅, 縦幅 )

四角形と円形を描く関数です。いずれも、位置と大きさを示す４つの値を指定します。注意したいのは、ellipseの位置の値です。これで指定されるのは、円の中心位置です。


・点と線の描画

point( 横位置, 縦位置 )
line( 横位置1, 縦位置1, 横位置2, 縦位置2 )

pointは、指定した位置に点を描きます。lineは、２つの点の位置を引数で指定し、その２点を結ぶ直線を描きます。


とりあえず、このぐらいの基本的な関数を覚えれば、簡単な図形ぐらいはすぐに描けるようになります。では、利用例を以下にあげておきましょう。ここでは繰り返しと乱数を使い、ランダムに円を100個描いています。ページをリロードすると、また違ったグラフィックが表示されますよ。

乱数は、「random」という関数を使っています。これは、ゼロから引数に指定した値までの乱数を返します。このrandomを使って、RGBの色の値と描く位置の値を変数に用意し、それを使って描画をしています。

よく見ると、変数は「var r = random(255);」ではなく、「float r = ……」と書かれていますね？　Processingでは、変数を使う際には、varではなく、値のタイプを指定するのです。このあたり、ちょっとJavaっぽいですね。Processingで利用できる変数のタイプは、「float」「double」といった実数、「byte」「int」といった整数、「boolean」による真偽値、「char」によるキャラクタ、「String」によるテキスト、「color」による色の値……などなどが用意されています。

繰り返しは、「for」を利用しています。これは、基本的にJavaScriptのforとほぼ同じです。ただし、カウンタ変数は、「var i = 0」ではなく「int i = 0」としておく必要があります。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

※sample.pjsのスクリプト

size(250, 250);
background(255);
strokeWeight(1);
for(int i = 0;i < 100;i++){
	float r = random(255);
	float g = random(255);
	float b = random(255);
	float x = random(250);
	float y = random(250);
	fill(r,g,b,50);
	stroke(r,g,b,100);
	ellipse(x,y,50,50);
}