形状モーフShape Morph

丸・三角・四角などの輪郭を同じ数の点で表し、点どうしを補間して形を滑らかに変形させ続けるループアニメーションです。

Canvas 2D で、図形を 1 つずつ計算して描いています。初期設定で再生しています。

丸・三角・四角・星などが滑らかに変形し続ける。残像を重ねるとトンネル状になる

パラメータ、色、エフェクトを変えて、GIF・APNG・WebP・MP4・WebM で書き出せます。

どう計算しているか

各図形の輪郭を、周の長さに沿って等間隔に 192 個の点でサンプリングします。始点はどの図形も真上（-90°）に最も近い点にそろえるので、対応する点どうしが大きくねじれません。
「形 1」〜「形 4」で選んだ図形を順番に並べ、時間に応じて今どの2つの間にいるかを決めます。2つの図形の同じ番号の点を、イージングをかけた割合で直線補間（a + (b − a)·f）して中間の形を作ります。
変形と同時に、形全体を回転行列（cos と sin で点を回す計算）で回します。回転角は「回転」の値と、形の列をどこまで進んだかに比例します。
「残像の数」だけ形を少しずつ小さく重ね、それぞれ「残像の時間差」だけ過去の時刻で描きます。少し前の形が内側に残るので、トンネルのような奥行きが生まれます。
「配置」をグリッドにすると同じ図形を格子に並べ、中心からの距離などで開始時刻をずらして波のように変形させます。

P(u) = lerp(A_i, A_{i+1}, ease(f)),  rot = spin·2π·(i + f)/L

形の列は最後の図形から最初の図形へ戻る輪になっていて、時刻は fract で巻き戻します。回転は1ループでちょうど「回転」の整数周ぶん進むので、向きも元に戻ります。

残像の数	1 〜 32（初期値 12）
残像の時間差	0 〜 0.2（初期値 0.03）
回転	-3 〜 3（初期値 1）
位相のずれ方	同時・放射・角度・渦巻き・斜め・横・縦・市松・ランダム
ずれ量	0 〜 4（初期値 0.5）
イージング	linear・sine・quad・cubic・quint・expo・back・elastic