入れ子の回転Twist Stack

どう計算しているか

1. 「重ねる数」だけ正多角形を用意し、外側から内側へ半径を一定の割合で小さくしながら同じ中心に重ねます。
2. 「交互に塗る」では前景色と背景色を交互に使って塗り重ねるので、縞模様の入れ子になります。「線」を選ぶと輪郭だけを描きます。
3. 各多角形は、イージングをかけた進み具合に「1辺ぶんの対称角 2π/辺の数」と「回転ステップ」を掛けた角度だけ回ります。
4. 「内側の遅れ」によって内側の多角形ほど開始が遅れるので、回転途中では層ごとの角度差が積み重なり、渦巻きのようなねじれが見えます。

e_k = ease(fract(t − k·lag)),  θ_k = e_k·turns·2π/n

ループがつながる理由

正多角形は 2π/辺の数 だけ回すと元の形とぴったり重なります。各層はこの角度の整数倍だけ回って止まり、時間差も fract で 0〜1 に巻き戻すので、最後のコマは最初と同じ絵になります。

調整できるパラメータ

形

動き

同じ分類のシーン（放射・回転）

• 放射・回転対称Polar Rings同心円上に並んだ図形がリングごとに少しずつ遅れて回り、渦や花のような模様が浮かんでは消えるループアニメーションです。
• 形状モーフShape Morph丸・三角・四角などの輪郭を同じ数の点で表し、点どうしを補間して形を滑らかに変形させ続けるループアニメーションです。
• 万華鏡Kaleidoscope扇形の中で図形を動かし、それを回転と鏡写しで円周に並べることで、万華鏡のような対称模様を作るループアニメーションです。
• 葉序・螺旋Phyllotaxis黄金角ずつ角度をずらして点を並べ、ひまわりの種のような螺旋模様が中心から湧き出して外へ流れ続けるループアニメーションです。
• 無限ズームInfinite Zoom多角形の辺上の点を結んで一回り小さい多角形を作る操作を繰り返し、その入れ子の渦へ無限に吸い込まれていくループアニメーションです。
• 遠近トンネルPerspective Tunnel遠くから迫ってくるリングの列を遠近法で描き、うねる軸とねじれでくねった筒の中を進んでいるように見せるループアニメーションです。
• 花の開閉Bloom何重にも重なった花弁が外側の層から時間差で開いては閉じ、並べると花畑のように波打つループアニメーションです。
• 時計の針の群れClock Swarm格子状に並んだ時計の2本の針が一斉に回り、模様 A と模様 B の間を行き来するループアニメーションです。
• スピログラフSpirograph大きな歯車の内側や外側を小さな歯車が転がり、穴に差したペンが花模様を描いていくループアニメーションです。
• 吸い込まれる渦Black Hole極座標の格子が渦を巻きながら中心の穴へ吸い込まれ続け、中心に近いほど強くねじれるループアニメーションです。
• SDF・等高線GLContour Tunnel図形の距離関数を等高線の縞として描き、縞が中心から湧き出し続けながら2つの図形の間でモーフするループアニメーションです。