階段Endless Stairs
平行に並んだ階段をボールが一段ずつ跳ねて降り、カメラも同じ速さで追いかけるので、終わりなく続いて見える階段です。
どう計算しているか
- 階段は、横に「踏面の幅」W、下に「蹴上げの高さ」H ずつ進む折れ線を画面の外まで十分な段数ぶん引き、その下に「段の厚み」ぶんの帯を付けた多角形として塗ります。
- 「階段の本数」だけ、「階段の間隔」をあけて上下に並べます。「傾き」は画面全体の回転角です。
- ボールは各段の上を、横方向はイージングで W だけ、縦方向は H だけ進みます。さらに「ジャンプの高さ」× 4u(1 − u) という放物線を引いて、跳ねる軌道にします。
- 着地の前後では「つぶれ」に応じてボールを横に広げ、縦に縮めます。量は着地からの時間差 d を使った exp(−(d / 0.06)²) で、着地の瞬間だけ強くつぶれます。
- 「本ごとの時間差」で階段ごとにボールの時刻をずらします。ずらした時刻の整数部分を段の番号に足すので、ずれていてもボールは正しい段にいます。
x = (0.5 + ease(u))·W, y = ease(u)·H − hop·4u(1 − u)ループがつながる理由
画面全体を1ループで (−W, −H)、つまりちょうど1段ぶん平行移動しています。階段は1段ごとに同じ形の繰り返しなので、1段ずれた画面は元の画面と同じに見えます。ボールも1ループでちょうど1段降りるため、カメラとの相対位置が元に戻ります。
調整できるパラメータ
形
| 踏面の幅 | 30 〜 260（初期値 110） |
|---|---|
| 蹴上げの高さ | 10 〜 200（初期値 60） |
| 階段の本数 | 1 〜 8（初期値 3） |
| 階段の間隔 | 80 〜 700（初期値 260） |
| 段の厚み | 10 〜 600（初期値 120） |
| 傾き | -45 〜 45（初期値 0） |
| ボール | オン／オフ（初期値 オン） |
| ボールの大きさ | 5 〜 80（初期値 22） |
動き
| ジャンプの高さ | 0 〜 300（初期値 90） |
|---|---|
| 本ごとの時間差 | 0 〜 0.5（初期値 0.12） |
| つぶれ | 0 〜 0.6（初期値 0.3） |
| イージング | linear・sine・quad・cubic・quint・expo・back・elastic |
同じ分類のシーン（立体・擬似3D）
- 擬似3D・階段Iso Columns斜め上から見た四角い柱が格子状に並び、中心から外へ伝わる波に合わせて高さが上下するアニメーションです。
- 擬似3D・六角形Cube Turn六角形に見える立方体を敷き詰め、それぞれを120°ずつ回して面の色を入れ替え、凹凸が反転して見える錯視です。
- 転がる多角形Rolling Polygons正多角形が地面に接した角を支点に一辺ぶんずつ倒れて転がり、行ごとに時間差をつけて進んでいくアニメーションです。
- 多面体ワイヤーWire Solids正多面体の頂点と辺を3次元で回転させて画面に投影し、ワイヤーフレームとして描くアニメーションです。
- トーラスTorusドーナツ形（トーラス）の表面に並べた点や線を3次元で回転させて投影し、表面の模様を流すアニメーションです。
- 積み木の塔Block Towerアイソメトリックで描いた積み木の塔に上から1つずつ積み木が落ちて跳ね、塔全体が1段沈んで元の高さに戻るアニメーションです。
- ルービックキューブ風Cube Puzzle3×3の立体パズルの面をランダムに90°ずつ回して崩し、同じ手順を逆にたどって揃った状態に戻るアニメーションです。
- 球面の点Dot Sphere球面に均等に並べた点を回転させ、緯度に沿った波で表面を脈打たせながら色の縞を流すアニメーションです。
- レイマーチング立体GLRaymarched Forms距離関数で定義した3D立体をレイマーチングで描き、球が溶け合ったり、箱がねじれたり、トーラスが回ったりする様子に陰影を付けるアニメーションです。