遠近トンネルPerspective Tunnel

遠くから迫ってくるリングの列を遠近法で描き、うねる軸とねじれでくねった筒の中を進んでいるように見せるループアニメーションです。

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

遠くから迫ってくるリングの列。うねる軸とねじれで、くねった筒の中を進んでいるように見える

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

どう計算しているか

リングを奥行き方向に等間隔で並べ、半径を奥行き z に反比例させて描きます（透視投影：遠いものほど小さく見える計算）。時間とともに全てのリングの奥行きを手前へ減らすので、こちらに迫って見えます。
リングの中心は、奥行きと時刻を入れた sin と cos で左右上下にずらします。手前ほどずれを小さくしているので、自分の視点は安定したまま奥がうねって見えます。「うねり」が振れ幅、「うねりの細かさ」が奥行きに対する波の細かさです。
多角形のリングは奥行きに比例して回転させ、「ねじれ」で筒がらせん状にねじれて見えます。「辺の数」を 0 にすると円になります。
奥のリングほど色を背景色に近づけて「霧」を表現し、塗りの場合は一番奥を背景色でふさいで穴の奥を作ります。

depth = j − t·L,  r = R·focal/z(depth),  中心 = sway·sin(2π(depth·f + t))

1ループでリングは「進む速さ」×色数ぶんの間隔だけ手前に進みます。整数個ぶんずれるので全てのリングは別のリングの元の位置にちょうど収まり、色も色数の倍数だけずれて一致します。うねりは時刻について周期1の sin と cos なので、最初と同じ曲がり方に戻ります。