Home▸Generative Art & Algorithmic Patterns▸Neon Tunnel: Log-Polar Domain-Warp Raster (2D)

Neon Tunnel: Log-Polar Domain-Warp Raster (2D)

A 2D companion to the 3D Neon Tunnel: instead of a GPU fragment shader, every pixel's colour is computed in plain JavaScript from a logarithmic-polar depth coordinate warped by fractal value noise, drawn straight into an ImageData buffer — no camera, no projection matrix, no WebGL.

Generative Art & Algorithmic Patterns2DModerate60 FPS📱 Mobile-adapted⇄ 3D version
2d-neon-tunnel ↗ Open standalone

This 2D companion rebuilds the synthwave tunnel effect without any GPU shader at all: a small offscreen pixel buffer is filled entirely in JavaScript, one pixel at a time, by converting each pixel's screen position into a logarithmic-polar coordinate t = -ln(r) + time·speed and testing it against periodic ring and spiral-stripe patterns — the same conceptual trick as a fragment shader's tunnel mapping, but computed on the CPU into an ImageData array rather than run in parallel on the GPU. On top of that base pattern, the polar angle is perturbed by hand-written fractal value noise (domain warping), so the neon walls buckle and ripple organically instead of staying perfectly periodic. The buffer renders at reduced resolution and is stretched to fill the canvas, trading a little sharpness for real-time frame rates — the classic render-small-then-upscale approach used throughout the software-rendering era.

⚙ Under the hood

A 2D companion to the 3D Neon Tunnel that replaces the GPU fragment shader with a hand-written CPU rasteriser: every pixel of a small offscreen buffer is coloured from a logarithmic-polar depth coordinate t = -ln(r) + time·speed, perturbed by fractal value noise (domain warping).

generative artlog-polar mappingvalue noisedomain warpingprocedural animationcanvas rasterisation

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

What did you find?

Add reproduction steps (optional)