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

スライド資料

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

サンプルプログラム

最後の実習の際は、以下のプログラムを参考にしてください。

応用例 : マウスインタラクション

本日の課題

• スライド資料を読んで本日の内容を学ぶ
• サンプルプログラムを改造してアニメーションを用いたp5.jsのプログラムを作成してOpenProcessingにアップロード
• 下記のアンケートから提出

課題提出アンケート

• アンケート