積み木の塔Block Tower
アイソメトリックで描いた積み木の塔に上から1つずつ積み木が落ちて跳ね、塔全体が1段沈んで元の高さに戻るアニメーションです。
アイソメトリックの塔に、上から1つずつ積み木が落ちてくる。塔は1段ずつ沈んで元の高さに戻る
このシーンで作るパラメータ、色、エフェクトを変えて、GIF・APNG・WebP・MP4・WebM で書き出せます。
どう計算しているか
- 塔を斜め上から見た格子状に並べ、奥の列から順に描きます。積み木はアイソメトリック投影（奥行きの軸を斜め30°に倒して描く方法）で、上面と左右の側面を色を変えて塗ります。
- 各塔の時刻を「塔ごとの時間差」でずらします。前半の55%で一番上の積み木が落ちます。落下中は 1 − (f / 0.75)² の放物線で加速しながら下がり、着地後は sin(πb)·(1 − b) で小さく跳ねます。跳ねる高さは「着地の跳ね」で変わります。
- 落ちたあとは、イージングをかけて塔全体を積み木1個ぶん沈めます。
- 塔の地面より下の部分は、柱の形の切り抜き（クリッピング）で隠しているので、沈んだ積み木は地面に吸い込まれるように消えます。
y_k = ground − (k − ease(sink))·s, 落下: y −= drop·(1 − (f/0.75)²)ループがつながる理由
1ループで積み木が1個増え、塔がちょうど1個ぶん沈みます。終わりの時点の積み方は始まりの時点と同じなので、そのまま最初につながります。塔ごとの時刻は fract で折り返します。
調整できるパラメータ
形
| 塔の数（1辺） | 1 〜 6（初期値 3） |
|---|---|
| 見える段数 | 2 〜 12（初期値 5） |
| 積み木の大きさ | 20 〜 140（初期値 64） |
動き
| 落下の高さ | 50 〜 800（初期値 420） |
|---|---|
| 着地の跳ね | 0 〜 0.4（初期値 0.12） |
| 塔ごとの時間差 | 0 〜 0.5（初期値 0.17） |
| イージング | linear・sine・quad・cubic・quint・expo・back・elastic |
同じ分類のシーン（立体・擬似3D）
- 擬似3D・階段Iso Columns斜め上から見た四角い柱が格子状に並び、中心から外へ伝わる波に合わせて高さが上下するアニメーションです。
- 擬似3D・六角形Cube Turn六角形に見える立方体を敷き詰め、それぞれを120°ずつ回して面の色を入れ替え、凹凸が反転して見える錯視です。
- 階段Endless Stairs平行に並んだ階段をボールが一段ずつ跳ねて降り、カメラも同じ速さで追いかけるので、終わりなく続いて見える階段です。
- 転がる多角形Rolling Polygons正多角形が地面に接した角を支点に一辺ぶんずつ倒れて転がり、行ごとに時間差をつけて進んでいくアニメーションです。
- 多面体ワイヤーWire Solids正多面体の頂点と辺を3次元で回転させて画面に投影し、ワイヤーフレームとして描くアニメーションです。
- トーラスTorusドーナツ形（トーラス）の表面に並べた点や線を3次元で回転させて投影し、表面の模様を流すアニメーションです。
- ルービックキューブ風Cube Puzzle3×3の立体パズルの面をランダムに90°ずつ回して崩し、同じ手順を逆にたどって揃った状態に戻るアニメーションです。
- 球面の点Dot Sphere球面に均等に並べた点を回転させ、緯度に沿った波で表面を脈打たせながら色の縞を流すアニメーションです。
- レイマーチング立体GLRaymarched Forms距離関数で定義した3D立体をレイマーチングで描き、球が溶け合ったり、箱がねじれたり、トーラスが回ったりする様子に陰影を付けるアニメーションです。