Mandelbrot Set Explorer

Drag to pan, scroll to zoom. Everything is rendered on your GPU, so the picture keeps up with you. Past a view width of about 10⁻⁵ the explorer switches to emulated double precision, which measurably carries it two more orders of magnitude before the arithmetic runs out.

This explorer needs WebGL2, which this browser did not provide.

360

Scroll or pinch to zoom · drag to pan · in Julia mode, move the pointer over the picture to pick the constant, then click to lock it.

Where to go first

The interesting structure is not spread evenly. These four coordinates land on the features people usually go looking for:

What you are looking at

Pick a point c on the plane. Start at z = 0 and apply z → z² + c over and over. For some choices of c the value stays bounded forever; for others it runs off to infinity. The Mandelbrot set is the set of points that stay bounded — the black region.

The colour is not decoration. It records how long a point took to escape. Points that blow up after two steps get one colour, points that survive three hundred steps get another, and the bands you see are the level sets of that escape time. The Detail slider is the cutoff: raise it and points that were merely slow to escape get resolved properly instead of being lumped in with the black interior. That is why deep zooms need a higher setting — thin filaments are made of very slow escapes.

The banding is smoothed rather than stepped. Instead of using the integer iteration count, the shader uses the standard continuous estimate n − log₂(log|z|), which removes the hard contour lines you get from rounding.

Why zoom has a floor

A GPU works in 32-bit floats, which carry about seven decimal digits. Once you have zoomed in far enough that neighbouring pixels differ only in the eighth digit, they round to the same number and the picture breaks into flat blocks. That happens at a view width of roughly 10⁻⁵ — much shallower than most people expect.

This explorer works around it by representing each coordinate as a pair of floats, one holding the value and one holding the part that did not fit, and by doing the arithmetic with the classic Dekker/Knuth error-free transformations. It costs several times more work per pixel, so it only switches on when the zoom actually needs it. The readout in the corner tells you which mode is running.

How far it actually gets, measured rather than assumed. A pair of 32-bit floats carries about 48 bits of mantissa, so on paper this should reach a view width near 10⁻¹¹. It does not. Rendering known-good coordinates at a ladder of zoom levels and comparing the result against the same computation in double precision on the CPU, the picture is correct down to about 10⁻⁷ and collapses to a flat colour by 10⁻⁸ — roughly three orders of magnitude short of what the arithmetic should give. The measurement was the same on an NVIDIA GPU through ANGLE/Direct3D 11 and in software rendering, and replacing the Dekker split with an exact bitwise split changed nothing.

The likely reason is that error-free transformations depend on expressions like t − (t − a) not being simplified, and a shader compiler is free to simplify exactly those, or to contract a multiply-add into a fused operation that skips the intermediate rounding the algorithm needs. GLSL ES 3.00 has no precise qualifier to forbid it. So the four preset views above all sit inside the range that was verified to render, rather than at a depth the page merely claims.

The Julia set connection

Tick Julia set and the same iteration runs with c held fixed while the starting z varies across the screen. Every point of the Mandelbrot set corresponds to one Julia set, and the correspondence is sharp: pick c inside the black region and the Julia set is a single connected blob; pick it outside and the Julia set shatters into disconnected dust. Sweeping the pointer along the boundary is the quickest way to see that happen.

What will you try next?

Share this tool

Part of Shake AI Lab — interactive experiments in mathematics and machine learning. · More tools · 日本語の解説記事