Processingで簡単な絵を描いてみよう

使い方が分かったところで、簡単に Processing のコマンドをいくつか見ていきます。先ほど作ったプログラムでは、円を描くものでした。もう一度見てみましょう。

size(200,200);            // ウィンドウのサイズを決める
ellipse(100,100,180,180); // 円を描画する

1行目の size() コマンドは、ウィンドウのサイズを指定するものです。「size(横の長さ, 縦の長さ)」でウィンドウサイズを決めます。

2行目の ellipse() では、円を描画します。「ellipse(x, y, width, height)」の書式で記述します。widthは横の長さ、heightは縦の長さです。

このように、「コマンドの名前(パラメーター);」のように指定することで、さまざまな描画命令を実行できます。どんな命令があるのかは、付属のリファレンス(reference\index.html)で確認できます。

有志がProcessingのリファレンスを邦訳していますので参考になるでしょう。

円をたくさん描く

次に、もっとたくさんの円を描いてみようと思います。3000個のランダムな円を描いてみます。プログラムのある範囲を繰り返すには「for」構文を使います。何千回も同じ処理を行わせても文句を言われないのが、プログラミングの良いところです。色の調合具合も青をベースにしつつランダムにしてみました。

たくさんの円を描いてみました

 
 size(400,200); // ウィンドウのサイズを決める
 noStroke();    // 円のボーダー線を描画しない
 for (int i = 0; i < 3000; i++) { // 以下を3000回繰り返す
   // どこに描画するのか座標をランダムに決める
   float x = random(width);
   float y = random(height);
   // どの色で描画するのかランダムに決める
   float r = random(256); // 赤色 (0～255)
   float g = random(256); // 緑色 (0～255)
   float b = 256;         // 青色 (0～255)
   // 実際に描画する
   fill(r, g, b);        // 塗りつぶしする色を決める
   ellipse(x, y, 16,16); // 円を描画する
 }

どうでしょうか。プログラム中にコメント(「//」から改行までの部分でプログラムとして意味を持たない注釈文)をたくさん入れましたので、それぞれのコマンドの意味は何となくつかめたでしょうか。

繰り返しを行う「for」構文の使い方などは、C言語 や Java と同じです。詳しくはそれらの言語の解説書を当たると良いでしょう。繰り返しや条件分岐などプログラミングの基本はだいたいどの言語でも同じです。