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

On 2015-01-21 18:20, Rik Cabanier wrote:
>
>
> On Wed, Jan 21, 2015 at 10:09 AM, Jonathan Rimmer 
> <jon.rimmer@gmail.com <mailto: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 |P^log_H (.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? 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.

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]

[1] http://www.foddy.net/2010/10/gentle-gradient/

Jon