END OF AN ERA, FRACTALFORUMS.COM IS CONTINUED ON FRACTALFORUMS.ORG

In order to define a palette, one can define some control points, and use linear interpolation to create a gradient. This is what every drawing software does. But when setting up multiple control points, it can resul in some "spikes", and the fractal rendered using this palette can be a bit rough. A way to do so is to preserve differentiability more than continuity. This results in this image :


Fig. 1 : Left, C⁰ interpolation ; right : C¹ interpolation

How to create such a palette ? First, let's take the example of my palette, composed as three lists palette_r, palette_g and palette_b, all of length 2052.
Plot the control points : on the x axis, plot the index of the point in the list, and on the y axis, the RGB value. To make things clear, a linear interpolation would look like this :


Fig. 2 : Linear interpolation for all three RGB values

We'll use a Bezier interpolation (cubic splines) to be able to keep the differientiability at the control points. By setting up control points, one can achieve a cubic spline : given 4 control points P₁, P₂, P₃ and P₄, we can define the cubic spline by B(t)=t³P₁+3t²(1-t)P₂+3t(1-t)²P₃+(1-t)³P₄ (this uses the Bernstein polynomials ; I won't explain the whole theory here, but it is really interesting, and you should check the Wikipedia articles to give it a start).


Fig. 3 : Cubic splines for the R palette

Given a palette point B, C or D (notations of the Figure 3), if one lines up the previous and the next control points with the palette point, then the differentiability is provided (one the several properties of the Bezier spline is that the vectors P₁P₃ and P₃P₄ are tangent to the curve). Ajusting the different control points, and doing so for the three palette lists results in this :


Fig. 4 : The results for the three palettes. It is clear that the linear interpolation gives "spikes" due to roughness around the palette control points. The "steps" for the cubic splines are because colours as defined with three integer values, and not continuous ones

At last, we can compare the results with the palette itself :


Fig. 5 : Comparison of the results

I did this all by hand, but yes, there is a way to do this fully automatically. I already spent a whole afternoon on this, I just didn't want this to become spending the whole week
If I get bored, I'll program an app that will allow the user to define the control points, and that will automatically compute the palette. Well, doesn't this already exist ?

For comparison, this is a result of sinus-shaped interpolation against linear interpolation as mentioned above:

Linear interpolation:


Sinus-shaped interpolation:


The function I used is:


         function GetColorValue(colorStart, colorEnd, colorIndex)
         {
            if(colorStart != colorEnd)
               colorIndex = (Math.sin(colorIndex * Math.PI - Math.PI / 2) + 1) / 2;

            return ~~(colorStart + (colorEnd - colorStart) * colorIndex);
         }


Where colorStart is the starting value of the color (e.g. 0), colorEnd is the ending value of the color (e.g. 255), and colorIndex is a value from 0 to 1 which points into the color palette which goes from colorStart to colorEnd. (Code is JavaScript.)

The reason why I'm not fully satisfied with this method is that the image sometimes looks like "washed out". So this should be an option which can be switched on or off by the user.

Edit 1:
Instead of

               colorIndex = (Math.sin(colorIndex * Math.PI - Math.PI / 2) + 1) / 2;

this also works:

               colorIndex = (Math.cos(colorIndex * Math.PI + Math.PI) + 1) / 2;

Interesting, but I still wonder why you don't use a divisor like tanh(n) in order to yield a result of exaxtly 1 for u == Nmax.