Mandelbrot
Introduction
The Mandelbrot set is perhaps the most famous fractal. It was first visualised by French mathematician Benoit Mandelbrot in 1980, but was actually defined two years earlier by Robert W. Brooks and Peter Matelski, who also drew a rough version of it.
It is defined as the set of points which do not tend to infinity after repeatedly carrying out the operation zn+1 = zn2 + c on all c ∈ ℂ, with the initial condition z0 = 0. In simpler words, it means that you take a complex number, square it, then repeatedly add the complex number to the result then square the answer; if the answer remains close to zero and doesn't grow arbitrarily large, the original complex number is in the Mandelbrot set.
JavaScript doesn't have built-in complex number handling capabilities, but frameworks for doing so exist. However, I only needed three different operations to compute the Mandelbrot set, so I wrote three one-line functions myself, to add, square and find the modulus of complex numbers.
You can adjust the following three parameters to get the best balance between speed and accuracy for your device:
- Iterations
- This adjusts the amount of iterations to perform before deciding whether or not the point will escape a finite bound or not. A higher value will produce a more accurate result. Interestingly, the computation time isn't directly proportional to the amount of iterations: a lower number of iterations will mean your device has to carry out fewer calculations per point, but also produces a less refined set which has more points in it, so it will take longer to render, so there's a payoff between calculation time and render time. I've tried to optimise rendering so I think calculation time is the main factor here (and there'd only be a noticeable difference in render time when this value is so low that it doesn't produce a recognisable image anyway).
- Resolution
- This sets the distance between each point to test, so a lower value will mean more points are tested, thus producing a more accurate image. However, calculation time will rise with the square of this value, due to this setting the resolution in both the x and y direction.
- Size
- This simply determines the size of the image - or more precisely, the amount by which to scale up points (the points themselves are within a 2x2 circle centred on the origin, so this factor scales them up to a visible size).