Mandelbrot Visualisation

1. The Formula

This tutorial will start by explaining how the Mandelbrot Set is calculated. On future pages, we will look at some JavaScript examples.

The Mandelbrot Set is made with a grid of squares. Each square is shaded based on its position on the grid. In the example below, the red lines refer to the horizontal and vertical axis of the grid.

You will notice that this set doesn't have any colours. This is because the Mandelbrot formula only returns a single value. The colours of the set are made using an extra formula which we will cover later.

Now we are going to focus on a single square. First we use its original position to generate a new position. Then we continue to generate new positions until one falls outside the grid. The shade of our square will be determined by the amount of positions we generated. The example below illustrates how each square is shaded based on the generated positions.

In the example, the maximum amount of iterations is set to 10. This means that near the centre of the grid, the square gives up after 10 calculations.

Now we will focus on the actual calculations. Let's use a square with the coordinates (0.6, 0.4).

original_x = 0.6
original_y = 0.4

Now we make a new copy of these positions.

copy_x = original_x
copy_y = original_y

Then we will execute a calculation on the copies to create a new position.

set_x = copy_x² - copy_y²
set_y = 2 × copy_x × copy_y
copy_x = set_x + original_x
copy_y = set_y + original_y

After performing the calculations above, copy_x will equal 0.8 and copy_y will equal 0.88. These are our new coordinates. We keep repeating the code above until the coordinates go out of bounds.

The following JavaScript code snippet will show you the full algorithm.

After running the code above, the index value will determine the shade of our square. It should be a value between 0 and 10. In this case, index will be equal to 2. If we use different coordinates for our square, the index value will be different.

Surprisingly, that is all there is to the Mandelbrot Set. By applying the code above to each square, you will get incredible patterns. To get the RGB colour of each square, use the formula below. It will return colour values between 0 and 255.

rgb = (index × 25.5, index × 25.5, index × 25.5)

Some of you may be unable to grasp why the code for the Mandelbrot Set is so small. You may also be wondering why we never talked about imaginary numbers which are part of the Mandelbrot Formula. Because we are dealing mainly with code, we don't need to use imaginary numbers. If you are more interested in the maths, then feel free to do your own research.

In the next lesson, we will build our first Mandelbrot Set in JavaScript.