成果物
#1
www.youtube.com
今回は、一度に全て変形させるパターンと、端から順番に変形させていくパターンを試してみました。
#2
www.youtube.com
全ての頂点を一度に変形させるとこのようになります。
#3
www.youtube.com
頂点を丸くしていくような変形です。
#4
www.youtube.com
ベジエ曲線を使った補間です。
仕組み
#1/2
変形前と変形後の座標を登録して、前回のEasingを使って滑らかに補完しています。各頂点のオフセットの計算方法は少し複雑でabs(x%2-1)とすることで0～1の間を変化するようにしています。細かい部分は実際のコードをご覧ください。
nekodigi.hatenablog.com
また、多角形上の辺をサンプリングするためのプログラムはforループとif文とlerp関数を組み合わせて実装しています。
#3
この動画からインスピレーションを得ました。他にもたくさんの補間のアイデア掲載されているのでぜひご覧ください。
www.youtube.com
私は、円の頂点を分配して、多角形の頂点に割り当てることで実装しています。ぜひコードをご覧ください。
#4
こちらのサイトを参考に、ベジエ曲線で円を近似して、制御点の長さを変えることでアニメーションしています。
式はこんな感じです。リテラルをFloat型にしないとうまく計算できません、結構はまりました…
(4.0/3.0)*tan(pi/2.0*n)
geometry - How to create circle with Bézier curves? - Stack Overflow
コード
今回の作品はMorphという名前で追加しています。矢印キーやtキーでモードが切り替わります。github.com
今回は、新たに作った多角形の辺上の点をサンプリングするコードはPolygon_Samplingという名前です。
