I'm grappling with the concept of bilinear interpolation, wondering if there's a more efficient method than what I've attempted below using the Culori library's interpolate() function.
My uncertainty lies in whether it's correct to first interpolate individual sets of colors and then combine those results for the final value.
To tackle this issue, I wrote a function that takes two arrays and performs linear interpolation on each before combining the resultant values.
import { formatHex8, interpolate, lerp } from '../libs/culori.mjs'
/**Interpolates between two sets of results. This function accepts two sets of parameters and three control variables.
* @param c1 First array of colors to be initially interpolated
* * @param t1 First control variable for the interpolation of colors in the first array
* * @param c2 Second array of colors to be initially interpolated
* * @param t2 Second control variable for the interpolation of colors in the second array
* * @param mode Color space to perform the interpolation in. Default is LAB
* * @param _t The third control variable for the final color interpolation. Default is 1
*/
export var bilerp = ([...c1], t1) =>
([...c2], t2) =>
(mode = 'lab') =>
(_t = 1) => {
let lerp1 = interpolate(c1)(t1)
let lerp2 = interpolate(c2)(t2)
return interpolate([lerp1, lerp2], mode)(_t)
}
// An overrides object must be applied to fine-tune the interpolations
// Testing the output
let c1 = ['blue', 'yellow',]
let c2 = ['green', 'purple', 'pink']
console.log(formatHex8(bilerp(c1, 0.3)(c2, 0.4)('lch')(0.9)))
Your insights are greatly appreciated!