1. Interactive Music II
Processingによるアニメーション
東京藝術大学芸術情報センター (AMC)
2013年12月26日
田所 淳

2. 先週の復習

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

4. アニメーション
‣ アニメーションをつくるには、すこしづつ変化する画像を、一
定間隔で入れ替える必要がある
‣ パラパラ漫画
!
‣ Processingでアニメーションを実現するには
‣ 現在のプログラムをより構造化していく必要がある

5. アニメーション
‣ setup()とupdate()という二つのパートに構造化してアニメーショ
ンを実現
!
‣ setup() - 初期設定:
‣ プログラムの起動時に一度だけ実行
‣ 画面の基本設定やフレームレートなどを設定します。
!
‣ draw() - 描画:
‣ 設定した速さ(フレームレート)でプログラムが終了するまでく
りかえし実行されます。

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

7. アニメーション
‣ この仕組みを利用して、円が斜め下に移動するプログラムを作成
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座標を更新
}

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

9. 条件分岐

10. 条件分岐
‣ 先週のプログラムを改良
‣ 画面の端にきたらバウンドする動きを加える
!
‣ この動きを実現するには以下の条件を設定する必要あり
!
‣ 画面の右端、もしくは画面の左端 → X方向のスピードを反転
‣ 画面の上端、もしくは画面の下端 → Y方向のスピードを反転

11. 条件分岐
‣ 「もし○○○なら、×××しなさい」→ 条件分岐
‣ 「if文」を使用する
if(《条件式》){
《真文》
} else {
《偽文》
}

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

13. 条件分岐
‣ if文で画面の端でバウンドさせる
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
}

14. 条件分岐
‣ 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方向のスピードを反転
}
}

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

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

17. ベクトル(向きと大きさ)で動きを再定義
‣ ここまでの動きの定義の方法
‣ あまり洗練されたやり方ではなかった
!
‣ 位置: posX と posY
‣ 速度: speedX と speedY
!
‣ それぞれのパラメーターで、常に(x, y)という2つの変数
‣ もっと整理して定義できないだろうか?
!
‣ → 「ベクトル」という概念の導入

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

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

20. ベクトル(向きと大きさ)で動きを再定義
‣ Processingでは、ベクトルを定義するのに適した「PVector」
というクラス(属性と動作の型)が用意されている
‣ ２次元平面でのアニメーション
‣ PVectorクラスを用いることでとても簡単に整理される
!
‣ 画面の端でバウンドするアニメーションを、PVectorを使用し
て書き直してみる

21. ベクトル(向きと大きさ)で動きを再定義
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); //速度のベクトルの初期設定
}
!

22. ベクトル(向きと大きさ)で動きを再定義
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方向のスピードを反転
}
}

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

24. たくさんの図形を同時に動かす
‣ たくさんの図形を同時に動かすには?
!
‣ 図形の数だけ同じコードを書く?
‣ 動かす図形が、100個、1000個と増えるにつれ破綻する
!
‣ こうした際には、配列を使うと良い

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

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

27. たくさんの図形を同時に動かす
‣ 配列の使用
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));
}
}

28. たくさんの図形を同時に動かす
‣ 配列の使用
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方向のスピードを反転
}
}
}

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

30. たくさんの図形を同時に動かす
‣ さらにプログラムを工夫して、色と大きさもランダムに
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);
}
}

31. たくさんの図形を同時に動かす
‣ さらにプログラムを工夫して、色と大きさもランダムに
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方向のスピードを反転
}
}
}

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