インタラクションとアニメーション

マウス操作で円を動かす

ellipse() 関数の引数には変数を設定することができます。

たとえば draw() 関数内の ellipse() 関数の x 座標と y 座標をそれぞれ mouseX, mouseY に変更します。

// draw() 内の ellipse() で mouseX, mouseY を使用する
// setup() は起動時に1回のみ実行される。
void setup() {
  size(800, 600);
  ellipse(400, 100, 50, 50);
}

// draw()　は setup() 実行後に実行され続ける。
void draw() {
  ellipse(mouseX, mouseY, 20, 20); 
}

マウスを動かすとマウスカーソルに追従して次々と円が描画されるはずです。draw() 関数が呼び出されるたびにマウスカーソルの x 座標と y 座標を取得し、その位置に円を描画しています。

【TIPS】実行ウィンドウの調整

実行ウインドウが小さいとインタラクションのためのマウス操作がしづらいです。setup() 関数内で size() 関数を用いてウィンドウサイズを調節してください。フルクリーンにする場合は size() 関数の代わりに fullScreen() 関数が使用可能です。フルスクリーンから抜ける場合は [ Esc ] キーを使いましょう。

背景の設定

このままでは円が増えていく一方なので最後に描画された円だけが表示されるようにします。毎フレームごとに画面を一度塗りつぶしてみたらどうなるでしょうか。

画面を塗りつぶすには background() 関数を使用します。background() 関数は setup() 関数内でも draw() 関数内でも使用することができます。引数は色指定のための要素です。詳細は公式リファレンスを参照してください。setup() 関数内に記述された場合はプログラムの起動時に 1 回のみ、draw() 関数内に記述された場合は draw() 関数が呼び出されるたびに実行されることに注意しましょう。

background() の呼び出し位置のみが違う、以下の 2 つのサンプルを比較します。

void setup() {
  size(800, 600);
  background(0, 0, 0);
  ellipse(400, 100, 50, 50);
}

void draw() {
  ellipse(mouseX, mouseY, 20, 20);
}

void setup() {
  size(800, 600);
  ellipse(400, 100, 50, 50);
}

void draw() {
  background(0, 0, 0);
  ellipse(mouseX, mouseY, 20, 20);
}

円を動かす

これまで学習した内容でマウスに追従して円を操作することができます。ではマウス操作をせずに円を動かすためにはどうしたらよいのでしょうか。draw() が呼びだされるたびに背景を塗りつぶしているので、円の座標が描画のたびに少しづつ変化すれば“動いているように見える”ことになります。少しづつ変化するということを表現するために変数を使います。

//円の x 座標を表す変数（変数名は pos_x でなくてもよい）
int pos_x = 0; 

void setup() {
  size(800, 600);
}

void draw() {
  background(0, 0, 0);
  // x 座標に変数 pos_x を代入する
  ellipse(pos_x, 400, 20, 20);
  // draw() が呼ばれるたびに pos_x を 1 増やす
  pos_x ++;
}

draw() が呼ばれるたびに ellipse() の x 座標が 1 ずつ増加して描画されるので、右に動いているように見えます。

演習課題：連続する変化

線を重ねていくことで、面が生まれ、さらにそこには肌理（きめ）が生まれる。線の重なりによって質感を生み出す作品を制作せよ。

制作条件

画面のサイズは 1280px x 720px とすること。
変数を使用して以下の条件を満たすこと。
- 線が上下左右など一方向に自動で動き、軌跡が残ること。
- 線は動いていく間に少しづつ変化すること。
- 線が画面の外に出たら元の位置に戻し、画面内の軌跡を全て消すこと。

【TIPS】ベジェ曲線を描く bezier()

直線だけでなく曲線も描くことができます。曲線も様々なものがありますが一番ポピュラーだと思われるベジェ曲線を描く bezier() は以下です。

bezier(): https://processing.org/reference/bezier_.html

【TIPS】乱数を生成する random() と noise()

random() や noise() を使用すると乱数を発生させることができます。これらをうまく使用すると変化が有機的なものになり、表現力が増します。

random(): https://processing.org/reference/random_.html

noise(): https://processing.org/reference/noise_.html

【TIPS】実行結果を画像として保存する saveFrame()

saveFrame() を使用すると実行ウィンドウを画像として保存できます。画像はスケッチのフォルダに保存されます。画像ファイルは実行するたびに上書きされるので注意してください。

saveFrame(): https://processing.org/reference/saveFrame_.html