Playing with Fractals in HTML5

Sunday, 04 October 2009 19:27

Resenting the idea that I've turned into some kind of W3C Nazi the last few weeks, I decided to indulge myself with something a little more frivolous last weekend. Not many would consider reading the HTML5 specs a departure from W3C standards, let alone "frivolous", but I had something particular in mind - graphics.

I have been shying away from HTML5 for a while because most references I hear to it are in relation to the 2D and 3D graphics capabilities being added via the new <canvas> element. I don't have anything against graphics on the web (so long as they don't destroy the document structure, or use flash), but I tend to avoid such things because I have absolutely no artistic talent. Seriously, I struggle to draw convincing stick men. The reason my website uses more-or-less the default Joomla! template is not because I don't care what it looks like, and it's certainly not that I lack the technical skills to modify it. The problem is that I can't imagine what I would change it to look like instead. That's basically the reason I use a CMS at all to be honest - for the templates.

But since the W3C dropped XHTML, I figured I need to start looking properly at (X)HTML5, and knowing how things are with the web, I expect that most of the new and interesting work with HTML5 is going to be centered around graphics. So what can an aesthetically-challenged nerd do with graphics? Well, for one thing, fractals!!! :)

I've always had a keen interest in the behavior of non-linear systems (chaos theory), of which fractals are (quite literally) the poster child. So I knew roughly how they worked, but had never until now bothered to draw one myself. A quick sample of the result - the Mandelbrot Set rendered using javascript onto a HTML5 canvas - is shown below:

You can click inside the image to zoom it, though with only 50 iterations used in this rendering, the level of detail degrades quite quickly. A larger version of the above, which is better for clear benchmark numbers, can be found located here.

One of the interesting things I discovered doing this, was the difference in performance between different browsers on different platforms. I'm not sure yet what optimisations Mozilla have done to the Windows build of Firefox, but version 3.5.3 renders this example around 20 times faster than the standard Ubuntu Firefox 3.5.3 build on Linux, running on a Windows 2000 VirtualBox machine in the same Linux session. And if I run Firefox 3.5.3 Windows build via Wine on the same system, rendering is as much as 40 times faster. Crazy!!!

So next job now...find out why Firefox performance sucks on Linux and see if I can help to fix that!

It's worth noting that Google's Chromium renders this on Linux at a similar speed as it does on Windows (which much closer to the Firefox performance on Windows), so there can't be any fundamental limitation in the underlying Linux software stack.

Last Updated on Wednesday, 07 October 2009 23:00

Comments

UPDATE: Mozilla Build from Will Daniels on Wed. Oct 07, 2009 reply

After some searching, I found reference to something called PGO (Profile Guided Optimisation) that is used by the Intel compiler which produces the Mozilla binaries. So, before delving into the Firefox code, I thought I'd best test the actual blobs that Mozilla distributes, to see how much of a difference that could make.

Well, it made exactly all the difference, as it turns out. The Mozilla build of Firefox for Linux is very almost as fast as it's Windows build running through Wine. That's a difference from ~6000ms to render the initial image using the Ubuntu gcc build, down to consistently <300ms for the Mozilla binaries!

However, the Mozilla build has a slightly different problem. The inverted colour "zoom" box used here on the mouseover event (which calls only the same getImageData and putImageData functions on the canvas context that are used for drawing the main image) becomes noticeably lagged.

So further investigation required still...

RE: Playing with Fractals in HTML5 from Will Daniels on Mon. Jan 18, 2010 reply

I forgot to update this thread. Eventually I discovered that the issue was not to do with PGO, it was that the Firefox JIT compiler for javascript is not 64-bit compliant.

However, the mozilla.org (32-bit) build of Firefox exhibits some strange behaviour. Despite the excellent rendering performance for the fractal images, the little zoom box which inverts colours in the area to be magnified, has some very noticeable lag compared to the Ubuntu 64-bit build (i.e. without the JS JIT), and indeed, all other browsers/builds/platforms I have tested.