Home▸Drawing with Maths▸Hyperbolic Tiling Tunnel (2D)

Hyperbolic Tiling Tunnel (2D)

A hand-rolled 2D perspective projection of a triangular tile tunnel: every vertex is divided by depth and drawn to canvas each frame, with adjustable fly speed, tile density, hue-shift and radius wobble.

Drawing with Maths2DModerate60 FPS📱 Mobile-adapted⇄ 3D version
2d-hyperbolic-tiling-tunnel ↗ Open standalone

This 2D companion reimplements the 3D tunnel's ring-of-triangles layout as a hand-rolled perspective projection: each tile's position is divided by its depth and mapped onto the canvas every frame, so near rings spread wide and far rings shrink toward a vanishing point exactly as a 3D camera would render them, without any WebGL context. The fly-through speed, tile density, hue-shift speed and radius wobble are all live controls, and a painter's-algorithm depth sort keeps nearer tiles drawn over farther ones as the tunnel scrolls past.

⚙ Under the hood

2D canvas tunnel built from manual perspective-divide projection of triangle rings, with live fly speed, tile density, hue-shift and radius wobble controls and a painter's-algorithm depth sort.

perspective projectiontilingcanvas 2dprocedural geometry

2D · HTML5 Canvas 2D · 60 FPS target · runs fully client-side, no install

What did you find?

Add reproduction steps (optional)