擬似3D・階段Iso Columns
斜め上から見た四角い柱が格子状に並び、中心から外へ伝わる波に合わせて高さが上下するアニメーションです。
どう計算しているか
- 格子の番号 (i, j) を、アイソメトリック投影（奥行きの軸を斜め30°に倒して立体を平面に描く方法）で画面座標に変換します。x は (i − j)·cos30°、y は (i + j)·0.5 に比例します。
- 各柱は左の側面・右の側面・上面の3枚の四角形で描きます。手前の柱が奥の柱を正しく隠すように、i + j が小さい奥の列から順に塗ります。
- 柱ごとに「位相のずれ方」で決まる遅れ off（放射なら中心からの距離）を求め、「ずれ量」を掛けます。u = fract(t − off) をイージングし、0.5 − 0.5·cos(2πe) という山なりの波に通して高さの割合を作ります。
- 高さは「最低の高さ」＋「高さの振れ幅」×波の値です。「階段の段数」が1以上のときは、波の値を段数倍して整数部分と、なめらかにつないだ小数部分に分け、高さが段ごとに切り替わるようにしています。
u = fract(t − off·spread), h = base + amp·(0.5 − 0.5·cos 2π·ease(u))ループがつながる理由
波は 0.5 − 0.5·cos(2πe) なので、e = 0 と e = 1 で同じ値になります。各柱の時刻は fract で 0〜1 に折り返されるため、どの柱も1ループでちょうど1回上下して元の高さに戻ります。
調整できるパラメータ
形
| 分割数 | 2 〜 20（初期値 8） |
|---|---|
| すき間 | 0 〜 0.6（初期値 0.06） |
| 最低の高さ | 0 〜 200（初期値 20） |
動き
| 高さの振れ幅 | 0 〜 400（初期値 140） |
|---|---|
| 階段の段数(0で無段階) | 0 〜 8（初期値 0） |
| 位相のずれ方 | 同時・放射・角度・渦巻き・斜め・横・縦・市松・ランダム |
| ずれ量 | 0 〜 4（初期値 1） |
| イージング | linear・sine・quad・cubic・quint・expo・back・elastic |
同じ分類のシーン（立体・擬似3D）
- 擬似3D・六角形Cube Turn六角形に見える立方体を敷き詰め、それぞれを120°ずつ回して面の色を入れ替え、凹凸が反転して見える錯視です。
- 階段Endless Stairs平行に並んだ階段をボールが一段ずつ跳ねて降り、カメラも同じ速さで追いかけるので、終わりなく続いて見える階段です。
- 転がる多角形Rolling Polygons正多角形が地面に接した角を支点に一辺ぶんずつ倒れて転がり、行ごとに時間差をつけて進んでいくアニメーションです。
- 多面体ワイヤーWire Solids正多面体の頂点と辺を3次元で回転させて画面に投影し、ワイヤーフレームとして描くアニメーションです。
- トーラスTorusドーナツ形（トーラス）の表面に並べた点や線を3次元で回転させて投影し、表面の模様を流すアニメーションです。
- 積み木の塔Block Towerアイソメトリックで描いた積み木の塔に上から1つずつ積み木が落ちて跳ね、塔全体が1段沈んで元の高さに戻るアニメーションです。
- ルービックキューブ風Cube Puzzle3×3の立体パズルの面をランダムに90°ずつ回して崩し、同じ手順を逆にたどって揃った状態に戻るアニメーションです。
- 球面の点Dot Sphere球面に均等に並べた点を回転させ、緯度に沿った波で表面を脈打たせながら色の縞を流すアニメーションです。
- レイマーチング立体GLRaymarched Forms距離関数で定義した3D立体をレイマーチングで描き、球が溶け合ったり、箱がねじれたり、トーラスが回ったりする様子に陰影を付けるアニメーションです。