Understanding and Programming the Mandelbrot Set

Mathematical explanation and step-by-step implementation guide

What is the Mandelbrot Set?

The Mandelbrot set is a mathematical set of complex numbers that produces beautiful fractal patterns when visualised. It was discovered by Benoit Mandelbrot in 1980 and has become one of the most famous examples of mathematical beauty.

The set is defined by a surprisingly simple iterative formula applied to complex numbers, yet it produces infinitely complex patterns. What makes it special is that you can zoom into the boundary forever and keep finding new intricate structures at every scale.

The Mathematics

Complex Numbers Review

Complex numbers have the form a + bi, where:

a is the real part (horizontal position)
b is the imaginary part (vertical position)
i is the imaginary unit where i² = -1

To multiply complex numbers: (a + bi)(c + di) = (ac - bd) + (ad + bc)i

The Mandelbrot Formula

For each complex number c, we test whether it belongs to the Mandelbrot set by repeatedly applying this formula:

z_n+1 = z_n² + c

Starting with z₀ = 0, we calculate:

z₁ = z₀² + c = 0² + c = c
z₂ = z₁² + c = c² + c
z₃ = z₂² + c = (c² + c)² + c
and so on...

The Membership Test

Key Concept: A complex number c is in the Mandelbrot set if the sequence stays bounded (doesn't "escape to infinity") as we iterate forever.

In practice, we use two rules to decide if a number is in the set:

Escape condition: If |z| > 2 at any point, the sequence will definitely escape to infinity. The number is NOT in the set.
Iteration limit: If we've done many iterations (e.g., 100) and |z| is still ≤ 2, we assume the number IS in the set.

Note: The magnitude |z| of a complex number z = a + bi is calculated as √(a² + b²)

Worked Example

Let's test whether c = 0.3 + 0.5i is in the Mandelbrot set:

z₀ = 0
z₁ = 0² + (0.3 + 0.5i) = 0.3 + 0.5i
z₂ = (0.3 + 0.5i)² + (0.3 + 0.5i) = −0.16 + 0.3i + 0.3 + 0.5i = 0.14 + 0.8i
z₃ = (0.14 + 0.8i)² + (0.3 + 0.5i) = −0.6196 + 0.224i + 0.3 + 0.5i = −0.3196 + 0.724i
Continue iterating...

For this value, |z| remains less than 2 throughout many iterations, so c = 0.3 + 0.5i is in the Mandelbrot set.

Colouring and Visualisation

The beautiful colours you see in Mandelbrot images aren't part of the mathematical set itself — the Mandelbrot set is typically shown as dark! The colours represent how quickly points outside the set escape to infinity:

Dark pixels: Points in the set (never escape)
Coloured pixels: Points outside the set — colour indicates how many iterations before escape
Lighter colours: Typically points that escape quickly (few iterations)
Darker colours: Points that take many iterations to escape

The main Mandelscope explorer uses "Smooth Periodic Wave Colouring" which creates fluid rainbow patterns by using the final iteration count and the magnitude of z to generate smooth, continuous colour transitions.

Why Complex Numbers?

Complex numbers are essential because they give us a 2D space to explore. The real part of c corresponds to the x-axis (horizontal position), and the imaginary part corresponds to the y-axis (vertical position). This allows us to visualise the set as an image where each pixel represents testing a different complex number.

Connection to Julia Sets

Julia sets are closely related to the Mandelbrot set: instead of fixing z₀ = 0 and varying c, we fix c to a specific value and vary z₀. Each point in the Mandelbrot set corresponds to a different Julia set. Points inside the Mandelbrot set produce connected Julia sets, while points outside produce disconnected "dust" Julia sets.

You can explore Julia sets in the main Mandelscope application by clicking on any point in the Mandelbrot view!

The Algorithm

Key Implementation Details

Coordinate mapping: We map pixel coordinates (0 to width/height) to complex plane coordinates (e.g., -2.5 to 1.0)
Optimisation: We check |z|² > 4 instead of |z| > 2 to avoid calculating square roots (since (√x)² = x, and 2² = 4)
Iteration count: Typical values are 50-500. Higher values show more detail but take longer to compute
The region: The standard view shows real values from -2.5 to 1.0, imaginary values from -1.25 to 1.25

Working Implementation

Here's a complete, minimal implementation in JavaScript using a 2D canvas. This code draws a simple two-colour Mandelbrot set with no additional features.

600×450 pixels, 100 iterations per point

JavaScript Implementation

Editable Code: Try modifying the code below and click "Run Code" to see your changes!

// Get the canvas and its 2D rendering context
const canvas = document.getElementById('mandelbrot-canvas');
const ctx = canvas.getContext('2d');

// Canvas dimensions
const width = canvas.width;
const height = canvas.height;

// Mandelbrot parameters
const maxIterations = 100;

// Complex plane viewing window
const xMin = -2.5;
const xMax = 1.0;
const yMin = -1.25;
const yMax = 1.25;

/**
 * Test if a complex number c is in the Mandelbrot set
 * @param {number} cReal - Real part of c
 * @param {number} cImag - Imaginary part of c
 * @param {number} maxIter - Maximum iterations before giving up
 * @returns {number} - Number of iterations before escape (or maxIter if didn't escape)
 */
function mandelbrot(cReal, cImag, maxIter) {
    let zReal = 0;
    let zImag = 0;
    
    for (let i = 0; i < maxIter; i++) {
        // Calculate |z|²
        const magnitudeSquared = zReal * zReal + zImag * zImag;
        
        // Check escape condition
        if (magnitudeSquared > 4) {
            return i; // Escaped after i iterations
        }
        
        // Calculate z² = (zReal + zImag*i)²
        const newReal = zReal * zReal - zImag * zImag;
        const newImag = 2 * zReal * zImag;
        
        // Calculate z² + c
        zReal = newReal + cReal;
        zImag = newImag + cImag;
    }
    
    return maxIter; // Didn't escape - in the set
}

/**
 * Draw the Mandelbrot set to the canvas
 */
function drawMandelbrot() {
    // Loop through every pixel
    for (let py = 0; py < height; py++) {
        for (let px = 0; px < width; px++) {
            // Map pixel coordinate to complex plane
            const cReal = xMin + (px / width) * (xMax - xMin);
            const cImag = yMin + (py / height) * (yMax - yMin);
            
            // Test if this point is in the Mandelbrot set
            const iterations = mandelbrot(cReal, cImag, maxIterations);
            
            // Set pixel colour
            if (iterations === maxIterations) {
                ctx.fillStyle = '#1e3a5f';  // In the set - dark blue
            } else {
                ctx.fillStyle = '#8dd5e7';  // Not in the set - soft cyan
            }
            
            // Draw a 1×1 pixel rectangle at position (px, py)
            ctx.fillRect(px, py, 1, 1);
        }
    }
}

// Draw the Mandelbrot set
drawMandelbrot();

Try These Experiments:

Change maxIterations to 50 or 200 to see how detail changes
Modify the viewing window (xMin, xMax, yMin, yMax) to zoom in
Change the colours: try '#ff5555', '#88ff88', or experiment with different hex codes
Add a third colour for points that escape quickly: if (iterations < 10) ctx.fillStyle = '#999';

← Back to Mandelscope