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

スライド資料

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

ランキング (2024)

• 1位: 見つけた
• 2位: ばいばいん
• 3位: アニマル・ウォー
• 3位: fireworks – ish
• 5位: radius.48
• 5位: Cult of the Party Parrot

サンプルコード (課題のヒント)

• ベクトルによるアニメーション
• 複数の物体を同時に動かす (ベクトルの配列)
• バウンドすると色が変化
• バウンドするとサイズが変化
• バウンドするとサイズ拡大
• 超応用! – 円の中でバウンド

本日の課題!!

本日の最終のコードを改造してランダムな要素を追加してください。

例:

• 円の色をランダムな色に
• 円の大きさをランダムに
• (応用)円の動きをランダムに
• …etc.

作品は、OpenProcessingに投稿した上でアンケートフォームから提出してください。

• 完成した作品に、タイトルをつける
• 投稿したURLをアンケートから提出
• 投稿の際にsfc251024のタグをつけてください!
• 締切: 来週木曜日23:59まで!

アンケートフォーム