Interactive Music II Processingによるアニメーション

東京藝術大学芸術情報センター (AMC) 2013年12月26日 田所 淳

先週の復習

最終課題に向けての方針‣ 前回解説したOSCを活用して、SuperColliderでサウンドを、Processingでビジュアルを表現します

OSC

アニメーション‣ アニメーションをつくるには、すこしづつ変化する画像を、一定間隔で入れ替える必要がある

‣ パラパラ漫画 !

‣ Processingでアニメーションを実現するには ‣ 現在のプログラムをより構造化していく必要がある

アニメーション‣ setup()とupdate()という二つのパートに構造化してアニメーションを実現 !

‣ setup() - 初期設定: ‣ プログラムの起動時に一度だけ実行 ‣ 画面の基本設定やフレームレートなどを設定します。 !

‣ draw() - 描画: ‣ 設定した速さ(フレームレート)でプログラムが終了するまでくりかえし実行されます。

アニメーション‣ setup()とupdate() のイメージ

float posX, posY; //円の中心位置を格納する変数 float speedX, speedY; //円の速度を格納する変数 void setup() { size(640, 480); //640x480pixelの画面を生成 frameRate(60); //フレームレート stroke(63, 191, 255); //線の色 fill(0, 127, 255, 127); //塗りの色 posX = 40; //円の初期位置X posY = 40; //円の初期位置Y speedX = 3; //円の初期位置X speedY = 2; //円の初期位置Y } !void draw() { background(15); //背景を描画 ellipse(posX, posY, 20, 20); //指定した位置に円を描画 posX = posX + speedX; //円のX座標を更新 posY = posY + speedY; //円のY座標を更新 }

アニメーション‣ この仕組みを利用して、円が斜め下に移動するプログラムを作成

アニメーション‣ 円が等速度で移動する

条件分岐

条件分岐‣ 先週のプログラムを改良 ‣ 画面の端にきたらバウンドする動きを加える !

‣ この動きを実現するには以下の条件を設定する必要あり !

‣ 画面の右端、もしくは画面の左端 → X方向のスピードを反転 ‣ 画面の上端、もしくは画面の下端 → Y方向のスピードを反転

条件分岐‣ 「もし○○○なら、×××しなさい」→ 条件分岐 ‣ 「if文」を使用する

if(《条件式》){ 《真文》 } else { 《偽文》 }

条件分岐‣ 条件分岐を適用 ‣ 画面の端にきたら、X方向もしくはY方向のスピードを反転

float posX, posY; //円の中心位置を格納する変数 float speedX, speedY; //円の速度を格納する変数 !void setup() { size(640, 480); //640x480pixelの画面を生成 frameRate(60); //フレームレート stroke(63, 191, 255); //線の色 fill(0, 127, 255, 127); //塗りの色 posX = 40; //円の初期位置X posY = 40; //円の初期位置Y speedX = 3; //円の初期位置X speedY = 2; //円の初期位置Y }

条件分岐‣ if文で画面の端でバウンドさせる

void draw() { background(15); //背景を描画 ellipse(posX, posY, 20, 20); //指定した位置に円を描画 posX = posX + speedX; //円のX座標を更新 posY = posY + speedY; //円のY座標を更新 if (posX < 0 || posX > width) { //もし画面の左端、または右端に到達したら speedX = speedX * -1; //X方向のスピードを反転 } if (posY < 0 || posY > height) { //もし画面の下端、または上端に到達したら speedY = speedY * -1; //Y方向のスピードを反転 } }

条件分岐‣ if文で画面の端でバウンドさせる

条件分岐‣ 画面の端でバウンドする動きに!

ベクトル(向きと大きさ)で動きを再定義

ベクトル(向きと大きさ)で動きを再定義‣ ここまでの動きの定義の方法 ‣ あまり洗練されたやり方ではなかった !

‣ 位置: posX と posY ‣ 速度: speedX と speedY !

‣ それぞれのパラメーターで、常に(x, y)という2つの変数 ‣ もっと整理して定義できないだろうか? !

‣ → 「ベクトル」という概念の導入

ベクトル(向きと大きさ)で動きを再定義‣ ベクトル (vector) ‣ 幾何学的空間における、大きさと向きを持った量 ‣ 例: 速度、加速度、力など ‣ 平面上や空間内の矢印としてイメージ

ベクトル(向きと大きさ)で動きを再定義‣ 原点(0,0)から(2,3)の座標までのベクトル

ベクトル(向きと大きさ)で動きを再定義‣ Processingでは、ベクトルを定義するのに適した「PVector」というクラス(属性と動作の型)が用意されている

‣ ２次元平面でのアニメーション ‣ PVectorクラスを用いることでとても簡単に整理される !

‣ 画面の端でバウンドするアニメーションを、PVectorを使用して書き直してみる

PVector location; //位置のベクトル PVector velocity; //速度のベクトル !void setup() { size(640, 480); //640x480pixelの画面を生成 frameRate(60); //フレームレート stroke(63, 191, 255); //線の色 fill(0, 127, 255, 127); //塗りの色 location = new PVector(40, 40); //位置のベクトルの初期設定 velocity = new PVector(3, 2); //速度のベクトルの初期設定 } !

ベクトル(向きと大きさ)で動きを再定義

void draw() { background(15); //背景を描画 ellipse(location.x, location.y, 20, 20); //指定した位置に円を描画 location.add(velocity); //位置のベクトルに速度のベクトルを加算、次の位置になる //もし画面の左端、または右端に到達したら if ((location.x > width) || (location.x < 0)) { velocity.x *= -1; //X方向のスピードを反転 } //もし画面の下端、または上端に到達したら if ((location.y > height) || (location.y < 0)) { velocity.y *= -1; //Y方向のスピードを反転 } }

ベクトル(向きと大きさ)で動きを再定義

たくさんの図形を同時に動かす

たくさんの図形を同時に動かす‣ たくさんの図形を同時に動かすには? !

‣ 図形の数だけ同じコードを書く? ‣ 動かす図形が、100個、1000個と増えるにつれ破綻する !

‣ こうした際には、配列を使うと良い

たくさんの図形を同時に動かす‣ 配列 - データのロッカーのようなイメージ ‣ 例: float[] data = new float[5];

たくさんの図形を同時に動かす‣ 位置(location)、速度(velocity)をそれぞれ配列に変更 ‣ 沢山の位置と速度を扱えるようにしてみる

int NUM = 100; //配列の数 //位置のベクトルの配列 PVector[] location = new PVector[NUM]; //速度のベクトルの配列 PVector[] velocity = new PVector[NUM]; !void setup() { size(640, 480); //640x480pixelの画面を生成 frameRate(60); //フレームレート stroke(63, 191, 255); //線の色 fill(0, 127, 255, 127); //塗りの色 for (int i = 0; i < NUM; i++) { //配列の数だけ繰り返し //位置のベクトルの初期設定 location[i] = new PVector(random(width), random(height)); //速度のベクトルの初期設定 velocity[i] = new PVector(random(-4, 4), random(-4, 4)); } }

たくさんの図形を同時に動かす‣ 配列の使用

void draw() { background(15); //背景を描画 for (int i = 0; i < NUM; i++) { //配列の数だけ繰り返し //指定した位置に円を描画 ellipse(location[i].x, location[i].y, 20, 20); //位置のベクトルに速度のベクトルを加算、次の位置になる location[i].add(velocity[i]); //もし画面の左端、または右端に到達したら if ((location[i].x > width) || (location[i].x < 0)) { velocity[i].x *= -1; //X方向のスピードを反転 } //もし画面の下端、または上端に到達したら if ((location[i].y > height) || (location[i].y < 0)) { velocity[i].y *= -1; //Y方向のスピードを反転 } } }

たくさんの図形を同時に動かす‣ 配列の使用

たくさんの図形を同時に動かす‣ 100個の円が、同時に動く

int NUM = 500; //配列の数 //位置のベクトルの配列 PVector[] location = new PVector[NUM]; //速度のベクトルの配列 PVector[] velocity = new PVector[NUM]; //塗りの色の配列 color[] col = new color[NUM]; //円の大きさ(直径)の配列 float[] diameter = new float[NUM]; !void setup() { size(640, 480); //640x480pixelの画面を生成 frameRate(60); //フレームレート noStroke(); for (int i = 0; i < NUM; i++) { //配列の数だけ繰り返し //位置のベクトルの初期設定 location[i] = new PVector(random(width), random(height)); //速度のベクトルの初期設定 velocity[i] = new PVector(random(-4, 4), random(-4, 4)); //色の初期設定 col[i] = color(random(255), random(255), random(255), 127); //大きさの初期設定 diameter[i] = random(3, 40); } }

たくさんの図形を同時に動かす‣ さらにプログラムを工夫して、色と大きさもランダムに

void draw() { background(15); //背景を描画 //配列の数だけ繰り返し for (int i = 0; i < NUM; i++) { fill(col[i]); //色を指定 //指定した位置に円を描画 ellipse(location[i].x, location[i].y, diameter[i], diameter[i]); //位置のベクトルに速度のベクトルを加算、次の位置になる location[i].add(velocity[i]); //もし画面の左端、または右端に到達したら if ((location[i].x > width) || (location[i].x < 0)) { velocity[i].x *= -1; //X方向のスピードを反転 } //もし画面の下端、または上端に到達したら if ((location[i].y > height) || (location[i].y < 0)) { velocity[i].y *= -1; //Y方向のスピードを反転 } } }

たくさんの図形を同時に動かす‣ さらにプログラムを工夫して、色と大きさもランダムに

たくさんの図形を同時に動かす‣ 完成!