Check out my
new book!
HTML5 Games book
23 pretty JavaScript fractals Burning ShipThe previous post about the size optimized Mandelbrot renderers didn't really do the Mandelbrot set justice in terms of mathematical and aesthetical prettiness. So, armed with my two good friends, Canvas and JavaScript, I set out to further explore the infinite beauty and complexity of both the Mandelbrot set and other fractals.

The result is a small application that lets you view visualizations (colored or b/w) of different fractals and zoom in by simply clicking the mouse. There are a few different fractals available:

  • Mandelbrot setMandelbrot set - The granddaddy of all fractals, the work of super smart mathemagician BenoĆ®t Mandelbrot. This one shouldn't need much introduction. Also available are a few Multibrots, variations on the Mandelbrot theme created by raising z to higher powers, rather than the standard z^2 of the Mandelbrot.




  • TricornTricorn - Another variation of the Mandelbrot set, also sometimes called the Mandelbar.

  • Burning Ship - Another famous fractal, named after the neat structures that appear when zooming in along the x-axis on the positive side. This is the one depicted at the very beginning of this post.



  • Julia set - Created much like the Mandelbrot set, but using a constant complex number C. Depending on the complex number used, this will render in any number of different ways. A selection of numbers are available. Dendrite, Siegel Disk, Douady's Rabbit and San Marco are all also variations of the Julia set.

    Julia set #3Julia set #5Douady's Rabbit


  • Julia cubed
    Julia Cubed - A variation of the Julia set, using z^3 instead of z^2. Much like the Multibrot variations of the Mandelbrot set.







  • Julia Sine #3
    Julia Sine/Cosine - More variations of the Julia set, now using trigonometric functions to create interesting structures. Note that these are a bit slower than the rest due to the many extra function calls.






The controls should be fairly self-explanatory, but here they are anyway:
  • Image size: The dimensions of the rendered image. Smaller = faster.
  • Color scheme: The color used when painting the fractal. Black/white might be a bit faster.
  • Smooth colors: A prettier but slower coloring algorithm. The image may look darker when using smooth colors. Only works well for Mandelbrot and Julia set (using z^2) and causes banding when zooming in.
  • Zoom factor: How much to zoom in when clicking.

Note that changing some of the settings causes an immediate re-render of the image.

Be warned that the further you zoom in on any of the fractals, the more CPU time is needed to render, and of course a large image size is more demanding than a small one. I've found Safari with latest WebKit nightly to be the fastest but YMMV. Firefox 3 seems to have memory issues when you zoom in more than a few times and there is of course no IE support.

And for the finish, here are a few images from a zoomed-in Mandelbrot set.

Mandelbrot zoom sequence, image 1Mandelbrot zoom sequence, image 2Mandelbrot zoom sequence, image 3

Play with JavaScript fractals here
⇓ 8 comments Drakim

So this was what was delaying your posting for so long. Heh, very cool, I'm jealous.

October 2, 2008 at 9:28 AM
Jacob Seidelin

Haha, yea. Well, that and we suddenly got a new apartment which ate a lot of time. Got that out of the way now, though :-)

October 2, 2008 at 9:55 AM
matt

Very pretty! I bet you love stargazing ;)

October 2, 2008 at 11:55 AM
kim young mok

what a cool ! it's really amazing !

October 6, 2008 at 9:41 PM
ingemar

wow, thats really cool! :)

November 22, 2008 at 3:53 AM
Thomas Hallock

I found that javascript fractals are good candidates for using the browser as a platform for distributed computing. Check it out: http://thomashallock.com/blog/?p=368

October 10, 2009 at 8:59 PM
Anonymous

Here is another JavaScript fractal renderer that uses HTML5 Canvas.

You can drag out a custom zoom window with the mouse. Includes Mandelbrot and 2 Julia sets.

August 7, 2010 at 8:01 AM
weboblog

Here is a Mandelbrot set, rendered with Javascript.

April 9, 2011 at 6:51 AM
Post a Comment