About Mandelbrot Viewer
by Brent Aliverti
Last updated 2 December 2000

Overview
I wrote this Mandelbrot viewer as a JavaScript programming exercise. Testing environment was a PC running IE5.5. It will probably work in IE4 and IE5 as well.

About the Mandelbrot Set
The Mandelbrot Set is one of the better known examples of fractal mathematics. It is a 2D plot of a fairly simple complex equation (apologies for the seeming oxymoron). Complex equations have a "real" part and an "imaginary" part. In this case, the "real" part is graphed on the X-axis while the "imaginary" part is on the Y-axis. The area around the perimeter of the set is most interesting, with colors assigned to represent the number of iterations before the equation approaches infinity. Zooming in on these perimeter regions reveal patterns of infinite complexity, twisting and spiraling inward. Helpful references for me in writing the original app were "The Beauty of Fractals" by H.O. Peitgen and P.H. Richter, and A.K. Dewdney's "Computer Recreations" columns from the August 85 and November 87 issues of Scientific American.

Why I Wrote This Applet
I've been making an active effort to learn JavaScript. I learn best if I have a project, so I decided to port over a Mandelbrot set viewer I had written in Visual Basic several years ago. Many of the programming concepts were quite familiar, but Javascript syntax can be pretty unforgiving...forget one quote or curly bracket and your script won't work. Once I had the basic graph going, I started adding enhancements which meant learning more Javascript and brushing up on Cascading Style Sheets (CSS) and forms.

Specifics on Javascript Implementation
First, I should mention that Javascript is a pretty inefficient language to use for such a computation-intensive application as this. Java would be much better. Furthermore, because Javascript lacks any methods for simply plotting points, I had to use standard HTML elements to plot the set. I chose to use table cells (TD) because I can set the background color for each individually. I use the HSB (Hue Saturation Brightness) color model for assigning colors. Unfortunately, Javascript doesn't support HSB natively so I borrowed a routine to convert HSB to RGB hex. Navigation is simple and involves choosing a magnification option and then clicking on the graphic. Increasing the "Maximum Iterations" value will yield enhanced detail. The total area is hard-coded to 360 pixels square, but the cell size is user-settable all the way down to 1-pixel. (NOTE: A 1-pixel cell size results in 360x360 TD definitions or 129,600 TD cells...that's one big table! It takes some time, but it does render on my PII-400 w/ 128MB RAM, but on machines with less resources, beware. Zoom/centering functionality is not available for cell sizes smaller than three, since this functionality requires additional event handling to be put into each TD def).


 
back to antimatter containment field