ルービックキューブ風Cube Puzzle
3×3の立体パズルの面をランダムに90°ずつ回して崩し、同じ手順を逆にたどって揃った状態に戻るアニメーションです。
3×3 の立体パズルが面を90°ずつ回して崩れ、同じ手順を逆にたどって揃った状態に戻る
このシーンで作るパラメータ、色、エフェクトを変えて、GIF・APNG・WebP・MP4・WebM で書き出せます。
どう計算しているか
- 「シード」から決まる乱数で、回す軸・層・向きを「手数」の数だけ選びます。同じ軸が続かないようにします。そのあとに、手順を逆順にして向きも反対にした動きをつなげます。
- 27個の小さな立方体は、それぞれ3×3の回転行列を持っています。終わった手順については、対象の層にある立方体に90°の回転行列を掛けていきます。値を整数に丸めるので、誤差がたまりません。
- いま進行中の1手だけは、イージングをかけた途中の角度で回します。画面全体には、「見下ろす角度」の傾きと、縦軸まわりの「全体の回転数」の回転をかけます。
- 各面の向き（法線）を計算し、こちらを向いていない面は描きません。残りの面は奥から順に塗り、外側の面にはすき間をあけてステッカーの色を重ねます。
moves = seq + reverse(seq)⁻¹, view = Rx(pitch)·Ry(π/4 + 2π·spin·t)ループがつながる理由
前半で崩した手順を後半で逆にたどるので、最後には必ず揃った状態に戻ります。「揃った状態で止まる時間」の半分ずつを最初と最後に置いて静止させ、全体の回転は整数回なので、向きも元と一致します。
調整できるパラメータ
形
| 手数 | 1 〜 10（初期値 5） |
|---|---|
| シード | 0 〜 999（初期値 8） |
| 大きさ | 0.3 〜 1.1（初期値 0.7） |
| ステッカーのすき間 | 0 〜 0.3（初期値 0.1） |
| 見下ろす角度 | 0 〜 1（初期値 0.6） |
動き
| 揃った状態で止まる時間 | 0 〜 0.5（初期値 0.12） |
|---|---|
| 全体の回転数 | 0 〜 2（初期値 1） |
| イージング | 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次元で回転させて投影し、表面の模様を流すアニメーションです。
- 積み木の塔Block Towerアイソメトリックで描いた積み木の塔に上から1つずつ積み木が落ちて跳ね、塔全体が1段沈んで元の高さに戻るアニメーションです。
- 球面の点Dot Sphere球面に均等に並べた点を回転させ、緯度に沿った波で表面を脈打たせながら色の縞を流すアニメーションです。
- レイマーチング立体GLRaymarched Forms距離関数で定義した3D立体をレイマーチングで描き、球が溶け合ったり、箱がねじれたり、トーラスが回ったりする様子に陰影を付けるアニメーションです。