Benoit Mandelbrot was the first mathmetician to extensively study and write about fractals; images that contain infinitely repeating patterns. In particular, he was interested in fractals generated by iterating functions. What this means is that Mandelbrot's fractals were generated by calculating a sequence of numbers for each point in the complex plane. The sequence is defined by a simple function. If the sequence is bounded for a particular starting point, then that point belongs to a set generated by the sequence. Mandelbrot famously pointed out that to render his eponymous "Mandelbrot set", all you have to do is add and multiply; you don't even have to subtract or divide. You just have to do it billions of times! The odds are that if you're reading this, you're sitting in front of a machine capable of doing these calculations.
See Wikipedia for more background about the Mandelbrot set fractal. There is also an excellent PBS documentary about fractals, including an interview with the late Benoit Mandelbrot himself. It's on YouTube.
While teaching myself HTML5 programming, I came across an example that shows how to use HTML5 to draw the Mandelbrot set fractal. I was mesmerized by the complex images rendered by doing these simple, but extensive calculations and I set out to write my own software to render fractals.
While the images are very beautiful, this program was originally written as a learning exercise or etude.
I hate to write notes about browser compatibility as if we are trapped in the late 90s. However, I want you to know that HTML5 Fractal Playground is optimized to use experimental features of the new version of Firefox for very fast calculations. Chrome should yield acceptable performance, as well. However, this program runs very poorly in Internet Explorer.
This program also uses the W3C standard touch events. I am using an experimental library to emulate these events in IE, which doesn't support them.
The core functionality of HTML5 Fractal Playground is to draw fractal images defined by a generating
function. The function has two variables: z and c. z refers to the previous element in the sequence
and c refers to the first element of the sequence. For example, in the sequence defined by f(z, c) = z ^ 2 + c,
you would compute the sequence for the number 1 as follows
z0 = 1
z1 = z02 + c = 12 + 1 = 2
z2 = z12 + c = 22 + 1 = 5
z3 = z22 + c = 52 + 1 = 26
As you can see, this sequence goes to infinity, so 1 would not be in this fractal set.
HTML5 Fractal Playground provides many functions that can be used to define the iterating function. It provides the operators +, -, *, /, and ^. Please note that a limitation of the current version of HTML5 Fractal Playground is that when a number is raised to a power, that power has to be a whole number. In addition to the operators, the following functions are provided:
real: real number representing the real part of a complex number
imag: real number representing the imaginary part of a complex number
conj: the complex conjugate of a number
arg: the complex argument
sin: sine
cos: cosine
sh: hyperbolic sine
ch: hyperbolic cosine
exp: natural exponential
ln: natural log
Expanding the supported functions is in my plans for a future release.
You do not need to know anything about these functions to draw beautiful fractals with HTML5 Fractal Playground. By default, you can simply select the iterating function from a list of functions known to generate beautiful fractals. The ability to specify your own iterating function is for power users.
A major point of interest when it comes to fractals is that the amount of detail in the fractal is infinite. No matter how big you draw the fractal, there is always more detail to be revealed by drawing bigger.
To that end, HTML5 Fractal Playground allows you to zoom in on any fractal you draw with it. In order to zoom, simply draw a fractal and then use the mouse to highlight an area of the fractal and click the [Draw] button. If your browser supports it, you can also select a region by touching the corners of the region on a touchscreen; you can trigger the zoom by touching a third point.
The mathematics engine in HTML5 Fractal Playground will allow you to zoom quite far, but eventually, you will reach the limits of the precision supported by the program, and the images will pixelate.
You can click the [Reset Plot Location] button to go back to the original fractal, or you can use the back and forward buttons in your browser.
Finally, you can click the [Save] button to save any image rendered by HTML5 Fractal Playground on your local machine.