23 pretty JavaScript fractals

23 pretty JavaScript fractals graphics, javascript, math Burning Ship

The 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 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.
Tricorn - 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 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/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 1

Play with JavaScript fractals here posted Thursday, October 2, 2008 by Jacob Seidelin