SFC – デザインとプログラミング 2022
動きを生みだす – アニメーションとベクトル
今回からいよいよ動きのある表現（= アニメーション）について扱っていきます。アニメーションを実現するには、まず時間を扱う基本構造を知る必要があります。p5.jsでは、setup(), draw() という2つのブロックにわけて、初期化と更新を行うことでアニメーションを実現しています。まず始めはこの基本構造について理解します。次に、これから動きを扱う際に、向きと大きさをもった「ベクトル」という概念を理解します。ベクトルを理解することで、位置や運動を整理して記述することが可能となります。最後に、この基本構造をベクトルを活用して簡単なアニメーションを作成します。
映像資料
スライド資料
ランキング
- 1位 3rd sketch 33票
- 2位 悪夢 17票
- 2位 白と黒 17票
- 4位 My Sketch_03 16票
- 5位 physics 13票
本日の課題
本日の最終のコードを改造してプログラムにランダムな要素を追加してください
- 例:
- 円の色をランダムな色に
- 円の大きさをランダムに
- (応用) 円の動きをランダムに
- 作品は、OpenProcessingに投稿
- 完成した作品に、タイトルをつける
- 投稿したURLをアンケートから提出
- 投稿の際に sfc221028 のタグをつけてください!
- 締切: 2022年11月2日(水) 23:59まで!
- 今回も、前回の提出作品の人気投票を行います!
- 前回のタグ sfc221021 でOpenProcessingで検索 (検索方法をSketches that are tagged にする必用あり)
- 一番良いと思った作品に1票投票 (自信があれば自分の作品でも可)