多面体ワイヤーWire Solids
正多面体の頂点と辺を3次元で回転させて画面に投影し、ワイヤーフレームとして描くアニメーションです。
正多面体のワイヤーフレームが整数回転で回る。並べて時間差をつけると群れのように揃っては崩れる
このシーンで作るパラメータ、色、エフェクトを変えて、GIF・APNG・WebP・MP4・WebM で書き出せます。
どう計算しているか
- 「立体」で選んだ多面体の頂点座標を、黄金比などを使った決まった値から作り、原点からの距離が1になるようにそろえます。辺は、頂点どうしの距離がいちばん短い組み合わせとして自動で求めます。
- 各頂点を、まず横軸まわりに少し傾け、次に「回転軸」で選んだ軸のまわりに角度 θ だけ回します。任意の軸まわりの回転には、軸ベクトルと cos·sin を組み合わせた回転の公式を使います。
- 回したあとの奥行き z を使って、1 / (1 + 遠近感·z·0.6) 倍に縮めて画面に投影します。奥にあるほど小さく見えます。
- 辺は奥のものから順に描き、奥にあるほど薄く細くします。「頂点に点」がオンなら頂点にも丸を置き、同じく奥行きで薄くします。
- 「並べる数（1辺）」で格子状に並べた場合は、「位相のずれ方」と「ずれ量」で立体ごとに時刻をずらします。
θ = 2π·turns·ease(fract(t − off)), k = 1 / (1 + persp·z·0.6)ループがつながる理由
回転角は 2π ×「1ループの回転数」× ease(u) で、回転数は整数です。u が 1 になると立体はちょうど整数回転して元の向きに戻ります。時刻のずれは fract で折り返すので、並べた場合もつながります。
調整できるパラメータ
形
| 立体 | 立方体・正四面体・正八面体・正二十面体・正十二面体・立方八面体 |
|---|---|
| 並べる数（1辺） | 1 〜 8（初期値 1） |
| 大きさ | 0.2 〜 1.2（初期値 0.75） |
| 遠近感 | 0 〜 1（初期値 0.4） |
| 線幅 | 0.5 〜 12（初期値 3） |
| 頂点に点 | オン／オフ（初期値 オン） |
動き
| 回転軸 | 少し傾いた縦軸・縦軸・横軸・対角軸 |
|---|---|
| 1ループの回転数 | 1 〜 3（初期値 1） |
| 位相のずれ方 | 同時・放射・角度・渦巻き・斜め・横・縦・市松・ランダム |
| ずれ量 | 0 〜 4（初期値 0.3） |
| イージング | linear・sine・quad・cubic・quint・expo・back・elastic |
同じ分類のシーン（立体・擬似3D）
- 擬似3D・階段Iso Columns斜め上から見た四角い柱が格子状に並び、中心から外へ伝わる波に合わせて高さが上下するアニメーションです。
- 擬似3D・六角形Cube Turn六角形に見える立方体を敷き詰め、それぞれを120°ずつ回して面の色を入れ替え、凹凸が反転して見える錯視です。
- 階段Endless Stairs平行に並んだ階段をボールが一段ずつ跳ねて降り、カメラも同じ速さで追いかけるので、終わりなく続いて見える階段です。
- 転がる多角形Rolling Polygons正多角形が地面に接した角を支点に一辺ぶんずつ倒れて転がり、行ごとに時間差をつけて進んでいくアニメーションです。
- トーラスTorusドーナツ形（トーラス）の表面に並べた点や線を3次元で回転させて投影し、表面の模様を流すアニメーションです。
- 積み木の塔Block Towerアイソメトリックで描いた積み木の塔に上から1つずつ積み木が落ちて跳ね、塔全体が1段沈んで元の高さに戻るアニメーションです。
- ルービックキューブ風Cube Puzzle3×3の立体パズルの面をランダムに90°ずつ回して崩し、同じ手順を逆にたどって揃った状態に戻るアニメーションです。
- 球面の点Dot Sphere球面に均等に並べた点を回転させ、緯度に沿った波で表面を脈打たせながら色の縞を流すアニメーションです。
- レイマーチング立体GLRaymarched Forms距離関数で定義した3D立体をレイマーチングで描き、球が溶け合ったり、箱がねじれたり、トーラスが回ったりする様子に陰影を付けるアニメーションです。