今回からいよいよp5.jsを用いた動きのある表現（= アニメーション）について扱っていきます。アニメーションを実現するには、まず時間を扱う基本構造を知る必要があります。p5.jsでは、setup(), draw() という2つのブロックにわけて、初期化と更新を行うことでアニメーションを実現しています。まず始めはこの基本構造について理解します。次に、これから動きを扱う際に、向きと大きさをもった「ベクトル」という概念を理解します。ベクトルを理解することで、位置や運動を整理して記述することが可能となります。最後に、この基本構造をベクトルを活用して簡単なアニメーションを作成します。

参考リンク

• Refik Anadol
• OUCHHH

スライド資料、サンプルプログラム

• 動きを生みだす – アニメーションとベクトル

サンプルプログラム

• アニメーション基本 (本日のスタートポイント)
• 画面の端でバウンドさせる
• 位置と速度をベクトルで表現
• 位置と速度をベクトルで表現 + バウンド
• 同時に複数の物体を動かす
• 大きさと色もランダムに! (完成!!)

アンケート

本日の授業を受講した方は以下のアンケートに回答してください。

5月22日

• アンケート