TextureTunnel

Real-time fly-through of an infinite textured tunnel. Originally a Java applet from 1997. Since modern browsers no longer support Java applets, the original applet code was transpiled to JavaScript/Canvas to make the effect viewable again. The JavaScript version renders in true color (24-bit RGB) instead of the original indexed 8-bit palette.

A polar coordinate lookup table is pre-computed at startup (angle + radius per pixel), turning the expensive atan2/sqrt into a one-time cost. Each frame only performs additions, bitmasking and a single array lookup per pixel. A cycling sinus distortion on the radius creates the characteristic wobble effect.

Tunnel effects were a demoscene classic on Atari ST, Amiga and PC — the pre-computed polar table made them fast enough for 68000 and 386/486 hardware, where the inner loop was pure memory reads and bitwise ops.

Features

Pre-computed polar coordinate lookup table (angle + radius per pixel)
Time-based forward scrolling through the tunnel
Animated sinus distortion cycling through multiple waveform phases
Wandering tunnel center — the vanishing point drifts in a Lissajous pattern
Mouse/touch interaction — move the cursor over the canvas to steer the tunnel center
True color rendering (24-bit RGB via Canvas)
Seamless texture tiling — any power-of-two seamless texture works
60 fps frame limit via requestAnimationFrame

Usage

The texture is loaded from a hidden <img> tag with id="img1". Any seamless, power-of-two texture (e.g. 128×128 or 256×256) can be used.

Code Example

<canvas id="game" width="200" height="200"></canvas>
<img id="img1" src="texture.gif" style="display:none">
<script src="texturetunnel.min.js"></script>

Parameters (TUNNEL_CFG)

Name	Type	Description	Default
`colorCycle`	boolean	Enable rainbow color cycling	`false`
`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 steers the tunnel center to the cursor position. When the mouse leaves the canvas, the center returns to its automatic wandering pattern.

Original Applet

Originally a Java applet (1997). The original Java applet code was transpiled to JavaScript/Canvas in 2026 so the effect can run in modern browsers without a Java plugin. The original used Java’s IndexColorModel with a 256-color palette and had a texture tiling bug where only half the texture was sampled. The JavaScript version uses true color and correct seamless tiling.