The Fractal card

Make a shape with infinite detail! Zoom in on the edge of the Mandelbrot set and there’s more, and then more, and then more… forever.

What counts

A program that draws a fractal: a shape that keeps having detail no matter how far you zoom in, usually because it’s made of smaller copies of itself. The Mandelbrot set, Julia sets, Sierpinski triangles, the Koch snowflake, fractal trees, 3D fractals like the Mandelbulb…

Your code has to make the fractal, so an image you found online doesn’t count. A still picture is fine, but it’s way cooler if we can zoom in, move around or tweak it ourselves. Building it as a shader works too, and it might fit the Shader card at the same time!

The easiest thing that counts

The Sierpinski triangle, with a trick called the chaos game. Pick the three corners of a triangle and start anywhere. Then, over and over: pick a random corner, jump halfway towards it, and draw a dot.

const corners = [[200, 10], [10, 390], [390, 390]];
let [x, y] = [200, 200];

for (let i = 0; i < 100000; i++) {
  const [cx, cy] = corners[Math.floor(Math.random() * 3)];
  x = (x + cx) / 2;
  y = (y + cy) / 2;
  ctx.fillRect(x, y, 1, 1);
}

It seems like random dots should give you a random mess, but a perfect Sierpinski triangle shows up instead. It’s honestly kind of spooky the first time you see it!

The Mandelbrot set

The famous one. For every pixel, take its position as a complex number c, start with z = 0, and keep doing z = z² + c. If z ever gets further than 2 from the middle, it’s going to fly off forever, so stop. Colour the pixel by how many steps that took.

let a = 0, b = 0, i = 0;
while (i < maxIterations && a * a + b * b <= 4) {
  [a, b] = [a * a - b * b + cx, 2 * a * b + cy];
  i++;
}

(That’s just z² + c written out, since (a + bi)² is a² − b² + 2abi.) Points that never escape are inside the set, and the wild stuff all happens along its edge.

Zooming deeper

• Use the GPU. Every pixel can be worked out on its own, which is exactly what shaders are good at. A Mandelbrot that takes a second per frame on the CPU can run at 60 FPS as a shader.
• Smooth the colours. Counting whole steps gives you stripy bands. Look up normalized iteration count for a formula that blends between them.
• You’ll run out of numbers. Regular 64-bit floats only have about 16 digits, so somewhere around a 10¹⁴× zoom everything turns into blocky mush. Deep zoom programs use perturbation theory to get past this, and it’s a really fun thing to figure out.

Going further

• L-systems. Start with a short string, keep replacing letters with patterns, then draw the result with turtle graphics. With the right rules you get ferns, trees and seaweed that look shockingly real. The Algorithmic Beauty of Plants is free on algorithmicbotany.org.
• 3D fractals. The Mandelbulb, the Menger sponge and friends are drawn with raymarching and distance estimators. Inigo Quilez’s articles at iquilezles.org explain how.
• Fractal landscapes. Stack noise on top of smaller noise to get mountains with detail at every scale. Look up fractal Brownian motion, or the diamond-square algorithm.
• The Buddhabrot. Instead of colouring the pixels, trace the paths of points as they escape the Mandelbrot set. You’ll see why it’s called that!
• Newton fractals. Use Newton’s method to solve an equation, and colour every starting point by which answer it ends up at. The borders between them are fractals too.

Fractals turn up in real life all over the place, too: coastlines, lightning, ferns, and Romanesco broccoli, which looks like it was rendered.

Before you ship

There’s a few things every project needs before we can approve it:

• It works. It doesn’t have to be finished, but the main thing it does should actually work.
• All of your code is public, on GitHub or somewhere like it.
• Anyone can try it, even someone who doesn’t code, in under two minutes of setup.
• Someone else could rebuild it from your repo and README.

What that looks like depends on where your fractal lives:

• On the web (or Shadertoy): a public link that stays up. GitHub Pages, Vercel, Render, Railway and Nest are all great, but please don’t use Streamlit. Don’t put it behind a login either!
• As a desktop app: a GitHub release with something people can download and run (an .exe, a .dmg, an .AppImage…). The source code on its own isn’t enough.
• As a command line tool: publish it as a package (on PyPI, crates.io, npm…) or as a download people can run straight away.

A zoom video is an awesome way to show it off, but it can’t be your demo. Put videos on YouTube or Vimeo, or upload an .mp4, rather than Google Drive.

Shipping one

• Demo: a web page where we can zoom and explore is ideal. Tell us about the best spots to visit!
• Screenshot: a deep zoom, or the prettiest view you found.
• README: which fractals it draws and how it works. Brag about your deepest zoom, and a video of a long zoom is always great to include.