yoppa.org


immediate bitwave

前橋工科大学 - デザイン演習 I 2021

座標とベクトルによるアニメーション

Animated Motion: Part 1, Norman McLaren & Grant Munro, 1976

コードを用いたアニメーションについて考えていく第一回目として、今回は座標とベクトル (Vector) を用いたアニメーションについて解説していきます。まず、Norman McLarenによるアニメーションのチュートリアルを視聴した後で、A地点からB地点までなめらかに直線運動する動きをp5.jsで記述する方法を、様々な手法を用いて解説していきます。解説は以下の手順でステップバイステップで進めていきます。

  • Step 1 : 座標の更新
  • Step 2 : ベクトル (p5.Vector) を使う
  • Step 3 : 線形補完 (Linear interpolation, lerp) を使う
  • Step 4 : 座標以外の要素もアニメーションさせる – 大きさ
  • Step 5 : 座標以外の要素もアニメーションさせる – 色
  • Step 6 : パラメータをオブジェクトにまとめる

スライド資料

実習 : アニメーションを試してみる!

サンプルプログラムを参考にして、アニメーションを試してみる!

  • 基本 : A地点からB地点までの動きに適用
  • 応用 : amountの値を様々な属性にあてはめてみる
    • 大きさ、色、角度 など
  • OpenProcessingに投稿してURLを提出
  • 保存する際に mit210626 のタグをつける!
  • 質問があれば、適宜受け付けていきます!

参考: 角度と色と大きさの変化 https://openprocessing.org/sketch/1224911

サンプルコード

Step 0 : 指定した分割数で、0.0〜1.0までカウントアップ

Step 1 : 座標の更新

Step 2 : ベクトル (p5.Vector) を使う

Step 3 : 線形補完 (Linear interpolation, lerp) を使う

Step 4 : 座標以外の要素もアニメーションさせる – 大きさ

Step 5 : 座標以外の要素もアニメーションさせる – 色

Step 6 : パラメータをオブジェクトにまとめる