描画される過程も楽しむ

Processing でいくつかのサンプルを実行してみると、多くのサンプルで絵を動かしているのが分かります。上の記述例では3000個の円を描画しても描画される過程は表示されませんでした。そこで、今度は、円がぽこぽこと描画される様子が分かるように改造してみます。

 // 描画のためのセットアップを行う関数
 void setup() {
   size(400,200); // ウィンドウのサイズを決める
   noStroke();
 }
 // 毎フレーム描画する関数
 void draw() {
   for (int i = 0; i < 10; i++) {
     // ランダムに描画位置を決める
     float x = random(width);
     float y = random(height);
     // ランダムに色を決める
     float r = 255;         // 赤 (0~255)
     float g = random(256); // 緑 (0~255)
     float b = random(256); // 青 (0~255)
     float alpha = 150; // 透明度 (0~255)
     // 描画
     fill(r, g, b, alpha);   // 塗りつぶし色を決める
     ellipse(x, y, 32, 32); // 円を描画する
   }
 }

動くサンプルを作ってみたところ

今回作ったサンプルでは、setup() 関数と、draw() 関数を自分で定義しています。setup() 関数の中では、描画前の設定を行わせ、draw() 関数では、フレームごとに描画する内容を記述します。draw() 関数は、システムから定期的に呼ばれるようになっています。そのため、この関数に毎回描画する内容を指定すれば、動く作品を作ることができます。

まとめ~Processing の面白さを体験してみよう

以上、簡単ながら、Processingについてセットアップから簡単なサンプルを作って実行するまでの過程を紹介しました。Processing初心者の筆者が実際にプログラムを作ってみて、やはり気軽にグラフィックを扱えること点が気に入りました。

Processingは、内部でプログラムをJavaに変換しているので、当然、Javaでも似たようなことができるのですが、はじめに見たサンプルの通り2行書いただけで、絵が描けるのです(Javaだともっといろいろ手続きをつらつらと書く必要があるのです)。また、今回のサンプルでは触れることができませんでしたが、画像ファイルや3Dグラフィックスの扱いがとても簡単で、視覚エフェクトも用意されています。

作った作品は、Java アプレットとして出力することができるので、作品をホームページで公開するのも楽しいでしょう。ちなみに、「Processing 作品」で検索してみると、Processingで作られた多くのアート作品を見ることができます。

年末年始のゆったりした時間に、Processingを使って、本格的なアート作品を作ってみるのはどうでしょうか。