トーラスTorus

ドーナツ形（トーラス）の表面に並べた点や線を3次元で回転させて投影し、表面の模様を流すアニメーションです。

Canvas 2D で、図形を 1 つずつ計算して描いています。初期設定で再生しています。

点や輪でできたドーナツが回転し、表面を模様が流れていく。奥の点は小さく暗く見える

パラメータ、色、エフェクトを変えて、GIF・APNG・WebP・MP4・WebM で書き出せます。

どう計算しているか

トーラスの表面の点は、輪の周りの角度 u と管の周りの角度 v を使って、((1 + r·cos v)·cos u, r·sin v, (1 + r·cos v)·sin u) と表せます。r は「太さ」です。
「大きい方の分割」と「小さい方の分割」の数だけ u と v を等間隔に取り、点を置きます。「輪」では管を一周する円を、「螺旋」では輪を一周するあいだに管を3周する線を描きます。
各点を縦軸まわりに回し、さらに「傾き」の角度だけ横軸まわりに倒してから、遠近感をつけて投影します。奥にある点や線ほど小さく細くし、背景色に近づけます。
「表面の流れ」は、u（螺旋では v）の角度に時間に比例するずれを足して、模様を表面に沿って動かします。

P(u, v) = ((1 + r·cos v)·cos u, r·sin v, (1 + r·cos v)·sin u)

回転は 2π ×「1ループの回転数」× t で、回転数は整数なので元の向きに戻ります。表面の流れは、1ループで整数個ぶんの区画だけ進むように調整しています。分割数がパレットの色数で割り切れるときは色数ぶん、そうでないときは一周ぶん進めるので、形も色の並びも最初と一致します。