Mandelbrot Explorer

Mandelbrot explorer: zoom into the set in your browser, with the shader source open beside it

This is a GPU Mandelbrot renderer. Drag the picture to pan, scroll to zoom, and pull the sliders to change how deep the renderer looks and how the colours cycle. The whole thing is a single WebGL fragment shader running in a sandboxed frame in your browser — no image is fetched from a server, nothing you do is uploaded, and the frame has no access to the page around it. The right–hand panel is not a picture of the code, it is the actual editable source: change a line, hit Run, and the fractal changes.

It renders in real time because every pixel is independent. The GPU runs the same short loop on all of them at once, which is exactly the shape of problem a graphics card is built for.

What the set actually is, without the maths degree

Take a point on the screen. Treat its two coordinates as a single number with a horizontal part and a vertical part — a complex number, call it c. Now start from zero and apply one rule over and over:

z → z² + c

Square the current number, add c, repeat. That is the entire definition. Two things can happen. Either the value stays bounded forever, wandering around near the origin no matter how many times you repeat — or it eventually starts growing and runs away to infinity. The Mandelbrot set is simply the collection of points c for which it stays bounded. Those are drawn black. Everything else escapes.

"Square a complex number" is less exotic than it sounds. Written out in the coordinates the shader actually uses, it is two multiplications and a subtraction:

z = vec2(z.x*z.x - z.y*z.y, 2.0*z.x*z.y) + c;

You can see that line in the shader source on this page, inside a loop of at most 600 passes. Nothing else in the file is doing the fractal work. All the complexity in the image comes out of repeating those few operations.

What the colours mean

The colours are a stopwatch. For every escaping pixel the shader counts how many times it had to apply the rule before the value got large — specifically before |z| passed 16, which is the bailout radius this renderer uses — and paints the pixel according to that count. Points that escape almost immediately get one end of the palette; points that cling on for hundreds of iterations before finally flying off get the other. Points that never escape within your iteration budget are black.

So the bands you see are contour lines of escape speed. They crowd together near the boundary of the set because that is where the behaviour changes fastest, and they are what makes the edge look infinitely fringed rather than like a drawn outline.

There is one refinement worth knowing about, because it is the difference between a good fractal renderer and a crude one. A raw integer iteration count produces visible stair–steps: every pixel that escaped on pass 47 is one flat colour, every pixel that escaped on pass 48 is another. This renderer instead computes a continuous escape count, n + 1 − log(log|z|)/log 2, which turns the integer into a smoothly varying fraction using how far past the bailout radius the value overshot. The contours then blend into each other instead of banding. The colour itself comes from a cosine palette — three cosine waves at different phase offsets for red, green and blue — which is why the gradient loops seamlessly instead of hitting a hard seam when it wraps.

The controls this tool actually gives you

Press Controls under the preview to open the panel. These are the knobs, and their real ranges:

Two things about zoom that will save you confusion. First, the scroll wheel is clamped: each notch multiplies zoom by about 1.12, but the wheel will not take you below 0.15 or above 12. To go deeper than that you drag the Zoom slider, which goes to 400. Second, zooming is anchored to the centre of the canvas, not to your cursor. The working habit is therefore: drag the feature you want until it sits in the middle of the frame, then zoom. Trying to zoom toward a corner just pushes your target off the edge.

Around the preview there are four more buttons that are not fractal controls but are the reason people stay: Save PNG grabs the current frame, Record captures the canvas to a WebM video until you stop it, Fullscreen gives the shader the whole screen, and Console shows anything the code logs or any error it throws if you have been editing.

Iterations: the setting that actually matters

The boundary of the set is infinitely detailed, and the iteration count is your budget for resolving it. This is the single control most people leave alone and then wonder why their deep zoom looks like mud.

Here is the mechanism. To decide a pixel is outside, the renderer only has to watch it escape — which for most pixels happens quickly. To decide a pixel is inside, it has to fail to escape for the entire budget, and then give up and call it black. Near the boundary there are enormous numbers of points that escape only after hundreds of iterations. At a low budget, all of those get lumped in with the genuinely-inside points and painted black. The fine filigree you came to see is drawn as a solid blob.

So: as you zoom in, raise iterations. At the default view 180 is plenty and costs nothing. At a zoom in the tens you will want to be pushing toward the 600 ceiling, and you may notice the frame rate drop, because the cost is roughly linear in the iteration count on every pixel at once. If detail is missing, raise it; if the animation is stuttering and you are not zoomed far in, lower it.

Why deep zooms eventually go blocky, and why that is not a bug

Keep zooming and at some point the smooth curves dissolve into flat rectangular tiles. That is not the renderer failing to iterate enough — raising the iteration count will not fix it.

It is arithmetic precision running out. The shader works in single–precision 32–bit floating point, which carries roughly seven significant decimal digits. Each pixel's c is computed from the screen coordinate divided by the zoom, so as zoom grows, adjacent pixels are asked to represent complex numbers that differ in the eighth or ninth significant digit. Eventually they cannot: neighbouring pixels round to the identical value, get the identical iteration count, and render as one flat block. The picture stops being wrong in a subtle way and starts being visibly quantised.

Every GPU fractal renderer hits this wall. Going deeper requires software arithmetic — double–double or arbitrary precision, with perturbation techniques to keep it affordable — which is a fundamentally different and much slower program. Deep–zoom fractal videos that dive to magnifications of 10¹⁰⁰ are made that way, offline, over hours. A live shader is trading depth for the fact that it responds instantly.

Where to point it

The default view is centred at −0.5 on the real axis, which frames the whole set. From there, the landmarks:

• The main cardioid — the big heart–shaped body on the right. Every point inside it is a value of c whose orbit settles down to a single fixed value.
• The period–2 bulb — the large circle stuck to its left. Orbits here settle into a two–value cycle instead. Every smaller bulb around the rim corresponds to a longer repeating cycle, and the periods are arranged in a strict order along the boundary.
• Seahorse valley — the pinch where the cardioid meets the period–2 bulb, at roughly −0.75. This is the best first zoom on the whole set: the spiral seahorse tails get more elaborate the further you go and the structure never repeats exactly.
• Mini–brots — hunt anywhere along the filaments and you will find complete miniature copies of the entire set, each surrounded by its own decoration. They occur at every scale, which is the self–similarity people mean when they call the set fractal. Note that the copies are not exact: each one is distorted, and the tendrils around it look nothing like the tendrils around the original.
• The needle — the thin spike running left along the real axis toward −2. It looks one–dimensional at the default zoom and is not.

A good sequence for a first session: leave iterations at 180 and drag until the cardioid/bulb pinch is centred, wheel–zoom in a few notches, raise iterations to about 400, then switch to the Zoom slider and keep centring the feature you want before each step.

The Julia toggle

Flipping Julia set changes which quantity the pixel represents. In the Mandelbrot rendering, each pixel is a different c and every orbit starts at zero. In the Julia rendering, the whole image shares one single c — the seed — and each pixel is a different starting z. Same iteration rule, same escape–time colouring, opposite question.

The seed here is not fixed: it travels around a circle of radius 0.7885 at a rate you set with Seed speed, so the shape morphs continuously as you watch. Set the speed to 0 to hold one form still. The two pictures are tied together — a seed taken from inside the Mandelbrot set gives a connected Julia set, and a seed from outside gives one that has shattered into dust. That correspondence is the reason the Mandelbrot set matters mathematically rather than just decoratively: it is a map of which Julia sets are connected.

Editing the shader

The panel on the right has HTML, CSS, JS and EXPLAIN tabs. The fractal lives in the JS tab, as a GLSL fragment shader inside a template string, alongside the small amount of WebGL plumbing that compiles it and draws a single full–screen triangle. Everything is legible; there is no framework in the way.

• Edit any pane and press Run, or leave Auto–run ticked and it recompiles as you type.
• Reset restores the original source. Copy takes the current pane, Download .html gives you a single self–contained file that runs offline, and Share copies a link.
• If the shader fails to compile, the GLSL error appears in the Console panel with a line number.

Things worth trying: change the bailout test from dot(z, z) > 256.0 to a smaller threshold and watch the smooth colouring break down, because the continuous escape formula assumes the value has comfortably overshot. Swap the palette's phase offsets vec3(0.0, 0.6, 1.0) for other values to get an entirely different colour scheme. Or change the exponent — cube z instead of squaring it and you get a multibrot, which has two–fold rotational symmetry instead of the single cardioid (an exponent of d gives d − 1 lobes).

This renderer is one preset of a larger animation playground; the gallery under the preview switches to the other WebGL, canvas, CSS and three.js demos, all with their source open the same way.