The infamous Mandelbrot set produced by successive iteration:
The Mandelbrot set is defined by repeated application of the equation
\[ z_{n+1} = z_n^2 + c \hspace{2em} , \hspace{2em} z_0 = 0 \]where the subscript \( n \) indicates the step in the iteration. One determines whether some starting number \( c \) is in the set by computing \( z_1 \) from the equation with \( z_0 \) as indicated, plugging the result back into the right-hand side to get \( z_2 \), plugging that back into the right-hand side to get \( z_3 \) and so on. If the successive numbers get larger and larger in size, then the initial number \( c \) is not in the set and needs to be excluded. The resulting shape at each step of the process is from points not excluded at that step.
The set in the end consists of points along the real axis as well as points in the complex plane. A complex number is of the form \( z = x + iy \), where the square of imaginary unit is \( i^2 = -1 \). The size of a complex number is given by its absolute value, which is calculated as the square root of the number times its complex conjugate:
\[ |z| = \sqrt{ z \overline{z} } = \sqrt{ (x + iy)(x - iy) } = \sqrt{ x^2 + y^2 } \]For the Mandelbrot set it is known that when this value exceeds two the point will not belong to the set. That is why the starting set of points above is a circle of radius two.
The calculation at each step in mathematical notation, with \( c = a + ib \), is
\[ z_{n+1} = (x_n + iy_n)^2 + a + ib = (x_n^2 - y_n^2 + a) + i (2x_ny_n + b) \]Since JavaScript does not handle imaginary numbers natively, the code works explicitly with the real and imaginary parts of complex numbers. Each entry in the array points contains the original real and imaginary parts in the first two positions, and the real and imaginary parts at each step of the iteration in the third and fourth positions. To speed up the code a bit, at each step squares of absolute values are compared to four, and the original point is excluded when this value is exceeded.
The final pattern appears much less dense that the starting circle because so much of the latter is discarded in the process and the image recenters at each step. More detail can of course be provided by decreasing the step value, but this makes the browser extremely sluggish.
Complete code for this example: