Processing.jsによるHTML5 Canvasグラフィック (2/5)
作成:2010-04-26 16:51
更新:2010-12-12 21:29
更新:2010-12-12 21:29
■主な描画用メソッドを整理しよう
では、draw関数で実行している処理を見てみましょう。ここでは「fill」とか「stroke」とか「ract」とか、いろいろな関数を実行しています。これらが、描画のための関数なのです。では、主な描画用関数を以下に整理しましょう。
・描画エリアのサイズ設定
・バックグラウンドの設定
・線の太さの設定
・描画色の設定
・図形の描画
・点と線の描画
とりあえず、このぐらいの基本的な関数を覚えれば、簡単な図形ぐらいはすぐに描けるようになります。では、利用例を以下にあげておきましょう。ここでは繰り返しと乱数を使い、ランダムに円を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」としておく必要があります。
・描画エリアのサイズ設定
size( 横幅 , 縦幅 );まず最初に行うべきことは、Canvasすなわち描画するエリアのサイズを設定することです。これは、sizeで縦横の幅(ドット数)を設定するだけです。
・バックグラウンドの設定
background( 輝度 )これは、描画に使う<Canvas>タグの背景色を設定するものです。単に1つの引数だけ指定すると、輝度を示すものとして判断され、グレースケールで背景色が指定されます。3つの引数を指定すると、RGB各色の輝度と判断されます。各値は、0~255の値で指定します。
background( 赤, 緑, 青 )
・線の太さの設定
strokeWeight( 太さ )描画する図形の線の太さを指定します。これは、そのままドット数の値と考えてよいでしょう。
・描画色の設定
stroke( 赤, 緑, 青 )図形の描画は、まず「stroke」と「fill」で、図形の色を設定しておきます。strokeが線分の色、fillが塗りつぶす色です。いずれも、RGBの各色を指定すればOKです。まだ、第4引数にアルファチャンネルの値を指定し、半透明の色を指定することも可能です。
fill( 赤, 緑, 青 )
・図形の描画
rect( 横位置, 縦位置, 横幅, 縦幅 )四角形と円形を描く関数です。いずれも、位置と大きさを示す4つの値を指定します。注意したいのは、ellipseの位置の値です。これで指定されるのは、円の中心位置です。
ellipse( 横位置, 縦位置, 横幅, 縦幅 )
・点と線の描画
point( 横位置, 縦位置 )pointは、指定した位置に点を描きます。lineは、2つの点の位置を引数で指定し、その2点を結ぶ直線を描きます。
line( 横位置1, 縦位置1, 横位置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」としておく必要があります。
(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); }
※関連コンテンツ