![たくさんの図形を同时に动かす
? 配列 - データのロッカーのようなイメージ
? 例: ?oat[] data = new ?oat[5];](https://image.slidesharecdn.com/geidaimusic131226-131224212212-phpapp01/85/Interactive-Music-II-Processing-25-320.jpg)
![たくさんの図形を同时に动かす
? 配列の使用
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));
}
}](https://image.slidesharecdn.com/geidaimusic131226-131224212212-phpapp01/85/Interactive-Music-II-Processing-27-320.jpg)
![たくさんの図形を同时に动かす
? 配列の使用
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方向のスピードを反転
}
}
}](https://image.slidesharecdn.com/geidaimusic131226-131224212212-phpapp01/85/Interactive-Music-II-Processing-28-320.jpg)
![たくさんの図形を同时に动かす
? さらにプログラムを工夫して、色と大きさもランダムに
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);
}
}](https://image.slidesharecdn.com/geidaimusic131226-131224212212-phpapp01/85/Interactive-Music-II-Processing-30-320.jpg)
![たくさんの図形を同时に动かす
? さらにプログラムを工夫して、色と大きさもランダムに
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方向のスピードを反転
}
}
}](https://image.slidesharecdn.com/geidaimusic131226-131224212212-phpapp01/85/Interactive-Music-II-Processing-31-320.jpg)
Interactive Music II Processingによるアニメーション
- 1. Interactive Music II Processingによるアニメーション 東京藝術大学芸術情報センター (AMC) 2013年12月26日 田所 淳
- 2. 先週の復习
- 4. アニメーション ? アニメーションをつくるには、すこしづつ変化する画像を、一 定間隔で入れ替える必要がある ? パラパラ漫画 ! ? Processingでアニメーションを実現するには ? 現在のプログラムをより構造化していく必要がある
- 5. アニメーション ? setup()とupdate()という二つのパートに構造化してアニメーショ ンを実現 ! ? setup() - 初期設定: ? プログラムの起動時に一度だけ実行 ? 画面の基本設定やフレームレートなどを設定します。 ! ? draw() - 描画: ? 設定した速さ(フレームレート)でプログラムが終了するまでく りかえし実行されます。
- 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座標を更新 }
- 9. 条件分岐
- 10. 条件分岐 ? 先週のプログラムを改良 ? 画面の端にきたらバウンドする動きを加える ! ? この動きを実現するには以下の条件を設定する必要あり ! ? 画面の右端、もしくは画面の左端 → X方向のスピードを反転 ? 画面の上端、もしくは画面の下端 → Y方向のスピードを反転
- 11. 条件分岐 ? 「もし○○○なら、×××しなさい」→ 条件分岐 ? 「if文」を使用する if(《条件式》){ 《真文》 } else { 《偽文》 }
- 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方向のスピードを反転 } }
- 17. ベクトル(向きと大きさ)で动きを再定义 ? ここまでの動きの定義の方法 ? あまり洗練されたやり方ではなかった ! ? 位置: posX と posY ? 速度: speedX と speedY ! ? それぞれのパラメーターで、常に(x, y)という2つの変数 ? もっと整理して定義できないだろうか? ! ? → 「ベクトル」という概念の導入
- 18. ベクトル(向きと大きさ)で动きを再定义 ? ベクトル (vector) ? 幾何学的空間における、大きさと向きを持った量 ? 例: 速度、加速度、力など ? 平面上や空間内の矢印としてイメージ
- 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. たくさんの図形を同时に动かす ? 配列 - データのロッカーのようなイメージ ? 例: ?oat[] data = new ?oat[5];
- 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方向のスピードを反転 } } }
- 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方向のスピードを反転 } } }