芸大 – メディアアート・プログラミング I 2020
第5回: 動きを生みだす – アニメーションとベクトル
今回からいよいよ動きのある表現（= アニメーション）について扱っていきます。アニメーションを実現するには、まず時間を扱う基本構造を知る必要があります。p5.jsでは、setup(), draw() という2つのブロックにわけて、初期化と更新を行うことでアニメーションを実現しています。まず始めはこの基本構造について理解します。次に、これから動きを扱う際に、向きと大きさをもった「ベクトル」という概念を理解します。ベクトルを理解することで、位置や運動を整理して記述することが可能となります。最後に、この基本構造をベクトルを活用して簡単なアニメーションを作成します。
映像資料
スライド資料、サンプルプログラム
本日の課題
本日の課題「たくさんの物体の動きを表現する」
本日解説した内容を踏まえて、たくさんの物体の動きを表現してください。
- アニメーションの原理 setup()とdraw()
- ベクトル
- 条件分岐(if)
- 配列
作成した作品は、OpenProcessingに投稿してURLをオンラインフォームから提出してください。