Mandelbrot Art Generator

Interactive Generator

Play with the controls to create your own unique Mandelbrot art. Adjust parameters like detail, color repetition, and warp to see how they affect the visualization.

Mathematical Explanation

For those unfamiliar with the Mandelbrot set, the visualizations we commonly see are a representation of complex number plane. The color at each position basically shows how fast a function explodes into infinity when you iterate over it again and again. The white areas indicate the locations where the function is stable and does not exceed some threshold.

The function we iterate over in Mandelbrot set is:

We start with z = 0 and c is our pixel's position on the complex plane and then we see if z explodes into infinity or remains finite.

In almost all implementations of the Mandelbrot set, there's an early exit condition. If the complex number's value becomes greater than 2, we can assume that the number will go to infinity and therefore stop iterating the function at that position.

Something really beautiful happens if we change the early out condition to check if only the real part of the number is greater than some arbitrary value. This is what causes the prevalence of the overlapping line aesthetic in my generator.

Example of the line aesthetic created by modifying the exit condition

There are some obvious optimizations that could be made to this. You could write this as a shader and render it with the GPU rather than CPU, or use single instruction multiple data paradigm's closer to the silicon than I am in this webpage. But seeing how this already served its purpose in generating the images that I wanted, I'm going to leave it as it is. If you're interested in that topic, One Lone Coder made a great video about this.

Code Implementation

Here's the core algorithm used to generate the Mandelbrot visualization:

// For each pixel in the canvas
for(var x = 0; x < width; x++) {
    for(var y = 0; y < height; y++) {
        // Map canvas coordinates to complex plane
        let dx = (x-px)/scale+nudgeX;
        let dy = (y-py)/scale+nudgeY;
        zr = 0; // Real part of z
        zi = 0; // Imaginary part of z
        
        // Iterate until we reach max iterations
        for(t = 0; t < maxItterations; t++) {
            // Calculate z = z^2 + c
            real = (zr*zr) - (zi*zi) + dx;
            im = warp * (zr * zi) + dy;
            zr = real;
            zi = im;
            
            // Modified exit condition - only check real part
            if(real > maxValue) {
                // Color based on escape time
                colors = HSVtoRGB(((((t/maxItterations) + colorShift) * bandwidth) % 1.0), 1, 1);
                // Set pixel color
                imageData.data[i] = colors.r;
                imageData.data[i+1] = colors.g;
                imageData.data[i+2] = colors.b;
                imageData.data[i+3] = 255; // Alpha
                break;
            }
        }
        
        // If the point is in the set (stable), color it white
        if(real <= maxValue) {
            imageData.data[i] = 255;
            imageData.data[i+1] = 255;
            imageData.data[i+2] = 255;
            imageData.data[i+3] = 255;
        }
    }
}

Gallery

Here are some of my favorite images created with this generator. Each represents a unique combination of parameters and regions of the Mandelbrot set.

Cosmic Swirl

High warp value creates this swirling effect

Electric Blue

High bandwidth creates multiple color repetitions

Rainbow Flow

Combination of medium detail and high color shift

Golden Spiral

Focused on a zoomed area with high detail

Neon Lines

High blob spread creates distinctive line patterns

Plasma Field

Negative warp value creates this interesting distortion

Purple Haze

Low detail with shifted color spectrum

Psychedelic Pools

Extreme detail focused on a small region

Previous Next

Future Work

While this generator already creates beautiful images, there are several enhancements I'm considering for future versions:

• GPU Acceleration - Implementing the algorithm as a WebGL shader for real-time rendering at higher resolutions
• Additional Fractal Types - Adding Julia sets, Burning Ship fractals, and other interesting mathematical visualizations
• Color Palette Controls - More advanced color mapping with custom palettes and gradient controls
• Animation Export - Creating looping animations by smoothly transitioning between parameter sets
• Parameter Presets - Saving and sharing interesting configurations

If you have suggestions for improvements or interesting modifications to the algorithm, feel free to reach out!