多摩美 - サウンド&ネット 2014年度

第6回: Web応用3 – 最終課題「インタラクティブ・サウンド・アニメーション」に向けて

October 14, 2014

今回は、最終課題に向けて、具体的なサンプルをいろいろ紹介していきます。

最終課題

最終課題のテーマ :「インタラクティブ・サウンド・アニメーション」

金曜日のサウンドの授業で作成した音を使用して、Webブラウザ上でインタラクティブなアニメーション作品を制作し発表する。

音響素材 : サウンド（矢坂先生）
プログラミング : ネット（田所）
この2つの要素を融合する
インタラクションは、キーボード操作を基本とするが、それ以外のインタラクション（マウス、Webカメラ、センサー?）を使うのは自由
授業では、p5.jsを使用して解説するが、それ以外のJavascriptのライブラリ、その他の言語を使用しても良い
ただし作品はWebブラウザで発表できるものに限定

先週のプログラムの復習

先週作成した、キー入力によって、アニメーションと音を再生するサンプルについて、再度復習します。

sketch.js

var sample = [];
var animation;
var num;

function setup() {
  createCanvas(windowWidth, windowHeight);
  sample[0] = loadSound('assets/se01.wav');
  sample[1] = loadSound('assets/se02.wav');
  sample[2] = loadSound('assets/se03.wav');
  sample[3] = loadSound('assets/se04.wav');
}

function draw() {
  background(0);
  if(animation){
    animation.draw();
  }
}

function keyTyped() {
  if (key == 'a') {
    sample[0].play();
    animation = new Anim_a();
  }
  if (key == 's') {
    sample[1].play();
    animation = new Anim_s();
  }
  if (key == 'd') {
    sample[2].play();
    animation = new Anim_d();
  }
  if (key == 'f') {
    sample[3].play();
    animation = new Anim_f();
  }
}

animations.js

// ------------------------------------------------------
// Animation A
function Anim_a() {
  this.x = width / 2;
  this.y = height / 2;
  this.diameter = 0;
  this.speed = 10;
}

Anim_a.prototype.draw = function() {
  noStroke();
  fill(0, 127, 255);
  ellipse(this.x, this.y, this.diameter, this.diameter);
  this.diameter += this.speed;
};

// ------------------------------------------------------
// Animation S
function Anim_s() {
  this.width = 0;
  this.speed = 80;
}

Anim_s.prototype.draw = function() {
  noStroke();
  fill(255, 0, 0);
  rectMode(CORNER);
  rect(0, 0, this.width, height);
  this.width += this.speed;
};

// ------------------------------------------------------
// Animation D
function Anim_d() {
  this.rotate = 0;
  this.size = 0;
  this.speed = 50;
}

Anim_d.prototype.draw = function() {
  push();
  fill(255, 255, 0);
  noStroke();
  translate(width / 2, height / 2);
  rotate(radians(this.rotate));
  rectMode(CENTER);
  rect(0, 0, this.size, this.size);
  pop();
  this.rotate += this.speed;
  this.size += this.speed;
};

// ------------------------------------------------------
// Animation F
function Anim_f() {
  this.bgColor = 255;
  this.speed = -2;
}

Anim_f.prototype.draw = function() {
  noStroke();
  fill(this.bgColor);
  rect(0, 0, width, height);
  this.bgColor += this.speed;
};

アニメーションのためのコードサンプル

最終課題に向けて、プログラミングでアニメーションを表現するサンプルをいろいろ紹介します。これ以降のサンプルは、以下のテンプレートをもとに発展させていきます。

sketch.js

var sample = [];
var animation;
var num;

function setup() {
  createCanvas(windowWidth, windowHeight);
  sample[0] = loadSound('assets/se01.wav');
}

function draw() {
  background(0);
  if(animation){
    animation.draw();
  }
}

function keyTyped() {
  if (key == 'a') {
    sample[0].play();
    animation = new Anim_a();
  }
}

animation.js

function Anim_a() {
  //初期設定
}

Anim_a.prototype.draw = function() {
  //アニメーションの描画
};

直線的な動き

動きをつくるには、図形の位置をすこしずつ変化させます。

animation.js

function Anim_a() {
  //初期設定
  this.x = 10;
  this.y = height/2.0;
}

Anim_a.prototype.draw = function() {
  //アニメーションの描画
  this.x += 20;
  fill(31, 127, 255);  
  ellipse(this.x, this.y, 40, 40);
};

動きの起点をランダムに

初期設定の歳にrandom()関数を利用して、初期位置を毎回異なる場所にすることが可能です。

function Anim_a() {
  //初期設定
  this.x = 10;
  this.y = random(height);
}

Anim_a.prototype.draw = function() {
  //アニメーションの描画
  this.x += 20;
  fill(31, 127, 255);  
  ellipse(this.x, this.y, 40, 40);
};

関数を利用した動き

様々な数学的な関数を使用して、動きを生みだす方法があります。例えば、三角関数のsin()を使用して波のような動きを作ることが可能です。

sketch.js

function Anim_a() {
  //初期設定
  this.x = 10;
  this.y = height/2;
  this.count = 0;
}

Anim_a.prototype.draw = function() {
  //アニメーションの描画
  this.x += 20;
  this.y = sin(this.count / 5.0) * height/4 + height/2;
  fill(31, 127, 255);  
  ellipse(this.x, this.y, 40, 40);
  this.count++;
};

x座標とy座標、それぞれcos()関数とsin()関数にすると、円を描きます。

function Anim_a() {
  //初期設定
  this.x = 10;
  this.y = height/2;
  this.count = 0;
}

Anim_a.prototype.draw = function() {
  //アニメーションの描画
  this.x = cos(this.count / 4.0) * height/3 + width/2;
  this.y = sin(this.count / 4.0) * height/3 + height/2;
  fill(31, 127, 255);
  ellipse(this.x, this.y, 40, 40);
  this.count++;
};

拡大・縮小・変形

形を生成する関数の大きさに関するパラメータを操作することで、拡大、縮小、変形などの動きが生みだせます。

拡大

animation.js

function Anim_a() {
  //初期設定
  this.x = width/2;
  this.y = height/2;
  this.size = 0;
  rectMode(CENTER);
}

Anim_a.prototype.draw = function() {
  //アニメーションの描画
  fill(31, 127, 255);
  rect(this.x, this.y, this.size, this.size);
  this.size += 20;
};

縮小

function Anim_a() {
  //初期設定
  this.x = width/2;
  this.y = height/2;
  this.size = width;
  rectMode(CENTER);
}

Anim_a.prototype.draw = function() {
  //アニメーションの描画
  fill(31, 127, 255);
  rect(this.x, this.y, this.size, this.size);
  this.size /= 1.2;
};

色

色の値を徐々に変化させていくことも可能です。

function Anim_a() {
  //初期設定
  this.r = 0;
  this.g = 0;
  this.b = 255;
  rectMode(CORNER);
}

Anim_a.prototype.draw = function() {
  //アニメーションの描画
  fill(this.r, this.g, this.b);
  rect(0, 0, width, height);
  this.r = (this.r + 2) % 255;
  this.b = (this.b - 2) % 255;
};

実習

後半は、最終課題に向けて実習とします。様々な動きを試しながら、ばりばりと制作しましょう!

制作には以下の制作テンプレートを活用してください!!