×

Hmmm...

Your browser doesn't support webworkers. This project will still work, but it's going to be pretty slow and might cause your browser to freeze temporarily. Perhaps you should consider upgrading to a different browser that supports web workers..

×

Note: This project isn't finished yet. You'll just have to bear with the unfunctional UI.

Settings

Colouring Algorithm

Colouring Scheme

Calculation

The Mandelbrot Set

The Mandelbrot Set is a fractal that takes its name from Benoît Mandelbrot who first studied it. I learned about it when I was but a teenager, reading a book called Chaos, by James Gleick. I found the book pretty heavy going as I recall, but it did give me some sliver of understanding of how complex things can be built using simple rules. Without the science of chaos and fractals I would find it very difficult to accept that a genome of only about 800 megabytes can store most of the instructions needed to build a human.

The Maths

The points on the plot represent the real and imaginary parts of a variable usually called c. A point is in the set if zn remains bounded when iterating the scheme zn+1 = zn2 + c. It's basically as simple as that. The amazing thing is how much complexity is described by such a simple scheme. If it were possible to render the entire set, you would be able to see that the boundary is one continuous line, twisted into infinitesimal self-similar shapes. The boundary is infinitely long, but nevertheless fits within a finite area. Interestingly, you could argue that the coast of an island has similar properties.

The Implementation

It's not very difficult to produce a picture like the above. I've used the algorithm on the wikipedia page. That said, it's been a nice excuse to get stuck in to some of the new features in html5. The image is drawn by directly manipulating each of the pixels of a canvas element.

My initial attempt at this ran into issues when asked for large numbers of iterations, since the loop would freeze the browser. In order to be more responsive this uses web workers (where available), which allow your browser to do the calculation in a separate thread that does not block the user interface.

The coloring scheme is precalculated and then looped over to give a nice continuous feel. In order to do this neatly I had to write an HSV to RGB converter.

If you're interested you can have a look through the annotated coffeescript source or view the source for this project on github.