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:
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.