Mandelbrot Set Renderer using JavaScript and the Canvas API

First published: Read time: 3 mins

A couple of weeks ago I happened to notice a tweet on Twitter by Christian Heilmann who linked to Geoff’s Mandelbrot Renderer. Geoff has created a tool that renders the Mandelbrot set using JavaScript and the Canvas API… amazing! I’ve been interested in fractals for a good few years but have never had the chance to look into generating them; so I decided to have a play with Geoff’s version and see what I could come up with.

The Mandelbrot set was named after Benoit Mandelbrot, who first saw the shape at IBM’s Thomas J. Watson Research Centre on March 1st 1980. It’s place is in a field of mathematics called complex dynamics, having not looked at any mathematics for a good few years it took me some time to get my head round exactly what was going on, and I still only have an inkling of what it all means.

Various forms found in the Mandelbrot Set
Here are just a few of the shapes I found using the tool. Why not try it yourself?

The image above – top left is arguably the most famous fractal; the three other shapes have been generated by zooming into the original fractal. The ‘image’ has infinite resolution, you can keep zooming in and it will always generate a new image. I’d say the only limitation is the browser / computer generating it.

One thing you will notice when zooming is the fact the Mandelbrot set is self-similar (or at least close to self-similar). At many points you will notice the original fractal shape, only on a smaller scale. This along with other repeating shapes creates a beautiful image purely generated by mathematics.

Note: Slight update to the render method here.

View a demo here. A few features I added:

  • Add render loader and restyled the form layout
  • User can switch between colour & grey-scale
  • Ability to select a range of hues the render uses
  • Possible to change the saturation and lightness of colours used
  • Ability to rotate the canvas
  • Change the width and height of the render area
  • Select from a set of zoom / position presets
  • A version using the Web Workers API in Firefox 3.5+ (See notes below on usage)

Note: As I mentioned above I have created a version using the Web Workers API found in Firefox 3.5+, but I strongly recommend using the standard version; I created it to see what difference it would make to the render time.

As it is, it makes no difference, in fact it actually makes it worse. The iteration calculation has been offloaded to a worker thread, the worker compiles the data then sends it back to the window. The window then loops through this the data and renders the image since worker threads don’t have access to the DOM for security reasons. This rendering tends to slow the browser down making the UI very slugish. I’ve tried not to use a setTimeout(“function()”, 0), to allow the JavaScript engine to catch up as, but it looks like I may have to in future versions. View a version using the Workers API here.

Big thanks to Geoff for putting the original together. Sliders and event handling was added using jQuery and the excellent jQuery UI. Preview carousel function used jCarousel.