Digit Tunnel 3D

An infinite, twisted 3D tunnel mapped with procedural characters. It uses a 3D-to-2D perspective projection with Painter's Algorithm sorting to render thousands of digits in real-time, creating a mesmerizing vertigo effect.

Playground

60 FPS • Canvas 2D

Click + Drag to interact with field

</>

Full Executable Algorithm Code

23 lines 689 chars

// Digit Tunnel 3D (experimental)
ctx.fillStyle = 'rgba(6, 8, 12, 0.18)';
ctx.fillRect(0, 0, width, height);

const cx = width * 0.5;
const cy = height * 0.5;
const maxR = Math.min(width, height) * 0.38;
const t = time * 1.2;

ctx.beginPath();
const steps = 360;
for (let i = 0; i <= steps; i++) {
  const phi = (i / steps) * Math.PI * 2;
  const r = maxR * (0.6 + 0.3 * Math.sin(phi * 6 + t * 2) * Math.cos(phi * 4 - t));
  const px = cx + Math.cos(phi) * r;
  const py = cy + Math.sin(phi) * r;
  if (i === 0) ctx.moveTo(px, py);
  else ctx.lineTo(px, py);
}
ctx.closePath();
ctx.strokeStyle = 'hsla(' + ((time * 30 + 195) % 360) + ', 95%, 68%, 0.85)';
ctx.lineWidth = 2.2;
ctx.stroke();

Edit in Interactive Playground Zero Dependencies • Standalone Canvas 2D

Mathematical Formulation

medium

Analytical Equation

f(z) = \begin{bmatrix} R \cos(\theta + \rho) \\ R \sin(\theta + \rho) \end{bmatrix} \frac{fov}{z}

Click to expand

Compact Formula

f(z) = [R cos(θ + ρ), R sin(θ + ρ)] * fov / z

Mathematical Tags

#3d #tunnel #typography #projection #matrix

Author: Math Art Core Target: 60 FPS

Digit Tunnel 3D

Full Executable Algorithm Code

Mathematical Formulation

Mathematical Tags

Export & Embed: Digit Tunnel 3D

4K PNG Snapshot

WebM Video (5s Loop)

Standalone JS Script

HTML Iframe Embed

Support the Project