Mandelbrot Set Visualization

What is the Mandelbrot Set?

The Mandelbrot set,  named after Benoit Mandelbrot who first visualized the full set on a computer,  is a prime example of how beautiful and complex patterns can emerge from simple mathematical rules. The Mandelbrot set belongs to the fascinating world of fractals,  which means no matter how infinitely far you zoom in to it,  it always has more detail!

Known for its beautiful visuals with playful names such as seahorses,  elephant trunks,  antennae,  and spiral galaxies,  the set is visually stunning.

The Mandelbrot set is defined as the set of all complex numbers,  c such that when the function: f(z) = z^2 + c remains bounded when iterated infinitely,  starting from z = 0. In other words,  if applying f repeatedly does not cause the sequence to diverge to infinity,  then c is part of the set.

For example,  lets test c = 1:0^2 + 1 = 1,  1^2 + 1 = 2,  2^2 + 1 = 5,  5^2 + 1 = 26,  ...The values grow indefinitely,  so 1 is not in the Mandelbrot set.

Now lets try c = -1:0^2 - 1 = -1,  (-1)^2 - 1 = 0,  0^2 - 1 = -1,  0,  -1,  0,  -1,  ...This sequence cycles forever without escaping to infinity, so -1 is in the set.

All numbers in the Mandelbrot set lie within a circle of radius 2 centered at the origin in the complex plane. This means the set's total area is finite, estimated to be around 1.506484, though an exact formula is unknown. However, its perimeter is known;  It's infinite!

Technical Details

The Mandelbrot visualization on this website isn't a pre-rendered video. It is a real-time simulation running on your GPU using a custom WebGL fragment shader!

GPUs are particularly well-suited for this kind of computation because they can process every pixel simultaneously in what is called a fragment shader. This is far more efficient approach than a CPU-based approach, where each pixel would be processed sequentially.

To generate the image, each pixel is mapped to a corresponding point on the complex plane. Then, for every pixel on the screen, the shader:

1. Simulates f(z) = z^2 + c iteratively (over 100 times!).
2. Checks whether the magnitude of z surpasses an escape threshold.
3. Colors the pixel based on how many iterations it took to escape,  while points that never escape are colored black.

Since WebGL does't have built-in complex number operations, I implemented custom multiplication for complex numbers in the shader.

Dynamic Visualization

To make the visualization dynamic I introduced uniforms-special variables that allow data from the CPU to be passed into the GPU shader. Two key uniforms control the animation:

• Zoom: This scales the image over time at a consistent rate, independent of frame drops, ensuring smooth zooming.
• Point of Interest (POI): This determines which region of the Mandelbrot set is being displayed. I handpicked several fascinating locations, which the visualization transitions between as the zoom level reaches a threshold.

Each pixel's coordinates on the complex plane are computed as:coord = (pixel/canvasSize * 4 - (2, 2)) * zoom + POIThis ensures that the rendering smoothly navigates through different intricate areas of the set.