放射・回転対称Polar Rings
同心円上に並んだ図形がリングごとに少しずつ遅れて回り、渦や花のような模様が浮かんでは消えるループアニメーションです。
どう計算しているか
- 中心から等間隔に同心円（リング）を引き、r 番目のリングには「1周目の個数」×r 個の図形を等しい角度で並べます。外側ほど個数が増えるので、図形どうしの間隔がほぼ一定に保たれます。
- 各図形の位置は極座標（中心からの距離と角度で位置を表す方法）で決め、cos と sin で画面上の座標に直します。図形は円の接線方向を向くように回転させます。
- リングの回転量は、イージング（動きの緩急をつける関数）をかけた進み具合に「図形1個ぶんの角度 2π/n」と「回転ステップ」を掛けたものです。
- 「リング間の時間差」でリングごとに開始時刻をずらすため、内側から外側へ回転が波のように伝わり、渦が現れます。「交互に逆回転」をオンにすると奇数番目のリングが逆向きに回ります。
- 「呼吸」を上げると、リングの半径が sin で膨らんだり縮んだりします。
u = fract(t − r·lag), θ = ease(u)·turns·2π/(base·r)ループがつながる理由
各リングは図形1個ぶんの角度の整数倍だけ回って止まるため、1周後の並びは隣の図形が元の位置に来ただけで、見た目は最初と同じです。時間差は fract（小数部分だけを取る関数）で 0〜1 に巻き戻すので、どのリングも1ループで同じ動きをちょうど1回終えます。
調整できるパラメータ
形
| 図形 | 丸・四角・三角・六角形・ひし形・十字・星・リング・線・半円 |
|---|---|
| リング密度 | 2 〜 30（初期値 9） |
| 1周目の個数 | 3 〜 24（初期値 6） |
| サイズ | 0.1 〜 1.5（初期値 0.55） |
| 軌道線 | オン／オフ（初期値 オフ） |
動き
| 回転ステップ | 1 〜 6（初期値 1） |
|---|---|
| リング間の時間差 | 0 〜 0.3（初期値 0.05） |
| 交互に逆回転 | オン／オフ（初期値 オン） |
| 呼吸 | 0 〜 1（初期値 0） |
| イージング | linear・sine・quad・cubic・quint・expo・back・elastic |
同じ分類のシーン（放射・回転）
- 形状モーフShape Morph丸・三角・四角などの輪郭を同じ数の点で表し、点どうしを補間して形を滑らかに変形させ続けるループアニメーションです。
- 入れ子の回転Twist Stack大きさの違う多角形を中心にそろえて重ね、内側ほど遅れて回すことで、ねじれた渦が現れてはほどけるループアニメーションです。
- 万華鏡Kaleidoscope扇形の中で図形を動かし、それを回転と鏡写しで円周に並べることで、万華鏡のような対称模様を作るループアニメーションです。
- 葉序・螺旋Phyllotaxis黄金角ずつ角度をずらして点を並べ、ひまわりの種のような螺旋模様が中心から湧き出して外へ流れ続けるループアニメーションです。
- 無限ズームInfinite Zoom多角形の辺上の点を結んで一回り小さい多角形を作る操作を繰り返し、その入れ子の渦へ無限に吸い込まれていくループアニメーションです。
- 遠近トンネルPerspective Tunnel遠くから迫ってくるリングの列を遠近法で描き、うねる軸とねじれでくねった筒の中を進んでいるように見せるループアニメーションです。
- 花の開閉Bloom何重にも重なった花弁が外側の層から時間差で開いては閉じ、並べると花畑のように波打つループアニメーションです。
- 時計の針の群れClock Swarm格子状に並んだ時計の2本の針が一斉に回り、模様 A と模様 B の間を行き来するループアニメーションです。
- スピログラフSpirograph大きな歯車の内側や外側を小さな歯車が転がり、穴に差したペンが花模様を描いていくループアニメーションです。
- 吸い込まれる渦Black Hole極座標の格子が渦を巻きながら中心の穴へ吸い込まれ続け、中心に近いほど強くねじれるループアニメーションです。
- SDF・等高線GLContour Tunnel図形の距離関数を等高線の縞として描き、縞が中心から湧き出し続けながら2つの図形の間でモーフするループアニメーションです。