Mandelbrot

I finally read about the Mandelbrot set and tried implementing it.

Above image generated live in your browser at page load.

The computation is surprisingly simple for how complex the result is.

I read the algorithm for computing the M-set in a book. It caused me some trouble, because it didn’t clarify two important details:

1. How many iterations to run the procedure for. I was doing 10. Turns out something like 50 or 100 is more appropriate.

2. That coloring each pixel based on which iteration its length exceeds the threshold—not just a binary indicator of whether it ever exceeds the threshold—produces a much better image. This fading implies the areas where the set continues in further detail. It’s kind of like anti-aliasing, I think.

It was fun making an ultra rudimentary complex numbers implementation.

Random thought on this: math feels very personal, and I think it should be that way. I’m not “good” at math in the sense of people who majored in math or did math-y topics in their PhDs. But for me, enjoying math is really about working at your own pace and comfort level. Of course, you still need to push yourself into discomfort if you want to grow, but it’s like, you want to be soaking in it and feeling good with your understanding. It’s a damn shame that so many people grow up not connecting with math, and I think most people don’t end up really knowing what math is about (since they just do computations in school).

I first drew rectangles for each sampled point (pixel), which was extremely slow (~2.6s). I checked out Daniel Shiffman’s implementation video, where he uses loadPixels() / updatePixels(). I switched to this and it is like 8–9 times faster (~0.3s).

Next, implementation with a shader, fast enough to run in real time. Click to zoom in, right-click to zoom out.

Red tent achieved by computing colors in HSL, keeping hue and saturation constant to pick the desired color, and setting the lightness to the Mandelbrot breakout iteration.