Processingの対話式スケッチプログラミングで遊ぼう：絵心がなくても簡単に絵が描けるProcessing（2）（2/3 ページ）

[田中孝太郎，collisions.doppac.cc]

Processingの3つのプログラミングスタイル

　Processingでは、開発するプログラムの形態や規模に応じて、プログラムの書き方そのものも選べます。前回サンプルプログラムとして紹介したような、1行目から命令が並んでいるシンプルなスタイルは、「基本モード（Basic Mode）と呼ばれており、プログラムで静止画のグラフィックを作る場合やProcessingの命令を覚える際の「はじめの一歩」として使われます。

　そのほかに画面をフレーム単位で更新して、アニメーションやインタラクションのあるプログラミングを簡単に行える「連続モード（Continuous Mode）」や、クラス定義など本格的なオブジェクト指向プログラミングを行う「Javaモード」といったスタイルが、プログラムの内容から自動的に判定されます。

　最初に静止画で描いてみたプログラムを連続モードに変更したり、プログラムの上達に合わせてスタイルを変えることができるようになっているわけです。本連載では、連続モードでのスケッチに挑戦してみましょう。

連続モードのスケッチプログラムを体験してみよう

　Processingの連続モードは、プログラムに決まった名前の関数を定義することで実現します。

void setup() {
    // 画面サイズを200×200に設定
    size(200, 200);
    // 背景色を白で塗りつぶし
    background(255);
    // 色指定をHSBモードにし、色相360/彩度,輝度100段階に設定
    colorMode(HSB, 360, 100, 100);
    // 線の色をなくす
    noStroke();
    // 描画に中間色を使う
    smooth();
    // 描画のフレームレートを10fpsに設定
    frameRate(10);
}
void draw() {
    // 色をランダムに設定
    fill(random(10, 75), 80, 100);
    // 描画座標をランダムな位置に移動
    translate(random(width), random(height));
    // 描画座標をランダムな角度で回転
    rotate(radians(random(15, 75));
    // 描画座標の原点に楕円を描画
    ellipse(0, 0, 20, 40);
}

list 1-a

　下のサンプルの「実行」をクリックすると、上のプログラムが実行されます。ブラウザ上で命令のパラメータを修正して「実行」を押せば、模様が変わったり、サイズを変更したりできますので、変更して遊んでみてください。例えば、サンプルウィンドウにあるコードの最終行のellipseellipse(0, 0, 10, 40);の40を10に変更すると、筆型模様からドットに変更しますので、試してください。

サンプルプログラム「list 1-a」 IEでの動作にはcanvas要素互換ライブラリ「excanvas.js」を利用しています。IEでも動作はしますがFirefoxでの実行を推奨します

　「list 1-a」には、「setup」「draw」という関数が定義されていますが、これらはProcessingではそれぞれ特別な意味を持つ関数です。

初期化をするsetup関数

　具体的には、setup関数はプログラム実行時に最初の1回だけ呼び出される、いわゆる初期化関数です。実際「list 1-a」でも、setup関数の中では、プログラムの基本設定に当たる命令が実行されます。

毎回の画面（フレーム）を描き換えるdraw関数

　もう一方のdraw関数は、setup関数が呼び出された後、一定の間隔で定期的に呼び出される仕組みで、このdraw関数で毎回の画面（フレーム）を描き換えることで、連続的な描画やアニメーションを表現できます。更新のスピード（フレームレート）はsetup関数の中のframeRate命令で指定しています（単位は、fps（frame per second）＝1秒間に何枚のフレームを描画するか）。

乱数を出力するrandom関数

　サンプルで登場している命令についても特徴的なものを解説しておきます。draw関数の中で何度か出ている「random」は名前のとおりランダムな数値（乱数）を出力する命令です。

　Processingのrandom命令は便利な指定が可能で、「random(100)」とすると0?100の乱数を、「random(10,75)」とすると10〜75の範囲での乱数を出力できます。draw関数1行目のfill命令では、そのようにして図形を塗りつぶす色の色相をオータムカラーに限定しています（ここでの色指定モードはsetup命令のcolorMode命令で指定しています）。

座標を変換する関数

　また、draw命令2、3行目のtranslate、rotateの命令は図形描画で使用する座標を変換するための命令で、ここでは図形を描く位置ではなく座標自体を移動、回転させて、任意の位置に図形を描画しています。

画面を毎回リセットする

　Processingでは連続モードでフレームを描画する際、前回描画した画面は初期化されないため、実行してみると分かるように「list 1-a」では、グラフィックが画面を埋め尽くしてしまいます。試しに画面を毎回リセットするようにしてみましょう。先ほどのサンプルプログラムに「background」という命令を追加して、実行してみましょう。

【前略】
…
void draw() {
    // 画面をリセット
    background(0, 0, 99);
    // 色をランダムに設定
    fill(random(10, 75), 80, 100);
…
【中略】

list 1-b

　今度は画面が毎回リセットされ、図形は毎フレーム1つずつしか描画されなくなります。アニメーションやオブジェクトの動きなどを表現する際は、このように画面をリセットしながら描画した方がよいでしょう。

画面に残像を残す

　同様に、以下のようにすることで画面に残像を残すようなグラフィックを表現できます。

【前略】
…
void draw() {
    // 半透明の塗りつぶし色を設定
    fill(0,0, 99, 64);
    // 画面を透明色で塗りつぶし
    rect(0, 0, width, height);
    // 色をランダムに設定
    fill(random(10, 75), 80, 100);
…
【中略】

list 1-c

　次ページでも、ミニ実行環境を設置しています。今度はマウス操作に反応するものです。