WebGPU Mandelbrot

On the left is the Mandelbrot set. Scroll to zoom in, click and drag to pan, and use the arrow keys to navigate.

I also have a little music visualization based on the Julia set here

The relationship that creates all this complexity is

where $c$ is a complex number and $d$ is the exponent. Each point in the image is a different value of $c$. When you hover, the dots are the progression of the specific point you're hovering over.

On the right is the Julia set, a sister set of the Mandelbrot set. It is defined by the same relationship, but $c$ is fixed and each point shows the evolution of $z=\text{x}+\text{y}i$. When you move the mouse, the Julia set updates to show the corresponding point. Also, technically the Julia set is the edge of the set shown - the set of points where arbitrarily small perturbations cause drastic changes in behavior.

If you move your mouse around near the edge of the Mandelbrot set, you'll notice something interesting. The points where $c$ is inside the Mandelbrot set are exactly the points where the Julia set is connected!

Zoom in enough, and you'll see the image starts to get pixelated. This is actually due to the limited precision of 32-bit floating point numbers in the shader. Unfortunately, WebGPU does not support 64-bit floating point numbers at the time of writing, which would allow for much more precision.

To view the code, head to the repository .