yoppa.org


SFC – デザインとプログラミング 2024

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

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

映像資料

スライド資料

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

本日の課題!!

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

例:

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

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

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

アンケートフォーム (11/08)

前回(11/1)のアンケートフォームはこちら。

アンケートフォーム (11/01)