Your SlideShare is downloading. ×
0
Interactive Music II
Processingによるアニメーション
東京藝術大学芸術情報センター (AMC)
2013年12月26日
田所 淳
先週の復習
最終課題に向けての方針
‣ 前回解説したOSCを活用して、SuperColliderでサウンドを、
Processingでビジュアルを表現します

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

‣ Processingでアニメーションを実現するには
‣ 現在のプログラムをより構造化していく必要がある
アニメーション
‣ setup()とupdate()という二つのパートに構造化してアニメーショ
ンを実現
!

‣ setup() - 初期設定:
‣ プログラムの起動時に一度だけ実行
‣ 画面の基本設定やフレームレートなどを設定します。
!
...
アニメーション
‣ setup()とupdate() のイメージ
アニメーション
‣ この仕組みを利用して、円が斜め下に移動するプログラムを作成
float posX, posY; //円の中心位置を格納する変数
float speedX, speedY; //円の速度を格納する変数
void setup()...
アニメーション
‣ 円が等速度で移動する
条件分岐
条件分岐
‣ 先週のプログラムを改良
‣ 画面の端にきたらバウンドする動きを加える
!

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

‣ 画面の右端、もしくは画面の左端 → X方向のスピードを反転
‣ 画面の上端、もしくは画面...
条件分岐
‣ 「もし○○○なら、×××しなさい」→ 条件分岐
‣ 「if文」を使用する
if(《条件式》){
《真文》
} else {
《偽文》
}
条件分岐
‣ 条件分岐を適用
‣ 画面の端にきたら、X方向もしくはY方向のスピードを反転
条件分岐
‣ if文で画面の端でバウンドさせる
float posX, posY; //円の中心位置を格納する変数
float speedX, speedY; //円の速度を格納する変数

!

void setup() {
size(640,...
条件分岐
‣ if文で画面の端でバウンドさせる
void draw() {
background(15); //背景を描画
ellipse(posX, posY, 20, 20); //指定した位置に円を描画
posX = posX + spe...
条件分岐
‣ 画面の端でバウンドする動きに!
ベクトル(向きと大きさ)で動きを再定義
ベクトル(向きと大きさ)で動きを再定義
‣ ここまでの動きの定義の方法
‣ あまり洗練されたやり方ではなかった
!

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

‣ それぞれのパラメーターで、常に(x,...
ベクトル(向きと大きさ)で動きを再定義
‣ ベクトル (vector)
‣ 幾何学的空間における、大きさと向きを持った量
‣ 例: 速度、加速度、力など
‣ 平面上や空間内の矢印としてイメージ
ベクトル(向きと大きさ)で動きを再定義
‣ 原点(0,0)から(2,3)の座標までのベクトル
ベクトル(向きと大きさ)で動きを再定義
‣ Processingでは、ベクトルを定義するのに適した「PVector」
というクラス(属性と動作の型)が用意されている
‣ 2次元平面でのアニメーション
‣ PVectorクラスを用いることでとても...
ベクトル(向きと大きさ)で動きを再定義
PVector location; //位置のベクトル
PVector velocity; //速度のベクトル

!

void setup() {
size(640, 480); //640x480pi...
ベクトル(向きと大きさ)で動きを再定義
void draw() {
background(15); //背景を描画
ellipse(location.x, location.y, 20, 20); //指定した位置に円を描画
location....
たくさんの図形を同時に動かす
たくさんの図形を同時に動かす
‣ たくさんの図形を同時に動かすには?
!

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

‣ こうした際には、配列を使うと良い
たくさんの図形を同時に動かす
‣ 配列 - データのロッカーのようなイメージ
‣ 例: float[] data = new float[5];
たくさんの図形を同時に動かす
‣ 位置(location)、速度(velocity)をそれぞれ配列に変更
‣ 沢山の位置と速度を扱えるようにしてみる
たくさんの図形を同時に動かす
‣ 配列の使用
int NUM = 100; //配列の数
//位置のベクトルの配列
PVector[] location = new PVector[NUM];
//速度のベクトルの配列
PVector[] ve...
たくさんの図形を同時に動かす
‣ 配列の使用
void draw() {
background(15); //背景を描画
for (int i = 0; i < NUM; i++) { //配列の数だけ繰り返し
//指定した位置に円を描画
el...
たくさんの図形を同時に動かす
‣ 100個の円が、同時に動く
たくさんの図形を同時に動かす
‣ さらにプログラムを工夫して、色と大きさもランダムに
int NUM = 500; //配列の数
//位置のベクトルの配列
PVector[] location = new PVector[NUM];
//速度の...
たくさんの図形を同時に動かす
‣ さらにプログラムを工夫して、色と大きさもランダムに
void draw() {
background(15); //背景を描画
//配列の数だけ繰り返し
for (int i = 0; i < NUM; i++...
たくさんの図形を同時に動かす
‣ 完成!
Upcoming SlideShare
Loading in...5
×

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

2,213

Published on

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,213
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
14
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

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

  1. 1. Interactive Music II Processingによるアニメーション 東京藝術大学芸術情報センター (AMC) 2013年12月26日 田所 淳
  2. 2. 先週の復習
  3. 3. 最終課題に向けての方針 ‣ 前回解説したOSCを活用して、SuperColliderでサウンドを、 Processingでビジュアルを表現します OSC
  4. 4. アニメーション ‣ アニメーションをつくるには、すこしづつ変化する画像を、一 定間隔で入れ替える必要がある ‣ パラパラ漫画 ! ‣ Processingでアニメーションを実現するには ‣ 現在のプログラムをより構造化していく必要がある
  5. 5. アニメーション ‣ setup()とupdate()という二つのパートに構造化してアニメーショ ンを実現 ! ‣ setup() - 初期設定: ‣ プログラムの起動時に一度だけ実行 ‣ 画面の基本設定やフレームレートなどを設定します。 ! ‣ draw() - 描画: ‣ 設定した速さ(フレームレート)でプログラムが終了するまでく りかえし実行されます。
  6. 6. アニメーション ‣ setup()とupdate() のイメージ
  7. 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. 8. アニメーション ‣ 円が等速度で移動する
  9. 9. 条件分岐
  10. 10. 条件分岐 ‣ 先週のプログラムを改良 ‣ 画面の端にきたらバウンドする動きを加える ! ‣ この動きを実現するには以下の条件を設定する必要あり ! ‣ 画面の右端、もしくは画面の左端 → X方向のスピードを反転 ‣ 画面の上端、もしくは画面の下端 → Y方向のスピードを反転
  11. 11. 条件分岐 ‣ 「もし○○○なら、×××しなさい」→ 条件分岐 ‣ 「if文」を使用する if(《条件式》){ 《真文》 } else { 《偽文》 }
  12. 12. 条件分岐 ‣ 条件分岐を適用 ‣ 画面の端にきたら、X方向もしくはY方向のスピードを反転
  13. 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. 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. 15. 条件分岐 ‣ 画面の端でバウンドする動きに!
  16. 16. ベクトル(向きと大きさ)で動きを再定義
  17. 17. ベクトル(向きと大きさ)で動きを再定義 ‣ ここまでの動きの定義の方法 ‣ あまり洗練されたやり方ではなかった ! ‣ 位置: posX と posY ‣ 速度: speedX と speedY ! ‣ それぞれのパラメーターで、常に(x, y)という2つの変数 ‣ もっと整理して定義できないだろうか? ! ‣ → 「ベクトル」という概念の導入
  18. 18. ベクトル(向きと大きさ)で動きを再定義 ‣ ベクトル (vector) ‣ 幾何学的空間における、大きさと向きを持った量 ‣ 例: 速度、加速度、力など ‣ 平面上や空間内の矢印としてイメージ
  19. 19. ベクトル(向きと大きさ)で動きを再定義 ‣ 原点(0,0)から(2,3)の座標までのベクトル
  20. 20. ベクトル(向きと大きさ)で動きを再定義 ‣ Processingでは、ベクトルを定義するのに適した「PVector」 というクラス(属性と動作の型)が用意されている ‣ 2次元平面でのアニメーション ‣ PVectorクラスを用いることでとても簡単に整理される ! ‣ 画面の端でバウンドするアニメーションを、PVectorを使用し て書き直してみる
  21. 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. 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. 23. たくさんの図形を同時に動かす
  24. 24. たくさんの図形を同時に動かす ‣ たくさんの図形を同時に動かすには? ! ‣ 図形の数だけ同じコードを書く? ‣ 動かす図形が、100個、1000個と増えるにつれ破綻する ! ‣ こうした際には、配列を使うと良い
  25. 25. たくさんの図形を同時に動かす ‣ 配列 - データのロッカーのようなイメージ ‣ 例: float[] data = new float[5];
  26. 26. たくさんの図形を同時に動かす ‣ 位置(location)、速度(velocity)をそれぞれ配列に変更 ‣ 沢山の位置と速度を扱えるようにしてみる
  27. 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. 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. 29. たくさんの図形を同時に動かす ‣ 100個の円が、同時に動く
  30. 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. 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. 32. たくさんの図形を同時に動かす ‣ 完成!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×