ColorTunnel

A real-time color tunnel effect using pre-computed polar coordinate tables. Each pixel's angle and radius from the center are calculated once at startup; at runtime the inner loop only needs additions, bitwise masking and a palette lookup per pixel. A cycling sinus distortion warps the tunnel walls, creating an organic, pulsating fly-through.

Tunnel effects were a staple of the Amiga, Atari ST and PC demoscene. The trick of replacing expensive atan2/sqrt with a one-time lookup table made them fast enough for 68000 and early x86 hardware. This version generates its color palette procedurally — no texture image needed — producing a smooth gradient that cycles through multiple color stops.

Originally a Java applet (1997). The JavaScript/Canvas port uses the same algorithm but adds mouse/touch interaction for controlling the tunnel center and a Lissajous auto-wander. Two palette modes are available: "original" faithfully reproduces the Java applet's green/red/white/cyan gradient, while "candy" uses a different colorful gradient.

Candy palette — swipe, use arrow keys or click below to switch

candy | original

Features

Pre-computed polar coordinate lookup table (angle + radius per pixel)
Procedurally generated multi-color gradient palette (512 entries)
Two palette modes: "original" (Java applet colors) and "candy" (colorful gradient)
Cycling sinus distortion with multiple waveform phases
Mouse/touch interaction — move the cursor to control the tunnel center
Auto-wandering tunnel center with Lissajous pattern
Pure pixel-level rendering — no texture image required

Parameters (COLORTUNNEL_CFG)

Name	Type	Description	Default
`palette`	string	`"original"` = Java applet palette (green/red/white/cyan), `"candy"` = colorful gradient	`"candy"`
`wanderSpeed`	float	Speed of automatic center wandering (0 = off)	`1.0`
`wanderRange`	float	Wander radius as fraction of canvas size	`0.25`

Mouse Interaction

Moving the mouse (or touching) over the canvas controls the tunnel center position. The center smoothly follows the cursor. When the cursor leaves the canvas, the tunnel center returns to automatic wandering using a Lissajous pattern.

Applet Code Example

<applet archive="ColorTunnel.jar"
  code="ColorTunnel.class" width="200" height="200">
</applet>

JavaScript Canvas Version

<canvas id="game" width="300" height="300"></canvas>
<script>var COLORTUNNEL_CFG = { palette: "original" };</script>
<script src="colortunnel.min.js"></script>