Re: [css4-images] Non-linear interpolation between gradient color stops

On Wed, Jan 21, 2015 at 11:22 AM, Jonathan Rimmer <jon.rimmer@gmail.com>
wrote:

>
> On 2015-01-21 18:20, Rik Cabanier wrote:
>
>
>
> On Wed, Jan 21, 2015 at 10:09 AM, Jonathan Rimmer <jon.rimmer@gmail.com>
> wrote:
>
>>  On 2015-01-21 17:33, Tab Atkins Jr. wrote:
>>
>>  I am pretty sure it isn't. What the spec describes as non-linear
>> interpolation appears to be the equivalent of Photoshop's mid-point
>> adjustment. This is not the same as interpolation via a curve. It's a
>> useful feature for making tweaks to gradient appearance, but all it really
>> does is create a pseudo color stop with a value that is linearly 50%
>> between two real stops in the color space. It then lets you move this point
>> back and forth between the end points. The result is that each half of the
>> transition takes up more or less room when the gradient is rasterised into
>> an image. It's difficult to describe this via prose. If you have access to
>> a copy of Photoshop, I suggest playing around with the gradient editor, or
>> there are tutorial videos online that demonstrate midpoint adjustment.[1]
>>
>
>  That is not what the spec [1] says:
>
>    1. Determine the location of the color hint
>    <http://dev.w3.org/csswg/css-images/#color-interpolation-hint> as a
>    percentage of the distance between the two color stops
>    <http://dev.w3.org/csswg/css-images/#color-stop>, denoted as a number
>    between 0 and 1, where 0 indicates the hint is placed right on the first color
>    stop <http://dev.w3.org/csswg/css-images/#color-stop>, and 1 indicates
>    the hint is placed right on the second color stop
>    <http://dev.w3.org/csswg/css-images/#color-stop>. Let this percentage
>    be H.
>    2. For any given point between the two color stops, determine the
>    point’s location as a percentage of the distance between the two color
>    stops <http://dev.w3.org/csswg/css-images/#color-stop>, in the same
>    way as the previous step. Let this percentage be P.
>    3. Let C, the color weighting at that point, be equal to PlogH(.5).
>    4. The color at that point is then a linear blend between the colors
>    of the two color stops <http://dev.w3.org/csswg/css-images/#color-stop>,
>    blending (1 - C)of the first stop and C of the second stop.
>
>  Note step 3 which calculates a new value
>
>  While moving the mid-point does mean that the interpolation between the
>> two stops is not strictly linear, the spec says that the between the colors
>> of the stops and the midpoint is still linear. Therefore, the path taken
>> through the color space will still be linear, with the associated problems
>> I described.
>>
>
> 1: http://dev.w3.org/csswg/css-images/#color-stop-syntax
>
>   Yeah, you're right. Sorry. I didn't follow the algorithm correctly. But
> even here, the non-linear part relates to the rate of progression between
> the color stops, rather than the route through the color space, right?
>

That is correct. The line through colorspace stays a line; it's just that
you no longer travel along it at a constant speed.


> What you describe as a "linear blend" in step 4 is also an interpolation,
> and it's that interpolation that I'm proposing could be controllable.
>

Maybe you can emulate it with multiple color stops?
Adobe's creative products will generate a specialized look-up table for
gradients that were designed in a different color space. (See 7.10.2 in the
PDF reference manual [1]) It's basically a more compact representation of
large number of color stops.


> I can see how this can be used to smooth out the end of a transition to a
> particular stop, but at the expense of a sharper transition at the
> beginning. This seems to bear out with my experiments in your CodePen, and
> in Illustrator. It can't seem to provide the same kind of uniformly smooth
> transition as the "smoothness" function in Photoshop, or produce the kind
> of gradients possible with Gentle Gradient?[1]
>

Photoshop calculates gradient stop transitions in a different way. Both
approaches have their advantages and drawbacks.

1:
http://www.adobe.com/content/dam/Adobe/en/devnet/acrobat/pdfs/PDF32000_2008.pdf