After reading about the Mandelbrot set, I’ve found myself a brand new hobby: generating fractal images. If you don’t know what the Mandelbrot set is, you can think of it as just a bunch of complex numbers. Those numbers, however, can be used to generate colorful, alien patterns that can truly leave you spellbound. In fact, images of the Mandelbrot set can be so detailed that you can stare at them for hours and still keep finding interesting and unique patterns.
Create a new HTML document and add the following boilerplate code to it:
Create and initialize a new canvas now, whose width and height are both 600 px.
At this point, we can start working on the Mandelbrot set. It’s a very simple set that consists of complex numbers. How do you decide if a complex number belongs to the set? Well, you first try using it in the following equation:
Z = C*C + C // C is the complex number
You then use the result in the following equation:
Z' = Z * Z + C // Z is the previous result and C is the // same complex number
You repeat the above step again:
Z'' = Z' * Z' + C // Z' is the previous result and C is the // same complex number
Keep repeating the above steps dozens of times. If the result never exceeds a small fixed value, say 5 or 10, you can assume that the complex number belongs to the Mandelbrot set. Conversely, if the result exceeds the fixed value, and becomes a large number, you can be sure that the complex number doesn’t belong to the set.
You might now be wondering how do I choose the value of the complex number? Well, that depends on what you want to do with the Mandelbrot set. If you want to generate a fractal image with it, you can use the X and Y co-ordinates of points on your HTML5 canvas as the real and imaginary components of the complex number:
C = X + iY
However, you can’t use the X and Y co-ordinates directly. I mean, you can, but you’d end up with an image of the Mandelbrot set that is so far zoomed out that it would barely be visible. By dividing the coordinates by a large value, you zoom in to the image.
Furthermore, you can move around the fractal by subtracting small numbers from the coordinates.
Accordingly, you can add the following code to your file:
Of course, we must define the
checkIfBelongsToMandelbrotSet() function now, which returns a
false value. Here’s the code you can add to it:
If you run the code now, you’d see something like this:
A very weird image indeed, but not unexpected. That’s what the Mandelbrot set fractal looks like when you are zoomed in. By changing the values of the
magnificationFactor to 200, the
panX to 2 and
panY to 1.5, you’ll see this:
If you’ve seen the Mandelbrot set fractal earlier, the above image might seem familiar. But there’s still a lot of noise in it. By increasing the number of iterations in the
checkIfBelongsToMandelbrotSet() function to about 100, you’ll generate the following image, which looks much better:
How about adding some color now? To do so, we must change our
checkIfBelongsToMandelbrotSet() function such that it returns a number instead of a boolean value. For now, let’s return a number based on the number of iterations it takes to exceed our limit:
You must also update the rendering logic to use the color. The easiest way to do so is to use the CSS
If you refresh your page, you should this now:
If that’s not impressive enough, try zooming in with the following values:
You’ll get something like this:
checkIfBelongsToMandelbrotSet() function proportionately. Otherwise, the patterns in the fractal won’t be sharp and distinct. Here’s the same fractal as the above image, at 300 iterations.