Method

When mapping the iteration count 1:1 to the color palette (linear mapping), the color distribution will be rather uneven because the
"density" of color bands increases with decreasing distance to the Mandelbrot set. In order to obtain a more even distribution of the
colors throughout the entire image, a non-linear function can be used to compress the colors at the lower end of the iteration count
and stretch them at the higher end. To achieve this, the iteration count **it** is first normalized to a value **x** from 0 to 1, then the
non-linear function is applied to **x**. The resulting value **x** which reaches from 0 to 1 as well is finally mapped to a color
within the palette.

If the iteration count **it** in the image reaches from 50 to 200, then **x** is calculated as follows:

x = (it - minIt) / (maxIt - minIt) = ([50...200] - 50) / (200 - 50) = ([0...150]) / 150 = [0...1]

Next the non-linear function is applied to **x**:

x = f(x)

Finally **x** is mapped to a palette of 256 colors:

color = x * 255 = [0...1] * 255 = [0...255]

Comparison Chart

The following comparison chart shows different methods for mapping an iteration count to a color in the Mandelbrot set.
Each image shows the same section of the Mandelbrot set, but with different linearities and – where applicable – different degrees
(parameter **n**) for the color gradient.
You can click on an image to open a JavaScript application in a new window / browser tab and draw the example image in full size (600 × 450 pixel).
There you can alter the parameters by yourself to see the effect "live".

Palette Interpolation

In the above examples the normalized value **x** is mapped to a palette of 256 colors using **linear interpolation**:

color = x * 255 = [0...1] * 255 = [0...255]

In most cases the results are satisfying, but for high values of the parameter **n** some colors will appear unnaturally bright,
resulting in a kind of "halo" around the Mandelbrot set. While this effect may be desirable, in some cases it can look ugly. To eliminate
the "halo" effect, the junctions between the color gradients can be smoothed by using **non-linear interpolation**. An obvious way
would be a Bézier curve, but this is a bit complicated to
calculate since two additional control points are required which are difficult to define automatically. Much easier to implement is
**cosinus-shaped interpolation**. For this, the palette points are connected by one half of a cosinus curve:

Dotted line: Linear interpolation

Full line: (Co-)sinusoid interpolation

x = (cos(x * Pi + Pi) + 1) / 2;

x = (sin(x * Pi - Pi / 2) + 1) / 2;

Example 1: Linear interpolation

Note the "halo" effect (yellow color) around the Mandelbrot set.

Example 1: (Co-)sinusoid interpolation

The "halo" effect is gone.

Example 2: Linear interpolation

Note the "halo" effect (white color) between the green and the pink color.

Example 2: (Co-)sinusoid interpolation

The white color is now smoother.

Homepage > Mandelbrot Set in JavaScript > Mathematics > Color Mapping