今回は、より複雑なアニメーションに挑戦します。たくさんの図形を、一定の手続き（= アルゴリズム）にそって動かしてみます。動きのアルゴリズムはいろいろありますが、今回はその一例として、三角関数（sin, cos , tan）を使用した動きをとりあげます。三角関数の定義は、直角三角形の角度とそれを取り囲む辺の比率で定義されます。しかし、同時に円運動を座標に変換する仕組みとしても活用可能です。この仕組みを応用してアニメーションするとどうなるか、三角関数を用いたアニメーションで美しいパターン「ビジュアルハーモニー」を生成する手法を紹介します。

スライド資料

• 第5回: ビジュアルハーモニー (アルゴリズム、三角関数)

サンプルプログラム

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

課題

課題: 「ビジュアルハーモニー」を表現する

• sin関数による動きで、オリジナルの「ビジュアルハーモニー」を表現してみる
  • 周波数を変化させてみる
  • 動かす形を変えてみる
  • 色を変化させてみる
  • 3Dで表現してみる (上級編)
  • …etc.

サンプルコード: 以下のサンプルが課題のベースになります。

int NUM = 256;
PVector[] location = new PVector[NUM];
float phase, velocity, radius;

void setup() {
  size(800, 800, P3D);
  frameRate(60);
  background(0);
  noFill();
  phase = 0.0;
  velocity = 2.0;
  radius = height / 4.0;
  for (int i = 0; i < NUM; i++) {
    location[i] = new PVector(0, 0);
  }
}

void draw() {
  background(0);
  translate(width / 2.0, height / 2.0);
  for (int i = 0; i < NUM; i++) {
    location[i].x = cos(radians(phase) / NUM * (i+1)) * radius;
    location[i].y = sin(radians(phase) / NUM * (i+1)) * radius;
    stroke(0, 127, 255);
    float diameter = i * (height / 2) / float(NUM);
    ellipse(location[i].x, location[i].y, diameter, diameter);
  }
  phase += velocity;
}

課題の提出方法

• emailで提出
  • To : tadokoro+teu17@gmail.com
  • Subject: 課題3
  • 作成したプログラムの実行結果をスクリーンキャプチャーしてメールに添付
  • 本文に以下の内容を記入して提出
  • 学籍番号
  • 氏名
  • 締切: 次回の講義開始時間 (5月29日 16:45) まで