Last year, I wrote about having read a book about HTML5 called Programming HTML5 Applications, by Zachary Kessin. I panned this book in my review for having incomplete, and sometimes wrong information. Recently, I have been reading a book called HTML5 for Masterminds, by J D Gauchat, which covers many HTML5 topics in much more depth.
However, there was one example given in Zachary Kessin's book that really caught my attention: a demo that draws a plot of the Mandelbrot Fractal. I followed along with the demo, and soon, it really started growing on me. I found it very intriguing, and I decided that I wanted to create my own general-purpose fractal-drawing program.
The biggest inaccuracy that I've stumbled across in Kessin's book is that the way he describes how to draw the fractal is very slow! This is totally unacceptable because the demo is supposed to show how to efficiently perform computations with web workers. Following along with his example, once the color of each pixel on the canvas is determined, each pixel is colored using the fillRect method. If you have any interest in drawing a plot from mathematical calculations, I suggest that you look at this question on StackOverflow.
In order to introduce my new program, HTML5 Fractal Playground, I would like to introduce you to a few mathematical concepts that it uses. First of all, if you're reading this, you're likely familiar with imaginary and complex numbers. The plots generated by my program show the interior points of a fractal defined by an iterating function. The points outside the interior are colored based on how quickly they "escape". For example, the iterating function for the Mandelbrot Fractal is zn = zn - 12 + z0. We say that a point is a member of the Mandelbrot set and color it black if zn remains bounded for all values of n. In practice, there is a limit to the number of iterations we can compute. For points outside the Mandelbrot set, we choose a color based on how many iterations we must compute to ascertain that a point escapes. In the case of the Mandelbrot set, it is sufficient to check that if zn has magnitude greater than 2 for any n, the point escapes. This is one of many, many ways of coloring a Mandelbrot fractal plot; more are given in the Wikipedia article.
It is not that difficult to write a program that will do these computations and draw an image, but I wanted to do more than that.
I wanted to write a program that will draw a fractal imagine defined by *any* iterating function. In practice, my program will draw many different fractal images, but I haven't yet figured out how to make it work with iterating functions that use transcendental functions, so that's one limitation I'd like to overcome.
I would encourage you to try tinkering with the code a bit. It's a bit tricky because it's been annotated to work with asm.js. Don't worry about this if you make changes to the code. As long as the code is valid, the worst that can happen is that asm.js won't be able to compile it, so you'll still get a fractal plot, but it will be slower.
Finally, I would like to dedicate my work here to the late Benoit Mandelbrot who discovered and wrote about this wonderful world of iterating function generated fractals!
The Mandelbrot Fractal:
The Mandelbar Fractal:
The Burning Ships Fractal: