GreyHope Projects Demos Tutorials

Mandelbrot Visualisation

Back Next

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).

Now we make a new copy of these positions.

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

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.

You may be wondering why we never talked about imaginary numbers which are part of the Mandelbrot Formula. Because we are dealing with code, we don't need to use imaginary numbers. Imaginary numbers are useful when dealing with the theory behind the maths. 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.

Back Next