More Related Content
Similar to Interactive Music II Processingによるアニメーション
Similar to Interactive Music II Processingによるアニメーション (20)
More from Atsushi Tadokoro
More from Atsushi Tadokoro (13)
Interactive Music II Processingによるアニメーション
- 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座標を更新
}
- 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方向のスピードを反転
}
}
- 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方向のスピードを反転
}
}
- 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方向のスピードを反転
}
}
}