前回は、p5.jsでアニメーションを行うための基本を解説しました。A地点からB地点までどのくらいの刻み幅で移動するかによって映像のテンポが変化して、様々な表情が生まれることを学びました。アニメーションの表現にはさらに重要な要素があります。加速 (Acceleration) と減速 (Deceleration) です。加速と減速の要素を効果的に使用することで、動きに様々なキャラクターが生まれます。

加速と減速の表現はp5.js単体でも可能ですが、GSAPライブラリー (GreenSock Animation Platform) を使用することで、より簡単にさらに多様な表現を実現可能です。

今回はGSAPライブラリーの導入と、GSAP + p5.jsを組み合せた様々な実例を紹介していきます。

スライド資料

• 加速と減速 – イージングによるアニメーション

本日の課題

GSAPライブラリーとp5.jsでアニメーションを作成してみよう!

• 様々なイージング関数と、動き (位置、色、大きさ、角度など) を組み合わせてみる
• もし可能なら、簡単なインタラクションも付加 (マウスクリックなど)
• OpenProcessingに提出。本日のタグは  mit210703 。

サンプルコード

p5.jsでイージング

GSAPテンプレート

GSAPで、位置と大きさ色を変化

GSAP、インタラクション基本