転がる多角形Rolling Polygons
正多角形が地面に接した角を支点に一辺ぶんずつ倒れて転がり、行ごとに時間差をつけて進んでいくアニメーションです。
どう計算しているか
- 正 n 角形は「辺の数」n と「辺の長さ」a から、外接円の半径 R = a / (2·sin(π/n)) と、中心から辺までの距離 R·cos(π/n) を求めて描きます。底辺が地面に接するように置きます。
- 1回の転がりでは、底辺の右端の頂点を支点にして 360°/n だけ回します。回すと次の辺がちょうど地面に着きます。回転量にはイージングをかけ、パタンと倒れる動きにしています。
- 1ループのあいだに「間隔(辺の何倍か)」と同じ回数だけ転がります。転がるたびに支点を辺の長さ a ずつ右へ移します。
- 「行ごとの時間差」で行ごとに時刻をずらし、「列ごとの時間差」で同じ行の中でも左から順に遅らせます。「行ごとに逆向き」がオンのときは、奇数行を左右反転して逆向きに転がします。
θ = ease(u·sp − j)·360°/n, 支点 x = x0 + j·a (j = ⌊u·sp⌋)ループがつながる理由
360°/n は正 n 角形の対称な角度なので、一辺ぶん転がるたびに形は元と同じ向きに戻ります。1ループで「間隔」回転がると、隣の多角形がいた位置までちょうど移動します。列ごとの遅れは、ずれを含めた時刻を 0〜1 に収めて切り詰める（clamp）ため、どの列もループ内で転がり終えます。
調整できるパラメータ
形
| 辺の数 | 3 〜 8（初期値 4） |
|---|---|
| 辺の長さ | 15 〜 200（初期値 60） |
| 間隔(辺の何倍か) | 2 〜 8（初期値 3） |
| 行数 | 1 〜 20（初期値 7） |
| 行の間隔 | 1.2 〜 4（初期値 2.2） |
| 地面の線 | オン／オフ（初期値 オン） |
| 線幅 | 0.5 〜 10（初期値 3） |
動き
| 行ごとの時間差 | 0 〜 0.5（初期値 0.08） |
|---|---|
| 列ごとの時間差 | 0 〜 0.5（初期値 0） |
| 行ごとに逆向き | オン／オフ（初期値 オン） |
| イージング | linear・sine・quad・cubic・quint・expo・back・elastic |
同じ分類のシーン（立体・擬似3D）
- 擬似3D・階段Iso Columns斜め上から見た四角い柱が格子状に並び、中心から外へ伝わる波に合わせて高さが上下するアニメーションです。
- 擬似3D・六角形Cube Turn六角形に見える立方体を敷き詰め、それぞれを120°ずつ回して面の色を入れ替え、凹凸が反転して見える錯視です。
- 階段Endless Stairs平行に並んだ階段をボールが一段ずつ跳ねて降り、カメラも同じ速さで追いかけるので、終わりなく続いて見える階段です。
- 多面体ワイヤーWire Solids正多面体の頂点と辺を3次元で回転させて画面に投影し、ワイヤーフレームとして描くアニメーションです。
- トーラスTorusドーナツ形（トーラス）の表面に並べた点や線を3次元で回転させて投影し、表面の模様を流すアニメーションです。
- 積み木の塔Block Towerアイソメトリックで描いた積み木の塔に上から1つずつ積み木が落ちて跳ね、塔全体が1段沈んで元の高さに戻るアニメーションです。
- ルービックキューブ風Cube Puzzle3×3の立体パズルの面をランダムに90°ずつ回して崩し、同じ手順を逆にたどって揃った状態に戻るアニメーションです。
- 球面の点Dot Sphere球面に均等に並べた点を回転させ、緯度に沿った波で表面を脈打たせながら色の縞を流すアニメーションです。
- レイマーチング立体GLRaymarched Forms距離関数で定義した3D立体をレイマーチングで描き、球が溶け合ったり、箱がねじれたり、トーラスが回ったりする様子に陰影を付けるアニメーションです。