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

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]

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://tv.adobe.com/watch/understanding-adobe-photoshop-cs6/designing-custom-gradients/

Jon

Received on Wednesday, 21 January 2015 18:09:30 UTC