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

» 2008年11月17日 00時00分公開

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

マウス、キーボードの入力に反応させるには？

　続いて、マウス入力を使うプログラムを作ってみましょう。

float pd=0;
void setup() { // setup関数はlist 1とほぼ同じ
    size(300, 300);
    background(255);
    colorMode(HSB, 360, 100, 100);
    noStroke();
    smooth();
    frameRate(15);
}
void draw() {
    // 画面をフェードアウト
    noStroke();
    fill(0, 0, 99, 33);
    rect(0, 0, width, height);
    // マウスの移動距離を求める
    float d = dist(mouseX, mouseY, pmouseX, pmouseY) / 3;
    // 色の設定
    stroke(0, 0, 50);
    fill(200 + d, 80, 99);
    // TRIANGLE_STRIPモードでリボンを描画
    beginShape(TRIANGLE_STRIP);
    // 指定されたvertexの3頂点ずつで
    // なされる3角形を描画する
    // ここでは4頂点指定されているので、
    // 2つの3角形が描画される
    vertex(pmouseX+pd, pmouseY+pd);
    vertex(pmouseX-pd, pmouseY-pd);
    vertex(mouseX+d, mouseY+d);
    vertex(mouseX-d, mouseY-d);
    endShape(CLOSE);
    // 今回のマウスの移動距離をpdに保存し、次回フレームに持ち越す
    pd = d;
}

list 2-a

　以下が上のソースコードの実行サンプルです。「実行」ボタンを押して白いキャンバスの上でマウスを動かしてみてください。

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

　Processingでは、現在のマウス座標が「mouseX」「mouseY」というグローバル変数として常に取得できます。また、1つ前のフレームでのマウス座標も「pmouseX」「pmouseY」という変数に保持される仕組みです。これらのマウス座標変数を用いてマウスの移動距離を求めているのがdraw関数5行目のdist命令です。distは2点間の距離を求めるProcessingの組み込み命令です。

頂点を結んで図形を描画する関数

　図形描画には頂点を結んで図形を描画する「beginShape」および「endShape」命令を使っています。beginShapeとendShapeの間で頂点を複数の頂点を指定することで、その頂点を結んだ領域を図形として描画します。描画される図形はbeginShapeに指定する複数のモードで定義され、今回は「TRIANGLE_STRIP」モード、3角形をつなげた形を描画しています。

マウスボタンに反応

　マウスポインタの位置だけでなく、マウスボタンを使ってみましょう。Processingでマウスボタン入力を検知するには、setupやdrawと同様に決まった名前の関数を定義します。ボタンを押したことを検知したいなら、「mousePressed」という関数に処理を定義することで、マウスボタンを押された場合の処理が可能です。サンプルの末尾に以下のコードを追加してみましょう。

void mousePressed() {
    // 塗りつぶしをなくす
    noFill();
    // 線の太さを6ピクセルに
    strokeWeight(6);
    // 線の色をマウスのx座標で決定
    stroke(mouseX, 80, 99);
    // 円を描画
    ellipse(mouseX, mouseY, 60, 60);
    // 線の太さを戻す
    strokeWeight(1);
}

list 2-b

　実行すると、マウスボタンを押したときにmousePressedが実行され、円が描画されます。同様にマウスの動作時に呼び出される予約関数として、マウスボタンを離した際の「mouseReleased」、マウスポインタが動いた際の「mouseMoved」、ボタンを押したままでポインタを動かした際の「mouseDragged」などがあります。

キーボード入力に反応

　マウス入力と同様に、キーボードからの入力を「keyPressed」「keyReleased」という関数を定義することで処理できます。キーボードが押された際、押されたキーコードが「key」というグローバル変数に格納されるので、この変数を判定することで、特定のキーや複数のキーに合わせた処理を書くことができます。

　次のプログラムを、これまでのプログラムにさらに追加してみましょう（この関数はProcessing.jsに対応していないため、本体のProcessingでお試しください）。

void keyPressed() {
    if(key == 'p' || key == 'P') {
        // 画面をpngファイルに保存
        save("screenshot.png");
        // 保存したことをコンソールに表示
        pritntln("screen saved.");
    }
}

list 2-c

　プログラムを入力して実行したら、マウスを動かしながらキーボードの［p］キーを押すと、そのときのプログラム実行画面が画像に保存されます。この際画面に何の変化も起きないので、Processingのコンソール画面（Processingウィンドウのエディタの下に組み込まれた、プログラムのエラーやプログラムからのメッセージを表示する領域）に「screen saved.」という文字を表示するようにしています。

　画像はこのプログラムのスケッチフォルダに保存されるので、Processingの「Sketch」メニューから「Show Sketch Folder」を選択してスケッチフォルダを開けば、保存された画像を見ることができます。