The Mandelbrot Set

If we plot the escape times for points in this complex plane series, we end up with one of the most famous visualizations in mathematics.

The main cardioid is centered near the origin, with the period-2 bulb to its left at about −1.

World overview

If we consider an escape radius of 2, the world also has a radius of 2, since any points starting outside of the world diverge right away.

The set lies roughly on the real axis between −2 and 0.5, with the imaginary extent reaching about ±1.25.

Sub-structures

Zoomed-in to various parts of the Mandelbrot world.

Mandelbrot set equation

The equation using complex numbers is:

z is a complex number composed of real and imaginary parts:

Fractal images are generated by varying the value of c:

If we expand the complex squaring, the iteration reduces to:

Fractal coloring

Escape time: given a starting point (x0, y0), we can give each point a color by calculating the number of iterations it takes for the series to diverge, and the distance from zero when escaping.

const ESCAPE_THRESHOLD = 4;
const MAX_ITERATIONS = 1024;

function iterateUntilEscape(x0, y0) {
  let x = 0, y = 0;
  let numIterations = 0;
  while ((x*x + y*y <= ESCAPE_THRESHOLD) &&
         (numIterations < MAX_ITERATIONS)) {
    const x_next = x*x - y*y + x0;
    const y_next = 2*x*y + y0;
    x = x_next;
    y = y_next;
    numIterations++;
  }
  // Check the last permitted iterate too; radius 2 itself is not escape.
  const escaped = x*x + y*y > ESCAPE_THRESHOLD;
  return [numIterations, x*x + y*y, escaped];
}

We'll set the RGBA colors of every pixel in the image based on the number of iterations. Here's an example of a fiery yellow/red color palette by scaling just the green and alpha values of each pixel.

function getColor(numIterations) {
  return [
    255,                // red
    numIterations * 7,  // green
    0,                  // blue
    numIterations * 15  // alpha
  ];
}

Here's a general function for drawing fractals onto canvas elements. Changing the iterateUntilEscape function will change the drawn fractal.

function drawFractal(canvasEl, xRange, yRange, getColor) {
  const canvasWidth = canvasEl.width;
  const canvasHeight = canvasEl.height;
  const context = canvasEl.getContext('2d');
  const canvasImageData =
    context.createImageData(canvasWidth, canvasHeight);
  const image = canvasImageData.data;
  for (let i = 0; i < canvasHeight; i++) {
    for (let j = 0; j < canvasWidth; j++) {
      const x0 = xRange[0] +
        j*(xRange[1] - xRange[0]) / canvasWidth;
      const y0 = yRange[0] +
        i*(yRange[1] - yRange[0]) / canvasHeight;
      const [numIterations, escapeDistance, escaped] =
        iterateUntilEscape(x0, y0);
      const pixelIndex = 4*i*canvasWidth + 4*j;
      if (escaped) {
        const mu = getMu(numIterations, escapeDistance);
        const pixels = getColor({ numIterations, mu });
        for (let p = 0; p < 4; p++) {
          image[pixelIndex + p] = pixels[p];
        }
      }
    }
  }
  context.putImageData(canvasImageData, 0, 0);
}

Here's the main cardioid colored based on number of iterations alone.

By considering escape distances on a logarithmic scale, we can use this extra information to smooth the color transitions.

const ESCAPE_RADIUS = 2;

function getMu(numIterations, distanceSquared) {
  return numIterations + 1 -
    Math.log(0.5 * Math.log(distanceSquared)) /
    Math.log(ESCAPE_RADIUS);
}

function getColor(mu) {
  return [ 255, mu * 7, 0, mu * 15 ];
}

Here's the same image with continuous escape counts and a smooth, repeating navy, teal, ivory, and amber palette. Extra iterations after escape soften contour seams, while a 1,024-iteration budget reveals finer boundary detail.

Nebulabrots are a way of rendering fractals where pixels are colored based on how frequently they're visited while calculating the iterations until escape across the viewport.