The Mandelbrot Set

The Vanilla Javascript version

Here's a standard imperative implementation of the Mandelbrot set. This is the first thing I've programmed in JS. The Mandelbrot set is produced by starting at 0, and iterating the complex-valued function z_n(c) = z_{n-1}^2 + c until either a maximum number of iterations is hit, or the magnitude of z_n exceeds 2. Because JavaScript is an academic, funcational language, this implementation uses a higher-order function that returns a z_n(z) function for different values of c. The canvas element below represents the complex plane. Dark pixels represent choices of c where the maximum number of iterations is hit, and we consider that point to be "in" the Mandelbrot set. Colored points are colored by the number of iterations they take to diverge.

Using WebGL

Maybe one day I'll get around to enhancing the CPU JS version above, but here is a simple WebGL explorer. Hover your mouse over a section of the set to zoom in. The fragment shader gets uniforms describing the canvas dimensions, as well as what subset of the complex plane is currently in view. Using those and the fragment coordinate, each pixel can be assigned a complex number, which is used as c in the iteration process. That fragment can then be colored accordingly.

After reaching the point that the image becomes noticably pixelated, the zooming slows and eventually reverses, until the full set is in view again. Then you can zoom in on another point.

A good next step could be to implement a big decimal type to get better resolution, because it currently hits the limits of a double's resolution relatively quickly. The coloring is also not particularly pretty at this point, but for a first attempt at shader art, I think I got what I wanted out of this little project.