JSFractal – JavaScript Fractal Explorer

JSFractal Screenshot

Have a play

You can try out JSFractal here.

What is it?

JSFractal is a web-based tool (written entirely client side in JavaScript) to allow you to explore fractals. Currently, only the Mandelbrot set is implemented but I hope to add support for switching to Julia sets and other types in the future.

You can drag-select on the fractal to choose an area to zoom in to. As you progress, you can see a timeline of previous points of the fractal, allowing you to switch to any prior state and continue in a different direction.

As well as allowing you to see previous states of the fractal, the timeline also supports a playback feature so you can watch the entire transition you’ve created zoom from start to finish.

At any point you can change the quality settings and size of the rendered fractal. Please note however, the higher the quality and the larger the fractal size – the longer you’ll wait! Currently there is only one colour scheme to choose from.

Finally, you can bookmark the page at any point. Returning to the URL will render the fractal that was showing at the point you bookmarked the page.

Have a go!.


With the current JavaScript performance arms race going on between V8, Webkit, Mozilla and Opera, I wanted something fun to write that would really push the browsers to the limits.

After picking up James Gleick’s Chaos again, my interest with fractals was renewed and hence this project. Obviously this isn’t the best medium for something as computationally heavy as a fractal exploration tool – but what the hell. It’s a good experiment!

On a reasonably spec’d machine and one of the pre-release ultra-mega-crazy-fast JavaScript engines it’s actually pretty usable. There’s a few tricks used along the way to boost performance which I’ll go into later.

How does it work?


JSFractal is written entirely in JavaScript with no server side components. It uses MooTools 1.2 and the canvas element. Thus, Internet Explorer need not apply. Sorry! I attempted to patch in support with Google’s ExplorerCanvas but it was so ridiculously slow that I had to drop it.


It has been tested and is thought to work in the following browsers:

  • Mozilla Firefox 1.5+
  • Safari 3+
  • Opera 9
  • Google Chrome

For reference, best performance is currently with Firefox 3.1 beta (with JIT JavaScript enabled) and Google Chrome.

Rendering techniques

Every time a fractal is generated, each pixel’s value needs to be calculated. On top of this, each pixel needs to be drawn individually. This means the key to fast performance is:

  • Efficient calculations for each pixel
  • Fast drawing to the canvas

I refined the fractal calculations as much as possible and had it running pretty fast. However, the actual rendering to the canvas proved to be a little trickier to speed up.

Initially I implemented rendering using the fillRect method of the canvas object to draw each pixel as a 1×1 rectangle. This … is … unsurprisingly … slow. There is a lot of overhead in setting up and executing each call (setting fillColor etc.). This meant, particularly on the faster JS engines, the bottleneck was primarily the rendering.

I love createImage(). This is a canvas method implemented in Firefox 3+ (and recent Webkit nightlies I believe) which returns an updateable pixel buffer object. This means we can call it once at the beginning of a render to retrieve access to the pixel buffer and write RGBA values directly (it’s implemented, effectively, as a single dimensional array so access is fast). It can then simply be redrawn back to the canvas at the end. Fast!

The above is great, but not all the current canvas supporting browsers have this method. The spec for it is still somewhat in the air. There’s debates as to quite what it should return – the number of pixels does not always equal the canvas size etc. (at least, in theory). In effect, this means that Chrome and Opera are both missing this method which means the only option is fillRect.

It seemed a great shame that Chrome, despite having a very fast JS engine, was lagging behind Firefox merely because of the awful fillRect() method of rendering.

After posting a comment to an unrelated article on a Spectrum Emulator on Ajaxian, cromwellian suggested the possibility of constructing DataURLs manually as an alternative.


Using DataURLs is actually crazy enough to work. And, even better, it’s pretty fast. It effectively builds up a bitmap image file on the fly, draws it to an Image object and finally draws the loaded Image to the canvas. The great thing about this technique is that it’s shifting the performance burden from the canvas element to the JavaScript engine. And since the current crop of browsers are getting pretty rapid in this area, it isn’t too much of a performance hit.

Measurements in Firefox 3.1b showed only about a 40% hit for using the DataURL method of rendering compared to writing directly to the pixel buffer. This sounds a lot but compared to fillRect() it’s a great improvement.

All three rendering methods are included in JSFractal (the most appropriate is chosen dependent on your browser features). Note: The fillRect() implementation is never actually used since the only browser than I know of that would require this is Internet Explorer.


There are a few issues I’d like to address which I’ll go into here.


Currently there is only one colour scheme available. What’s more, it’s not the most optimal algorithm for producing the prettiest fractals. I’d like to improve this – it’s more evident the deeper into the fractal you go (differentiations in colour become less, leading to large blocks of the same colour). Best results happen when the quality level is whacked up high and the size is set to the maximum.

Changing settings and the timeline

Changing the settings (size, quality, colours) half way through a fractal exploration will only update the current fractal. The timeline playback etc. will still function but previous fractal states may be stretched to fit meaning the animation may change in quality during playback.

There’s not a lot I can do about this, however, since I’d need to re-render all previous fractals which would be an unacceptable performance hit. I think the current solution of allowing you to change settings mid-way through and doing its best to compensate for the change is the current best compromise.


Over and out

Any feedback, bug reports or ideas for improvement very much appreciated.

Categories: Projects, JavaScript, MooTools

Extending DOM elements in Mootools ala jQuery » « Tap Trap – The year of procrastination


  1. This is pretty cool Javascript Russ. I also recently created a Mandelbrot explorer but in Flash: http://www.subblue.com/projects/mandelbrot

  2. Wow, the line about the “barren scene” of Mootools is a bit ill conceived, there are tons of plugins for Moo. In fact jQuery has actually copied Mootools on a crap load of plugins. Here is a list of awesome ones:


    That’s far from all I can think of…

  3. That’s great! Also, although you only have one color scheme so far, I think it’s very attractive.

    I just finished making something similar as a learning exercise, and I’m pretty happy with the results…


    Of course, my GUI still looks like something from 1995, and since I was trying not to use any external library at all, trying to get the mouse position for zooming was not practical (your UI is much friendlier). Still, I got the colorizing and painting (using canvas) optimized well enough to implement a reasonable color cycle animation, which makes me very happy.

Leave a Reply

Your email address will not be published.


Copyright © 2020 2tap.com

Theme by Anders NorenUp ↑