facelessuser / coloraide

A library to aid in using colors
https://facelessuser.github.io/coloraide
MIT License
195 stars 12 forks source link

Continuous Linear interpolator #293

Closed facelessuser closed 1 year ago

facelessuser commented 1 year ago

Currently, linear mode for interpolation is very much like CSS. Two colors are evaluated at a time, and undefined values are evaluated only between those two colors. This is okay, and helps us provide a CSS like experience, but consider the following examples.

We want to take a list of colors and set all the lightness to undefined except the start and end colors which will have 0 and 1 respectively for lightness. The second case does this for alpha. The results are not great

Screenshot 2023-03-20 at 8 51 35 PM

But in our spline interpolations, we had to create a new undefined handler as 4 colors must be used at one time for the splines, so just evaluating interpolation with the context of just two colors doesn't work (unless you only have two colors).

So taking the same undefined handling that we use in splines and applying it to linear piecewise interpolation, we are able to have these same two examples give us a nice intuitive response. In both the lightness case and the alpha case, the colors in between that do not have those values defined have that component interpolated continuously throughout all the colors between.

Screenshot 2023-03-20 at 8 51 51 PM

It's a far more practical approach to undefined values. We already use it in splines, so we'd just create a linear version using this approach. Those who want to use a more CSS-faithful approach can use the traditional piecewise approach.