時計の針の群れClock Swarm
格子状に並んだ時計の2本の針が一斉に回り、模様 A と模様 B の間を行き来するループアニメーションです。
どう計算しているか
- 画面を格子に分け、各マスに2本の針を持つ時計を置きます。「模様 A」と「模様 B」は、マスの位置から2本の針の角度を決めるルールです（中心を向く、渦を巻く、ひし形を作るなど）。
- ループの前半で A から B へ、後半で B から A へ針を回します。角度の差は atan2 で -180°〜180° に直し、近い向きへ回るようにしています。
- 「移る途中の回転数」を上げると、移動の途中で長針と短針が逆向きに余分な周回をします。
- 各時計の開始時刻は中心からの距離に「位置による遅れ」を掛けてずらすので、変化が中心から外へ波のように広がります。
u = fract(t − d·lag·3), θ = θ_A + Δ(θ_A, θ_B)·ease(2u) ± 2π·spins·ease(2u)ループがつながる理由
針は A → B → A と往復し、途中で足す余分な回転は 360° の整数倍なので、ループの終わりには全ての針が A の角度に戻ります。時間差も fract で巻き戻すので、どの時計も1ループで往復をちょうど1回終えます。
調整できるパラメータ
形
| 分割数 | 3 〜 24（初期値 9） |
|---|---|
| 文字盤 | オン／オフ（初期値 オン） |
| 針の太さ | 1 〜 20（初期値 6） |
動き
| 模様 A | 中心を指す・渦・ひし形・四角・波・平行・十字 |
|---|---|
| 模様 B | 中心を指す・渦・ひし形・四角・波・平行・十字 |
| 移る途中の回転数 | 0 〜 3（初期値 1） |
| 位置による遅れ | 0 〜 0.3（初期値 0.08） |
| イージング | linear・sine・quad・cubic・quint・expo・back・elastic |
同じ分類のシーン（放射・回転）
- 放射・回転対称Polar Rings同心円上に並んだ図形がリングごとに少しずつ遅れて回り、渦や花のような模様が浮かんでは消えるループアニメーションです。
- 形状モーフShape Morph丸・三角・四角などの輪郭を同じ数の点で表し、点どうしを補間して形を滑らかに変形させ続けるループアニメーションです。
- 入れ子の回転Twist Stack大きさの違う多角形を中心にそろえて重ね、内側ほど遅れて回すことで、ねじれた渦が現れてはほどけるループアニメーションです。
- 万華鏡Kaleidoscope扇形の中で図形を動かし、それを回転と鏡写しで円周に並べることで、万華鏡のような対称模様を作るループアニメーションです。
- 葉序・螺旋Phyllotaxis黄金角ずつ角度をずらして点を並べ、ひまわりの種のような螺旋模様が中心から湧き出して外へ流れ続けるループアニメーションです。
- 無限ズームInfinite Zoom多角形の辺上の点を結んで一回り小さい多角形を作る操作を繰り返し、その入れ子の渦へ無限に吸い込まれていくループアニメーションです。
- 遠近トンネルPerspective Tunnel遠くから迫ってくるリングの列を遠近法で描き、うねる軸とねじれでくねった筒の中を進んでいるように見せるループアニメーションです。
- 花の開閉Bloom何重にも重なった花弁が外側の層から時間差で開いては閉じ、並べると花畑のように波打つループアニメーションです。
- スピログラフSpirograph大きな歯車の内側や外側を小さな歯車が転がり、穴に差したペンが花模様を描いていくループアニメーションです。
- 吸い込まれる渦Black Hole極座標の格子が渦を巻きながら中心の穴へ吸い込まれ続け、中心に近いほど強くねじれるループアニメーションです。
- SDF・等高線GLContour Tunnel図形の距離関数を等高線の縞として描き、縞が中心から湧き出し続けながら2つの図形の間でモーフするループアニメーションです。