512b JSpongy

Since Mentor^TBC released Spongy, an amazing 128b intro raymarching a Menger sponge, I wondered how far such effect could be size optimized in JavaScript while keeping complex camera path.

The goal was to optimize for size and release the result as an intro in the demoscene spirit. That explains why although it is possible to cram a Menger Sponge raymarching in about 300 bytes of HTML5 with a very scarce design, the release version fits in the 512b category and retain some of the style and complexity of the original.

Watch the JSpongy demos


Menger sponge ?

The Menger sponge is a three-dimensional extension of the Cantor set and Sierpinski carpet first described by Austrian mathematician Karl Menger in 1926.

It starts as a single cube in which the central pillar is carved out in all three axis to make 20 smaller cubes on which the process is repeated.

Technical information

The camera travels in the fractal along a cycloid without ever touching it. The camera target rotates along the Y and Z axis.

The rendering itself is done using Canvas and ImageData by simply changing the Alpha channel of each pixel in order to gain a few bytes necessary to stay under 512b.

A Menger Sponge is raymarched with at constant length steps for a maximum of 128 steps.

The intrisinc resolution of the Canvas is 64×64.

Related links