Animated Fractal Flame

Last evening I was playing around with genetic algorithms to do something you could call fractal image compression. I did so becaue I stumbled upon this cool page and wanted to play with something similar, unfortunately with limited success so far. But meanwhile I can show off an animated iterated function system (aka fractal flame).

It works like this: the two smaller images are the endpoints of the animation, and when you press "start" the larger view gets interpolated between the two. If you click any of the small images it gets replaced with a fresh, random flame.

This thing works with current Chromium and Firefox but there's something wrong with Opera that I'm not willing to investigate. See below. Internet Explorer fails as usual. Thanks to pinetree it works with IE 9 beta now. Just for the record: I get around 10 fps for "Good" quality using Chromium 5.0.375.99 on my Core 2 Duo E8400 @ 3 GHz.

Update I checked what's up with Opera, and as it turns out Opera does not implement the createImageData method. But then, it supports the getImageData method, and I can paint the pixels black by myself. There is a page about the HTML 5 canvas at the Opera dev center. It states:

Note: not all browsers implement createImageData. On such browsers, you need to obtain your ImageData object using the getImageData method.

Well guys, just fix it and you can remove that ambiguous note. Geeez... And there is still trouble ahead: Opera does not saturate the color values you put in that ImageData object. That means whenever the accumulated value for a pixel gets bigger than 255 freaky colors appear. I could check for that in the JavaScript, but I do not want to sacrifice performance for other browsers.