擬似3D・六角形Cube Turn
六角形に見える立方体を敷き詰め、それぞれを120°ずつ回して面の色を入れ替え、凹凸が反転して見える錯視です。
どう計算しているか
- 立方体を斜めから見ると、正六角形の中心から3枚のひし形が出ている形になります。この3枚を、中心と六角形の頂点3つを結ぶ四角形として3色で塗り分けます。
- 六角形を蜂の巣状に並べます。横の間隔は √3·R、縦の間隔は 1.5·R で、奇数行だけ半個ぶん横にずらします。R は「分割数」から決まります。
- 各六角形の時刻 u を「位相のずれ方」と「ずれ量」で遅らせ、「1ループの回転回数」(3 または 6) 個の区間に分けます。区間ごとにイージングをかけて120°回すので、回ってから止まる動きを繰り返します。
- 回転の途中では「回転中の縮み」に応じて少し小さくなります。縮み具合は 0.5 − 0.5·cos(2πe) の山なりの曲線で、回り始めと回り終わりには元の大きさに戻ります。
seg = fract(t − off)·steps, θ = (⌊seg⌋ + ease(seg mod 1))·120°ループがつながる理由
120°は六角形の対称な角度なので、1回回るごとに形は元と重なり、3色の位置だけが入れ替わります。3回で360°、6回で720°回って色の並びも元に戻り、時刻は fract で折り返すため最後と最初がつながります。
調整できるパラメータ
形
| 分割数 | 2 〜 20（初期値 7） |
|---|---|
| サイズ | 0.3 〜 1.3（初期値 0.98） |
動き
| 1ループの回転回数 | 3回（1周）・6回（2周） |
|---|---|
| 回転中の縮み | 0 〜 1（初期値 0.25） |
| 位相のずれ方 | 同時・放射・角度・渦巻き・斜め・横・縦・市松・ランダム |
| ずれ量 | 0 〜 4（初期値 0.5） |
| イージング | linear・sine・quad・cubic・quint・expo・back・elastic |
同じ分類のシーン（立体・擬似3D）
- 擬似3D・階段Iso Columns斜め上から見た四角い柱が格子状に並び、中心から外へ伝わる波に合わせて高さが上下するアニメーションです。
- 階段Endless Stairs平行に並んだ階段をボールが一段ずつ跳ねて降り、カメラも同じ速さで追いかけるので、終わりなく続いて見える階段です。
- 転がる多角形Rolling Polygons正多角形が地面に接した角を支点に一辺ぶんずつ倒れて転がり、行ごとに時間差をつけて進んでいくアニメーションです。
- 多面体ワイヤーWire Solids正多面体の頂点と辺を3次元で回転させて画面に投影し、ワイヤーフレームとして描くアニメーションです。
- トーラスTorusドーナツ形（トーラス）の表面に並べた点や線を3次元で回転させて投影し、表面の模様を流すアニメーションです。
- 積み木の塔Block Towerアイソメトリックで描いた積み木の塔に上から1つずつ積み木が落ちて跳ね、塔全体が1段沈んで元の高さに戻るアニメーションです。
- ルービックキューブ風Cube Puzzle3×3の立体パズルの面をランダムに90°ずつ回して崩し、同じ手順を逆にたどって揃った状態に戻るアニメーションです。
- 球面の点Dot Sphere球面に均等に並べた点を回転させ、緯度に沿った波で表面を脈打たせながら色の縞を流すアニメーションです。
- レイマーチング立体GLRaymarched Forms距離関数で定義した3D立体をレイマーチングで描き、球が溶け合ったり、箱がねじれたり、トーラスが回ったりする様子に陰影を付けるアニメーションです。