Javascript Mandelbrot Plotter

Since I seem to like my Mandelbrot drawing test program so much, I thought that I should create an easy way to experiment with different parameters, then I can stop drawing the same old thing all the time... Plus it would be nice to see the Mandelbrot set in all it's graphical glory for a change.

But I've also been wanting an excuse to play around with some more html5 canvas stuff, so I decided that this was a good opportunity.

So I set myself these goals:

  1. draw the fractal in a reasonable amount of time (try not to make it too slow in other words)
  2. observe the fractal whilst in progress, so you don't have to stare at a blank page until the whole thing has rendered
  3. be able to select a region of the fractal (with a mouse click) and redraw it (zoomed in) showing the new parameters

That was the minimum functionality I was aiming for. I decided that if I could do that in javascript then it's something I could share with other Mandelbrot addicts, sorry, enthusiasts - and also use it myself of course. Perhaps I'll find some good new coordinates for future renderings in ASCII art.

I've also used it as an excuse to mess around with things like Twitter Bootstrap, which is a handy way to start a project from scratch.

I even tried to get it to work on older versions of IE which don't support HTML5, but whilst I found that I could use things like ExCanvas to bring canvas support to older versions of IE, the performance was poor when running my fractal code. So I gave up on that idea, it was locking up older versions of IE.

The other thing that I included in the code was a javascript colour palette generator, where you pass in two colours (as RGB values) and then linear interpolation is used to create a range of colours in between. Quite a nifty way to make the end result look a bit nicer.

The final code was then washed through the google closure javascript compiler for good measure.

So I got to play with a few different toys along the way... which was fun and I learned some new things.

So I'm reasonably happy with the result. It even works on iOS, (although it did lock up once on my iPhone) I'd probably have to tinker with a few things to optimise it for proper mobile use (but I doubt that I'll bother). Even on my older iPhone 3GS the speed is acceptable. Mental note: I should try it on the Raspberry Pi and see how fast (or slow) it is, or if it works at all...

So here is some example output created whilst I have been playing:


And you can try it for yourself here.

Happy fractaling. Enjoy!