yoppa.org


メディア芸術の基礎 2017 – 東京工科大学

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

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

スライド資料

サンプルプログラム

課題

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

  • 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) まで