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

映像資料

スライド資料

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

人気ランキング

• 1位: 揚げ物 15票
• 2位: Ai no Meiro 14票
• 3位: Random Ping-Pong 9票
• 4位: 成長の速い金魚 6票
• 4位: Rhythm 6票
• 4位: 忘れ物 6票

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

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

本日の課題

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

• 例:
  • 円の色をランダムな色に
  • 円の大きさをランダムに
  • (応用) 円の動きをランダムに

• 作品は、OpenProcessingに投稿
• 完成した作品に、タイトルをつける
• 投稿したURLをアンケートから提出
• 投稿の際に sfc231103 のタグをつけてください!
• 締切: 2022年11月15日(水) 23:59まで!

アンケートフォーム (11/10の回) 今回の課題提出用

課題の出題まで辿りつかなかった前回分 (11/3) のフォームはこちら。10/27の作品の人気投票はこちらのフォームから。

アンケートフォーム (11/3の回) 前々回の人気投票

• 今回も、前回の提出作品の人気投票を行います!
• 前回のタグ sfc231027 でOpenProcessingで検索 (検索方法をSketches that are tagged にする必用あり)
• 一番良いと思った作品に1票投票 (自信があれば自分の作品でも可)