花の開閉Bloom
何重にも重なった花弁が外側の層から時間差で開いては閉じ、並べると花畑のように波打つループアニメーションです。
どう計算しているか
- 1つの層には「花弁の数」枚の花弁を等しい角度で並べ、各花弁はベジェ曲線（制御点で形を決める滑らかな曲線）で描きます。「花弁の形」で曲線の組み方が変わります。
- 「重ねる枚数」だけ層を作り、内側の層ほど小さくし、花弁が互い違いになるよう半枚ぶん角度をずらします。
- 開き具合は 0.5 − 0.5·cos(2π·e) で、閉じた状態から開いてまた閉じる山形の変化をします。これに合わせて花弁の長さ・幅・つぶれ具合、「開くときのひねり」による回転を変えます。
- 「層ごとの遅れ」で内側の層ほど遅れて開きます。「並べる数」を増やすと花を格子に並べ、中心からの距離などで開く時刻をずらします。
open = lerp(openMin, 1, 0.5 − 0.5·cos(2π·ease(fract(t − l·lag))))ループがつながる理由
開き具合を作る 0.5 − 0.5·cos(2π·e) は e = 0 と e = 1 でどちらも 0 になり、ループの始めと終わりで必ず閉じた状態です。時間差は fract で巻き戻すので、どの層もどの花も1ループで1回ずつ開閉を終えます。
調整できるパラメータ
形
| 花弁の数 | 3 〜 24（初期値 8） |
|---|---|
| 重ねる枚数 | 1 〜 8（初期値 4） |
| 花弁の形 | 丸い・尖った・ハート |
| 並べる数（1辺） | 1 〜 8（初期値 1） |
| 大きさ | 0.3 〜 1.3（初期値 0.9） |
| 花芯 | オン／オフ（初期値 オン） |
動き
| 閉じたときの開き | 0 〜 1（初期値 0.12） |
|---|---|
| 層ごとの遅れ | 0 〜 0.2（初期値 0.06） |
| 開くときのひねり | 0 〜 1（初期値 0.3） |
| 位相のずれ方 | 同時・放射・角度・渦巻き・斜め・横・縦・市松・ランダム |
| ずれ量 | 0 〜 4（初期値 0.4） |
| イージング | linear・sine・quad・cubic・quint・expo・back・elastic |
同じ分類のシーン（放射・回転）
- 放射・回転対称Polar Rings同心円上に並んだ図形がリングごとに少しずつ遅れて回り、渦や花のような模様が浮かんでは消えるループアニメーションです。
- 形状モーフShape Morph丸・三角・四角などの輪郭を同じ数の点で表し、点どうしを補間して形を滑らかに変形させ続けるループアニメーションです。
- 入れ子の回転Twist Stack大きさの違う多角形を中心にそろえて重ね、内側ほど遅れて回すことで、ねじれた渦が現れてはほどけるループアニメーションです。
- 万華鏡Kaleidoscope扇形の中で図形を動かし、それを回転と鏡写しで円周に並べることで、万華鏡のような対称模様を作るループアニメーションです。
- 葉序・螺旋Phyllotaxis黄金角ずつ角度をずらして点を並べ、ひまわりの種のような螺旋模様が中心から湧き出して外へ流れ続けるループアニメーションです。
- 無限ズームInfinite Zoom多角形の辺上の点を結んで一回り小さい多角形を作る操作を繰り返し、その入れ子の渦へ無限に吸い込まれていくループアニメーションです。
- 遠近トンネルPerspective Tunnel遠くから迫ってくるリングの列を遠近法で描き、うねる軸とねじれでくねった筒の中を進んでいるように見せるループアニメーションです。
- 時計の針の群れClock Swarm格子状に並んだ時計の2本の針が一斉に回り、模様 A と模様 B の間を行き来するループアニメーションです。
- スピログラフSpirograph大きな歯車の内側や外側を小さな歯車が転がり、穴に差したペンが花模様を描いていくループアニメーションです。
- 吸い込まれる渦Black Hole極座標の格子が渦を巻きながら中心の穴へ吸い込まれ続け、中心に近いほど強くねじれるループアニメーションです。
- SDF・等高線GLContour Tunnel図形の距離関数を等高線の縞として描き、縞が中心から湧き出し続けながら2つの図形の間でモーフするループアニメーションです。