The Mandelbrot Set

Take any complex number c and start at zero. Square your current position and add c. Square the result and add c again. Keep going. If the numbers grow without bound, c is outside the Mandelbrot set. If they stay bounded forever, c is inside.

That is the whole definition: z → $z^{2}$ + c, iterated from z = 0.

The rule fits on a napkin. The picture it produces does not. The boundary of the set is a fractal — infinitely detailed, self-similar at every scale. Zoom in anywhere along the edge and new spirals, bulbs, and miniature copies of the whole set keep appearing, no matter how deep you go. Mathematicians have proved that the boundary has Hausdorff dimension 2, meaning it is as "area-filling" as a 2D surface, yet it has measure zero as a curve. Benoit Mandelbrot popularized it in 1980; the underlying mathematics, developed by Pierre Fatou and Gaston Julia in the 1910s, already hinted at the strangeness hiding inside simple complex iteration.

Each point is individually computable: you can decide, to any desired precision, whether a specific c lies inside or outside the set. But the global structure — the infinite detail of the boundary — is never exhausted by any finite computation. The set is the simplest known example of a mathematical object whose complexity is generated, not designed.

Click anywhere on the image to zoom in — the demo re-renders the Mandelbrot set centered on your click. Keep zooming along the boundary and watch new structure keep appearing.

<p class="hint">Click anywhere on the image to zoom in centered on that point. Zoom along the boundary to watch infinite detail unfold. The black region is inside the set; colors show how quickly the iteration escapes.</p>
<canvas id="canvas" width="480" height="340"></canvas>
<div class="status" id="status">Ready — click to zoom in.</div>
<div class="btns">
  <button id="reset" type="button">Reset</button>
  <button id="random" type="button" class="ghost">Random spot</button>
</div>

* { box-sizing: border-box; }
body { font-family: system-ui, sans-serif; color: #222; margin: 0; }
.hint { font-size: .9rem; color: #444; margin: 0 0 .7rem; line-height: 1.45; }
#canvas { display: block; cursor: crosshair; border-radius: 8px; width: 100%; max-width: 480px; border: 1px solid #cdd9e3; }
.status { font-size: .9rem; font-weight: 600; margin: .5rem 0; min-height: 1.3em; color: #1d3557; }
.btns { display: flex; gap: .5rem; flex-wrap: wrap; }
button { font: 600 14px system-ui, sans-serif; padding: .45rem .9rem; border: 1px solid #1d3557;
         background: #1d3557; color: #fff; border-radius: 8px; cursor: pointer; }
button.ghost { background: #fff; color: #1d3557; }

const fmt = (s, v) => s.replace(/%(\w+)%/g, (_, k) => String(v[k] ?? ''));
// Mandelbrot set renderer.
// For each pixel (px,py) on the canvas we map to a complex number c = (x + iy)
// in the current viewport, then iterate z -> z^2 + c from z=0.
// If |z| > 2 after at most MAX_ITER steps the point escapes; we color by
// iteration count using a smooth palette. Points that never escape are black (inside the Mandelbrot set).
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const W = canvas.width, H = canvas.height;
const MAX_ITER = 256;

// Default view: x in [-2.5, 1.0], y centered
let view = { cx: -0.7, cy: 0.0, r: 1.6 }; // cx,cy = center; r = half-width

// A set of interesting deep spots to jump to
const SPOTS = [
  { cx: -0.7269, cy: 0.1889, r: 0.003, label: 'Seahorse valley' },
  { cx: -0.1592, cy: 1.0317, r: 0.002, label: 'Lightning spiral' },
  { cx: -1.7687, cy: 0.0042, r: 0.004, label: 'Elephant valley tip' },
  { cx: -0.5251, cy: 0.5268, r: 0.005, label: 'Filament junction' },
];

function palette(t) {
  // t in [0,1]: smooth gradient through hues
  const r = Math.round(9*(1-t)*t*t*t*255);
  const g = Math.round(15*(1-t)*(1-t)*t*t*255);
  const b = Math.round(8.5*(1-t)*(1-t)*(1-t)*t*255);
  return [r, g, b];
}

function render() {
  const img = ctx.createImageData(W, H);
  const { cx, cy, r } = view;
  const aspect = H / W;
  const xMin = cx - r, xMax = cx + r;
  const yMin = cy - r * aspect, yMax = cy + r * aspect;

  for (let py = 0; py < H; py++) {
    const ci = yMin + (py / H) * (yMax - yMin);
    for (let px = 0; px < W; px++) {
      const cr = xMin + (px / W) * (xMax - xMin);
      // iterate z = z^2 + c
      let zr = 0, zi = 0, n = 0;
      while (n < MAX_ITER) {
        const zr2 = zr * zr, zi2 = zi * zi;
        if (zr2 + zi2 > 4) break;
        zi = 2 * zr * zi + ci;
        zr = zr2 - zi2 + cr;
        n++;
      }
      const idx = (py * W + px) * 4;
      if (n === MAX_ITER) {
        // inside: black
        img.data[idx] = img.data[idx+1] = img.data[idx+2] = 0;
      } else {
        // smooth coloring
        const t = n / MAX_ITER;
        const [red, green, blue] = palette(t);
        img.data[idx]   = red;
        img.data[idx+1] = green;
        img.data[idx+2] = blue;
      }
      img.data[idx+3] = 255;
    }
  }
  ctx.putImageData(img, 0, 0);
}

function setStatus(msg) { document.getElementById('status').textContent = msg; }

canvas.addEventListener('click', function(e) {
  const rect = canvas.getBoundingClientRect();
  const scaleX = W / rect.width, scaleY = H / rect.height;
  const px = (e.clientX - rect.left) * scaleX;
  const py = (e.clientY - rect.top) * scaleY;
  const aspect = H / W;
  const xMin = view.cx - view.r, xMax = view.cx + view.r;
  const yMin = view.cy - view.r * aspect, yMax = view.cy + view.r * aspect;
  view.cx = xMin + (px / W) * (xMax - xMin);
  view.cy = yMin + (py / H) * (yMax - yMin);
  view.r *= 0.35; // zoom in ~3×
  setStatus(fmt('Zoom ×%round% — center (%cx%, %cy%i)', { round: Math.round(1.6 / view.r), cx: view.cx.toFixed(6), cy: view.cy.toFixed(6) }));
  render();
});

document.getElementById('reset').addEventListener('click', function() {
  view = { cx: -0.7, cy: 0.0, r: 1.6 };
  setStatus('Reset to full view.');
  render();
});

document.getElementById('random').addEventListener('click', function() {
  const s = SPOTS[Math.floor(Math.random() * SPOTS.length)];
  view = { cx: s.cx, cy: s.cy, r: s.r };
  setStatus(fmt('Jumped to: %label%', { label: s.label }));
  render();
});

render();
console.log(fmt('Mandelbrot set rendered. MAX_ITER=%MAX_ITER%, initial view r=%r%', { MAX_ITER: MAX_ITER, r: view.r }));

<p class="hint">Click anywhere on the image to zoom in centered on that point. Zoom along the boundary to watch infinite detail unfold. The black region is inside the set; colors show how quickly the iteration escapes.</p>
<canvas id="canvas" width="480" height="340"></canvas>
<div class="status" id="status">Ready — click to zoom in.</div>
<div class="btns">
  <button id="reset" type="button">Reset</button>
  <button id="random" type="button" class="ghost">Random spot</button>
</div>

* { box-sizing: border-box; }
body { font-family: system-ui, sans-serif; color: #222; margin: 0; }
.hint { font-size: .9rem; color: #444; margin: 0 0 .7rem; line-height: 1.45; }
#canvas { display: block; cursor: crosshair; border-radius: 8px; width: 100%; max-width: 480px; border: 1px solid #cdd9e3; }
.status { font-size: .9rem; font-weight: 600; margin: .5rem 0; min-height: 1.3em; color: #1d3557; }
.btns { display: flex; gap: .5rem; flex-wrap: wrap; }
button { font: 600 14px system-ui, sans-serif; padding: .45rem .9rem; border: 1px solid #1d3557;
         background: #1d3557; color: #fff; border-radius: 8px; cursor: pointer; }
button.ghost { background: #fff; color: #1d3557; }

const fmt = (s, v) => s.replace(/%(\w+)%/g, (_, k) => String(v[k] ?? ''));
// Mandelbrot set renderer.
// For each pixel (px,py) on the canvas we map to a complex number c = (x + iy)
// in the current viewport, then iterate z -> z^2 + c from z=0.
// If |z| > 2 after at most MAX_ITER steps the point escapes; we color by
// iteration count using a smooth palette. Points that never escape are black (inside the Mandelbrot set).
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const W = canvas.width, H = canvas.height;
const MAX_ITER = 256;

// Default view: x in [-2.5, 1.0], y centered
let view = { cx: -0.7, cy: 0.0, r: 1.6 }; // cx,cy = center; r = half-width

// A set of interesting deep spots to jump to
const SPOTS = [
  { cx: -0.7269, cy: 0.1889, r: 0.003, label: 'Seahorse valley' },
  { cx: -0.1592, cy: 1.0317, r: 0.002, label: 'Lightning spiral' },
  { cx: -1.7687, cy: 0.0042, r: 0.004, label: 'Elephant valley tip' },
  { cx: -0.5251, cy: 0.5268, r: 0.005, label: 'Filament junction' },
];

function palette(t) {
  // t in [0,1]: smooth gradient through hues
  const r = Math.round(9*(1-t)*t*t*t*255);
  const g = Math.round(15*(1-t)*(1-t)*t*t*255);
  const b = Math.round(8.5*(1-t)*(1-t)*(1-t)*t*255);
  return [r, g, b];
}

function render() {
  const img = ctx.createImageData(W, H);
  const { cx, cy, r } = view;
  const aspect = H / W;
  const xMin = cx - r, xMax = cx + r;
  const yMin = cy - r * aspect, yMax = cy + r * aspect;

  for (let py = 0; py < H; py++) {
    const ci = yMin + (py / H) * (yMax - yMin);
    for (let px = 0; px < W; px++) {
      const cr = xMin + (px / W) * (xMax - xMin);
      // iterate z = z^2 + c
      let zr = 0, zi = 0, n = 0;
      while (n < MAX_ITER) {
        const zr2 = zr * zr, zi2 = zi * zi;
        if (zr2 + zi2 > 4) break;
        zi = 2 * zr * zi + ci;
        zr = zr2 - zi2 + cr;
        n++;
      }
      const idx = (py * W + px) * 4;
      if (n === MAX_ITER) {
        // inside: black
        img.data[idx] = img.data[idx+1] = img.data[idx+2] = 0;
      } else {
        // smooth coloring
        const t = n / MAX_ITER;
        const [red, green, blue] = palette(t);
        img.data[idx]   = red;
        img.data[idx+1] = green;
        img.data[idx+2] = blue;
      }
      img.data[idx+3] = 255;
    }
  }
  ctx.putImageData(img, 0, 0);
}

function setStatus(msg) { document.getElementById('status').textContent = msg; }

canvas.addEventListener('click', function(e) {
  const rect = canvas.getBoundingClientRect();
  const scaleX = W / rect.width, scaleY = H / rect.height;
  const px = (e.clientX - rect.left) * scaleX;
  const py = (e.clientY - rect.top) * scaleY;
  const aspect = H / W;
  const xMin = view.cx - view.r, xMax = view.cx + view.r;
  const yMin = view.cy - view.r * aspect, yMax = view.cy + view.r * aspect;
  view.cx = xMin + (px / W) * (xMax - xMin);
  view.cy = yMin + (py / H) * (yMax - yMin);
  view.r *= 0.35; // zoom in ~3×
  setStatus(fmt('Zoom ×%round% — center (%cx%, %cy%i)', { round: Math.round(1.6 / view.r), cx: view.cx.toFixed(6), cy: view.cy.toFixed(6) }));
  render();
});

document.getElementById('reset').addEventListener('click', function() {
  view = { cx: -0.7, cy: 0.0, r: 1.6 };
  setStatus('Reset to full view.');
  render();
});

document.getElementById('random').addEventListener('click', function() {
  const s = SPOTS[Math.floor(Math.random() * SPOTS.length)];
  view = { cx: s.cx, cy: s.cy, r: s.r };
  setStatus(fmt('Jumped to: %label%', { label: s.label }));
  render();
});

render();
console.log(fmt('Mandelbrot set rendered. MAX_ITER=%MAX_ITER%, initial view r=%r%', { MAX_ITER: MAX_ITER, r: view.r }));

The color of each pixel encodes how many iterations the sequence z=$z^{2}$+c takes to escape to infinity (or that it never escaped, shown in black). The fastest escape points are near the outside of the set; the slowest — those tantalizingly close to the boundary — take hundreds or thousands of steps, which is why the boundary region is where all the visual complexity concentrates. Reset any time with the Reset button, or try Random spot to jump to a pre-selected deep zoom location.

The Mandelbrot set sits at a remarkable intersection of the easy and the deep.

• Each point is computable. Given a complex number c and a precision ε, a finite computation can determine whether c is inside the set or within ε of the boundary. In that sense the set is well-behaved.
• The boundary is fractal. Its Hausdorff dimension is exactly 2 — proved by Mitsuhiro Shishikura in 1998. Although it is a curve (one-dimensional in the usual sense), it crinkles so violently that it fills two-dimensional area in the fractal sense.
• MLC is open. The Mandelbrot Locally Connected (MLC) conjecture, posed around 1982, asks whether the set is locally connected — roughly, whether you can always find a path between nearby boundary points that stays on the boundary. It is one of the central open problems in holomorphic dynamics. Adrien Douady and John Hubbard showed MLC would imply that every Julia set is either connected or a Cantor set, resolving a long-standing classification.
• Universality. Copies of the Mandelbrot set appear inside any family of complex maps with a critical point — not just $z^{2}$+c. It is in this sense a "universal" object for one-complex-variable dynamics.

So the complexity here is not computational hardness in the NP sense, but mathematical depth: a rule simple enough to explain to a child, yet still generating unsolved problems for professional mathematicians more than 40 years after Mandelbrot's computer pictures first appeared.

Contrast this with the halting problem: deciding membership in that set is uncomputable. The Mandelbrot set sits one level friendlier — computable point by point, yet globally inexhaustible. See also P vs NP for a parallel story about the gap between easy verification and hard discovery.

The study of z → $z^{2}$ + c and its cousins has shaped several real fields:

• Chaos theory and dynamical systems: the Mandelbrot set is the parameter space for a whole family of Julia sets, and understanding it helped establish how small changes in initial conditions can produce radically different long-term behavior — the mathematical heart of chaos.
• Antenna design: fractal antennas based on Mandelbrot-set-inspired shapes are more compact and broadband than traditional designs; several are used in mobile devices.
• Fractal image compression: in the 1990s, Michael Barnsley's iterated function systems — close relatives of the Mandelbrot iteration — were used for lossy image compression, exploiting the self-similarity that the Mandelbrot set exemplifies.
• Computer graphics and art: the set became one of the first objects to make mathematical beauty widely visible; modern rendering of deep zooms requires arbitrary-precision arithmetic and GPU parallelism, pushing both mathematics and computing.
• Education: the Mandelbrot set is probably the single most effective demonstration that simple rules can produce unlimited complexity — a key intuition for algorithm design, machine learning, and the study of emergence.

The Mandelbrot set is the clearest known proof that complexity does not require complicated rules. A two-character iteration — z → $z^{2}$ + c — produces a boundary that is infinitely detailed, self-similar, and still generating open mathematical questions decades after its discovery.

Every individual point is computable. The global picture is never complete. That gap — between the tractability of the local and the inexhaustibility of the global — is one of the deepest recurring themes in mathematics and computer science alike.

The next time you see a picture of the set, remember: every spiral, every bulb, every miniature copy was already implicit in the formula before a single pixel was drawn.