MandelbrotSet JS

The Mandelbrot set is one of the most famous fractals in mathematics, visualizing the boundary between chaos and order in complex dynamics. It’s defined by a simple recursive equation:

$Z_{n+1} = Z_n^2 + C$

where $Z$ and $C$ are complex numbers. Starting with $Z_0 = 0$ , a point $C$ in the complex plane belongs to the Mandelbrot set if the sequence remains bounded (doesn’t escape to infinity) when the equation is iterated repeatedly. The fascinating patterns emerge from this mathematical simplicity, with intricate detail at every level of magnification.

Visualization

The following is a visualization of the set, based on the complex plane. You can zoom in and move around as you please:

OpenGL

The beef of this is contained in the shader.

for(int i = 0; i < MAX_ITERATIONS; i++) {
    if (distanceToOrigin(oAccum) <= BOUNDARY) { 
        iCounter++;
        // Fused complex product and addition
        oAccum = vec2(complex_prod(oAccum) + position.xy);
    }
}

Shaders are an OpenGL construct that calculate the color of each pixel in parallel. So in this case the fragment shader computes the recursive function for each pixel. A threshold is harcoded and the coloring that you see is how many rounds of computation were needed for $Z_i$ to grow past that threshold.

The zoom area is automatically updated as the user moves around. There are some issues around floating point accuracy once you zoom in too much.