RotoZoomer

The RotoZoomer is one of the most iconic demoscene effects — a texture that continuously rotates and zooms to fill the entire screen. Made famous by Future Crew's Second Reality (1993) and countless Amiga and Atari ST demos, the trick relies on a beautifully simple observation: rotation plus scaling of a 2D texture can be reduced to just two additions per pixel in the inner loop.

Two direction vectors (udelta/vdelta) are derived from sin(angle) and cos(angle), scaled by the current zoom factor. For each scanline the texture coordinates are stepped by the rotated vector; between scanlines they are stepped by the perpendicular vector. The texture wraps seamlessly via bitwise AND on power-of-two dimensions — no branching, no modulo, no floating point in the inner loop. The zoom factor oscillates with a sine wave, creating the characteristic breathing effect.

Since browsers no longer support Java applets, the demo below is a JavaScript/Canvas port of the original effect.

Features

Real-time texture rotation and zoom with only two additions per pixel
Sine-modulated zoom factor for breathing/pulsing effect
Seamless texture wrapping via bitwise AND (power-of-two textures)
Full-screen fill — every pixel is texture-mapped
No lookup tables needed — the inner loop is pure integer math

Applet Code Example

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

JavaScript Canvas Version

The JavaScript port uses the same algorithm — rotated direction vectors with per-pixel stepping — but renders into an HTML5 <canvas> via ImageData. The entire effect fits in just over 1 KB of minified JavaScript.

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