The Mandelbrot Set in JavaScript

JavaScript turns out to be a great language for toying with graphics and visualization. This morning, I spent a few hours learning about the Mandelbrot set and trying to code up a working implementation. The link below is one of the fruits of my labor:

Mandelbrot Set Generator

Mathematically, the Mandelbrot set is the set of points in the complex plane generated by iterating through the formula z = z^2 + c. For different initial values of c, the iteration can either produce a bounded sequence, or tend to infinity. Plotting the graph is a matter of placing a black dot for the values that generate a bounded sequence.



The next part of the problem is figuring out how to test for unbounded sequences. A good approximation can be reached by running through n iterations and quitting if the magnitude of z exceeds 2. The magnitude of a complex number with real part a and imaginary part b is sqrt(a^2 + b^2). For simple graphs, a reasonable value for n is 100.



Here's what a simple Mandelbrot set grapher in JavaScript looks like:

for (var x = 1; x < this.width; x++) {
    for (var y = 1; y < this.height; y++) {
      var count = 0;
      var size = 0;
      var cx = xcorner + ((x * zoom) / this.width);
      var cy = ycorner + ((y * zoom) / this.height);

      var zx = 0;
      var zy = 0;

      while (count < 100 && size <= 4) {
        count += 1;
        temp = (zx * zx) - (zy * zy);
        zy = (2 * zx * zy) + cy
        zx = temp + cx;
        size = (zx * zx) + (zy * zy);
      }

      this.Plot(x, y, count); // count serves as a good color hint.
    }
  }

By setting the xcorner, ycorner, and zoom variables, the above code allows you to pan across and zoom into various points in the set. To accommodate for pretty visualizations, you can use count to determine the color of the pixel.

A barebones implementation is available here: mandelbrot.js. Although it is not a very efficient implementation, it is very simple, and if you squint hard enough, you can see how the code relates to the visualization.



The Mandelbrot Set Generator is a harness I built with mandelbrot.js. Play with the parameters and let me know if you find anything interesting. It also turns out to be a good browser speed test.

To learn more about the Mandelbrot Set, see the Wikipedia article on the Mandelbrot Set.

Google Chrome Poster from Source Code

This holiday weekend, I decided to compose the Google Chrome logo using the browser's own source code. I used a combination of Ruby, ImageMagick, and a heavily hacked PDF library to generate this poster.

This is the icon that I used:



Here's what it looks like zoomed in:



And zoomed in some more:



Download the PDF in all it's vectorized glory. (Approx 1.5MB. Please don't link directly to the poster.)

Take it to your favourite print shop. Since it is based on vector graphics, it can be scaled up trivially without losing quality.

Happy Holidays!

P.S. If you ask me nicely, I might send you a 24-page letter-sized split of the poster so you can print it at home. (At nearly 50MB, it's too big for me to host here.)