無限ズームInfinite Zoom

どう計算しているか

1. 正多角形の各辺を「ねじれ」の割合で分ける点をとり、それらを結ぶと、少し小さく少し回った正多角形ができます。これを何段も繰り返すと、渦巻き状の入れ子になります。
2. 1段ごとの縮小率 s と回転角 φ は、隣り合う頂点を (1 − f) と f の割合で混ぜたベクトルの長さと角度として、cos と sin から一度だけ計算します。
3. l 段目の多角形は半径 R0·s^(l − z)、回転角 (l − z)·φ で描きます。z を時間とともに増やすと全ての段が少しずつ拡大しながら回り、奥へ進むように見えます。
4. 「塗り」では前景色と背景色を段ごとに交互に使い、「1ループで進む段数の倍数」で1ループに進む段数を変えられます。

r_l = R0·s^(l − z),  θ_l = (l − z)·φ,  z = ease(t)·段数

ループがつながる理由

この図形は自己相似（一部を拡大すると全体と同じ形になる性質）なので、ちょうど1段進むと元の絵とぴったり重なります。1ループで色数の整数倍の段だけ進めるため、形だけでなく色の並びも最初と一致します。

調整できるパラメータ

形

動き

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

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