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

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:
>
>> On Wed, Jan 21, 2015 at 7:16 AM, Jonathan Rimmer <jon.rimmer@gmail.com>
>> wrote:
>>
>>> I was reading the Gradient Color-Stops section of the ED for images level
>>> 4[1]. It seems to me that, even with the proposed color interpolation
>>> hint,
>>> gradients are still underpowered for creating smooth and aesthetically
>>> satisfying gradients, of the kind produced by tools like Photoshop, or in
>>> natural phenomenon such as sunsets.
>>>
>>> When an interpolation hint is provided, it only lets the author move the
>>> position of the mid-point between two color stops. All the interpolation
>>> between color stops and to and from the mid-point is still done linearly.
>>> Therefore, this does not address the problem that linearly interpolating
>>> through RGB color space will not produce perceptually uniform
>>> transitions,
>>> and can produce ugly transitions at the intermediate stops.
>>>
>>> A solution to this to allow non-linear interpolation between color stops.
>>> Photoshop's "smoothness" option provides the ability to smooth out
>>> transitions, apparently by using cardinal splines to interpolate between
>>> the
>>> points[2]. Here is a comparison between the unsmoothed red->white->blue
>>> gradient used as an example in the ED -- charitably described by the
>>> spec as
>>> "nice" -- and one produced in Photoshop using 100% smoothness:
>>>
>> This is already allowed.  The color-stop section is way too longer and
>> needs better organization, I admit, but if you start from the
>> paragraph starting with "By default, this interpolation is linear",
>> you'll find the description of how color hints affect interpolation.
>> It is absolutely not linear.  The formula used comes from Adobe, so I
>> assume it matches what Photoshop does, or something like that.
>>
>
> 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