yoppa.org


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

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

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

最終課題

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

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

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

先週のプログラムの復習

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

sketch.js

animations.js

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

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

sketch.js

animation.js

直線的な動き

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

animation.js

動きの起点をランダムに

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

関数を利用した動き

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

sketch.js

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

拡大・縮小・変形

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

拡大

animation.js

縮小

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

実習

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

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

制作テンプレート