葉序・螺旋Phyllotaxis
黄金角ずつ角度をずらして点を並べ、ひまわりの種のような螺旋模様が中心から湧き出して外へ流れ続けるループアニメーションです。
どう計算しているか
- k 番目の点を、角度 k×「開度」、半径 √k ×「間隔」の位置に置きます。半径を √k に比例させると、点の密度が中心から外まで均一になります。
- 開度が黄金角（約 137.5°）のとき、点は重なりにくく、左右両方向の螺旋が同時に見える配置になります。少し変えるだけで模様が大きく変わります。
- 時間とともに全ての点の番号 k に少しずつ値を足していくことで、点が螺旋に沿って外側へ流れ、中心から新しい点が湧いて見えます。
- 中心付近と最後の点の近くでは大きさを 0 に近づけ、点が急に出たり消えたりしないようにしています。「大きさの変化」では、外ほど大きくする、一定にする、半径に沿った sin の波で変える、を選べます。
q = k + t·growth·P, r = c·√q, θ = q·137.5° + spin·2πtループがつながる理由
1ループで点の番号を「1ループで湧く数」×パレットの色数ぶんだけ進めます。番号が整数だけずれるので点の位置は元の点の位置とそろい、色も色数の倍数だけずれるので同じ色が同じ場所に来ます。「回転」は整数周なので向きも戻ります。
調整できるパラメータ
形
| 図形 | 丸・四角・三角・六角形・ひし形・十字・星・リング・線・半円 |
|---|---|
| 点の数 | 50 〜 3000（初期値 900） |
| 間隔 | 4 〜 40（初期値 15） |
| 点の大きさ | 0.1 〜 1.5（初期値 0.55） |
| 開度（度） | 120 〜 160（初期値 137.51） |
動き
| 1ループで湧く数 | 1 〜 8（初期値 1） |
|---|---|
| 回転 | -3 〜 3（初期値 0） |
| 大きさの変化 | 外ほど大きい・一定・波打つ |
同じ分類のシーン（放射・回転）
- 放射・回転対称Polar Rings同心円上に並んだ図形がリングごとに少しずつ遅れて回り、渦や花のような模様が浮かんでは消えるループアニメーションです。
- 形状モーフShape Morph丸・三角・四角などの輪郭を同じ数の点で表し、点どうしを補間して形を滑らかに変形させ続けるループアニメーションです。
- 入れ子の回転Twist Stack大きさの違う多角形を中心にそろえて重ね、内側ほど遅れて回すことで、ねじれた渦が現れてはほどけるループアニメーションです。
- 万華鏡Kaleidoscope扇形の中で図形を動かし、それを回転と鏡写しで円周に並べることで、万華鏡のような対称模様を作るループアニメーションです。
- 無限ズームInfinite Zoom多角形の辺上の点を結んで一回り小さい多角形を作る操作を繰り返し、その入れ子の渦へ無限に吸い込まれていくループアニメーションです。
- 遠近トンネルPerspective Tunnel遠くから迫ってくるリングの列を遠近法で描き、うねる軸とねじれでくねった筒の中を進んでいるように見せるループアニメーションです。
- 花の開閉Bloom何重にも重なった花弁が外側の層から時間差で開いては閉じ、並べると花畑のように波打つループアニメーションです。
- 時計の針の群れClock Swarm格子状に並んだ時計の2本の針が一斉に回り、模様 A と模様 B の間を行き来するループアニメーションです。
- スピログラフSpirograph大きな歯車の内側や外側を小さな歯車が転がり、穴に差したペンが花模様を描いていくループアニメーションです。
- 吸い込まれる渦Black Hole極座標の格子が渦を巻きながら中心の穴へ吸い込まれ続け、中心に近いほど強くねじれるループアニメーションです。
- SDF・等高線GLContour Tunnel図形の距離関数を等高線の縞として描き、縞が中心から湧き出し続けながら2つの図形の間でモーフするループアニメーションです。