22 Aug 2012 jamesh   » (Master)

Javascript Mandelbrot Set Fractal Renderer

While at linux.conf.au earlier this year, I started hacking on a Mandelbrot Set fractal renderer implemented in JavaScript as a way to polish my JS skills.  In particular, I wanted to get to know the HTML5 Canvas and Worker APIs.

The results turned out pretty well.  Click on the image below to try it out:

Mandelbrot Set Renderer

Clicking anywhere on the fractal will zoom in.  You’ll need to reload the page to zoom out.  Zooming in while the fractal is still being rendered will interrupt the previous rendering job.

All the calculations are done via web workers, so should not block the UI.  The algorithms used to calculate these types of fractals are easy to parallelise, so it was not particularly difficult to add more workers.  One side effect of this is that the lines of the fractal don’t always get rendered in order.

With Chromium, this maxes out all six cores on my desktop system.  In contrast, Firefox only keeps three cores busy.  As workers are not directly tied to operating system threads, this may just mean that Firefox allocates fewer threads for running workers.  I haven’t tested any other browsers.

Browser technology certainly has progressed quite a bit in the last few years.

Syndicated 2011-03-08 14:15:27 from James Henstridge

Latest blog entries     Older blog entries

New Advogato Features

New HTML Parser: The long-awaited libxml2 based HTML parser code is live. It needs further work but already handles most markup better than the original parser.

Keep up with the latest Advogato features by reading the Advogato status blog.

If you're a C programmer with some spare time, take a look at the mod_virgule project page and help us with one of the tasks on the ToDo list!