コードを用いたアニメーションについて考えていく第一回目として、今回は座標とベクトル (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 : パラメータをオブジェクトにまとめる