今回からいよいよ動きのある表現（= アニメーション）について扱っていきます。アニメーションを実現するには、まず時間を扱う基本構造を知る必要があります。Processingでは、setup(), draw() という2つのブロックにわけて、初期化と更新を行うことでアニメーションを実現しています。まず始めはこの基本構造について理解します。次に、これから動きを扱う際に、向きと大きさをもった「ベクトル」という概念を理解します。ベクトルを理解することで、位置や運動を整理して記述することが可能となります。最後に、この基本構造をベクトルを活用して簡単なアニメーションを作成します。

スライド資料

• 第4回: アニメーション基礎 (ベクトル、運動方程式)

サンプルプログラム

本日とりあげたサンプルプログラムは以下からダウンロードしてください。

• サンプルプログラム5月15日

課題

今日とりあげた最後のサンプルを元に、以下のスケッチを作成してください。

• それぞれの円の色をランダムに
• それぞれの円の大きさをランダムに

以下のサンプルがベースになります。

int NUM = 100;
PVector[] location = new PVector[NUM];
PVector[] velocity = new PVector[NUM];

void setup() {
  size(800, 600);
  frameRate(60);
  noStroke();
  fill(0, 127, 255);
  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;
    }
    if ((location[i].y > height) || (location[i].y < 0)) {
      velocity[i].y *= -1;
    }
  }
}

課題の提出方法

• emailで提出
  • To: tadokoro+teu17@gmail.com
  • Subject: 課題2
• 本文に以下の内容を記入して提出
  • 学籍番号
  • 氏名
  • 作成したソースコード (.pde) を本文にコピー&ペースト
• 締切: 次回の講義開始時間 (5月22日 16:45) まで