Processingのサンプル解説第2弾です。
前回のArray2Dはお絵描きそれ自体よりも配列という機能の使い方を学ぶという目的が強かったですが、
今回はProcessingならではのインタラクティブなお絵描きの例を説明しようと思います。
今回扱うサンプルはPtternという名前のものです。
難易度は ★★★☆☆ くらい。
前回同様サンプルを呼び出し、「Topics」→「Drawing」→「Pattern」を開いてください。
このようなコードが現れます。
とりあえず、実行してみましょう。
ウィンドウが出てきましたね。
このウィンドウ上でマウスカーソルを動かしてみましょう。
マウスカーソルの動きに従って色んな大きさの円が描かれました！
Processingはこのようにこちらの操作に応じた描画を行うこともできます。楽しいですね。
このサンプルコードを理解するとできるようになることは
マウスの位置による変化を表現できる
です。
それではこのコードがどのように動いているのか、順を追って見ていきましょう。
コードの全貌はこのようになっています。
/**
* Patterns.
*
* Move the cursor over the image to draw with a software tool
* which responds to the speed of the mouse.
*/
void setup() {
size(640, 360);
background(102);
}
void draw() {
// Call the variableEllipse() method and send it the
// parameters for the current mouse position
// and the previous mouse position
variableEllipse(mouseX, mouseY, pmouseX, pmouseY);
}
// The simple method variableEllipse() was created specifically
// for this program. It calculates the speed of the mouse
// and draws a small ellipse if the mouse is moving slowly
// and draws a large ellipse if the mouse is moving quickly
void variableEllipse(int x, int y, int px, int py) {
float speed = abs(x-px) + abs(y-py);
stroke(speed);
ellipse(x, y, speed, speed);
}
by 上から順に読んでいく。
/**
* Patterns.
*
* Move the cursor over the image to draw with a software tool
* which responds to the speed of the mouse.
*/
コードの説明からはじまっていますね。ざっくり訳すと、
「画像上でマウスカーソルを動かして、マウスカーソルの速さに応じたツールで絵を描いて。」
と言っています。「ツール」がなんのことかよくわかりませんが、コードを読んでいくとわかりそうですね。
まずはsetup関数の中身を見ます。
void setup() {
size(640, 360);
background(102);
}
sizeは描画ウィンドウのサイズを設定します。今回は横=640ピクセル、縦=360ピクセルに指定しています。
backgroundは背景色を設定します。
次にdraw関数の中身です。まずはコメント部を読みましょう。
// Call the variableEllipse() method and send it the
// parameters for the current mouse position
// and the previous mouse position
「varaibleEllipse()メソッドを呼び出し、そこに現在のマウス位置とちょっと前のマウス位置を渡します。」
だそうです。
variableEllipseというのが出てきましたね。どうやらこれが円を描くためのメソッドのようです。「メソッド」を知らない方は「関数」と思ってくだされば問題ありません。
そして直後の行で、variableEllipseが実行されていますね。
variableEllipse(mouseX, mouseY, pmouseX, pmouseY);
variableEllipseはProcessingが標準搭載している関数ではありません。この時点では意味はわかりません。
ただ、ここで使われているmouseX,mouseY,pmouseX,pmouseYは、Processingが用意してくれている変数です。
それぞれの表す値は表の通りです。
次はまたコメントです。
// The simple method variableEllipse() was created specifically
// for this program. It calculates the speed of the mouse
// and draws a small ellipse if the mouse is moving slowly
// and draws a large ellipse if the mouse is moving quickly
「variableEllipseというメソッドはこのプログラムのために特別に作成されています。これはマウスカーソルの移動速度を計算し、マウスカーソルの動きが遅ければ小さな円を、速ければ大きな円を描きます。」と言っています。
次へ進みましょう。問題のvariableEllipse関数です。
void variableEllipse(int x, int y, int px, int py) {
float speed = abs(x-px) + abs(y-py);
stroke(speed);
ellipse(x, y, speed, speed);
}
引数がいっぱいありますね。x, y, px, py。
speedが定義されていますね。
strokeは、この行以降で描画される図形の枠線の太さを指定する関数です。
ellipseは楕円を描く関数です。
今回は
中心が(x, y)で、横軸の半径がspeed、縦軸の半径がspeedの楕円
を描きます。
これでvariableEllipse関数の説明は終わりなのですが、ここで17行目でvariableEllipse関数が呼び出されている箇所を再びみてみましょう。
variableEllipse(mouseX, mouseY, pmouseX, pmouseY);
さっきの関数の定義部分と比較してみると次の表のように値が渡されていることがわかります。
大きな円？
今回のコード、実行した人は気づいたかもしれませんが、一つ目に描かれる円がやけに大きくなることがあります。
なぜでしょう？
コードの実行時、mouseX、mouseY、pmouseX、pmouseYはどれも0となっていますが、マウスカーソルが描画ウィンドウ上に乗った瞬間から、これらは値を持ち始めます。ウィンドウに乗っている限り、少し移動するごとに値は更新されていきます。
この結果、初めだけ円が大きくなるんですね。
ところで、カーソルをウィンドウの外で遠くに移動してから、ウィンドウ上に乗ると、やはり円は大きくなります。どうしてこのような描画になるのか、考えてみてください。
このような考察は、プログラムをよく理解していないと行えません。そしてこういった考察は、みなさんがこれから自分でプログラムを書いていく際に必要になる能力です。プログラムを書く側は、ユーザーの様々な操作を想定しておかないと、期待の処理を行えないのです。
精密な思考が問われるので決して楽ではないですが、エンジニアの腕の見せ所でもあります。少しずつ力をつけていきましょう！
さいごに
今回はPatternについて解説しました。関数としてはマウスカーソルの位置取得が出てきましたが、作品を作る上で基本的かつ便利な道具です。ぜひ使いこなしてくださいね！
