Cosine-Proportional Transitions

When using a cline in a visual design, one may choose from an indefinite number of continuous functions to create a smooth gradient of colors within an area. The most commonly used is a linear function, for example:

1, 2, 3, 4, …

or:

9.75, 9.50, 9.25, 9.00, 8.75 …

In other words, the chosen characteristic (spectrum, brightness, vividness) at each color-point in the cline changes by the same amount at each step.

However, in some types of transition, the linear progression does not look right in the final image. One of the most common instances of this problem is the boundary zone between two distinct colors; for example, the transition from shadow to sunlight. In this case, a progression proportional to the values of the cosine function is more appropriate.

Below is a table comparing examples for the two types of numeric progressions. Each successive functional value descends from twenty to zero. The first one descends in a standard linear progression, one unit at a time. The second descends in steps proportional to values produced by the cosine function. Notice that the two progressions meet at the beginning (20.00), middle (10.00), and end (00.00):

 
The following graphics provide a visual representation of those same two functions:

To see how the two functions differ in their representation of a transition from one color area to another, compare these two graphics:

When the linear function is used, the eye perceives the beginning or end of the transition as an abrupt drop-off from one color to the other, rather than a smooth gradient. However, when the cosine-proportional function is used, the result is a continuous transition whose beginning and end are not perceptible.

Below is a magnified version of the cosine-proportional transition between the same two colors: