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
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>

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.