libro
www.tuyano.com
JavaScript/Ajaxライブラリ入門

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

作成:2010-04-26 16:51
更新:2010-12-12 21:29

■主な描画用メソッドを整理しよう

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


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


・バックグラウンドの設定
background( 輝度 )
background( 赤, 緑, 青 )
これは、描画に使う<Canvas>タグの背景色を設定するものです。単に1つの引数だけ指定すると、輝度を示すものとして判断され、グレースケールで背景色が指定されます。3つの引数を指定すると、RGB各色の輝度と判断されます。各値は、0~255の値で指定します。


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


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


・図形の描画
rect( 横位置, 縦位置, 横幅, 縦幅 )
ellipse( 横位置, 縦位置, 横幅, 縦幅 )
四角形と円形を描く関数です。いずれも、位置と大きさを示す4つの値を指定します。注意したいのは、ellipseの位置の値です。これで指定されるのは、円の中心位置です。


・点と線の描画
point( 横位置, 縦位置 )
line( 横位置1, 縦位置1, 横位置2, 縦位置2 )
pointは、指定した位置に点を描きます。lineは、2つの点の位置を引数で指定し、その2点を結ぶ直線を描きます。


とりあえず、このぐらいの基本的な関数を覚えれば、簡単な図形ぐらいはすぐに描けるようになります。では、利用例を以下にあげておきましょう。ここでは繰り返しと乱数を使い、ランダムに円を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」としておく必要があります。

※プログラムリストが表示されない場合

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);
}

※関連コンテンツ

「JavaScript/Ajaxライブラリ入門」に戻る