如何使用JavaScript实现颜色的双线性插值?

niwlg2el  于 2023-03-11  发布在  Java
关注(0)|答案(1)|浏览(154)

我需要帮助来理解是否有比我下面尝试的更好的方法来做双线性插值。我使用了Culori库的interpolate()函数。
我想双线性插值颜色,但我不知道它是否真的正确,首先插值的颜色,然后插值的两个最终结果,以获得最终的价值。
我首先创建了一个函数,它接受两个数组,然后对每个数组进行线性插值,最后返回两个插值结果的值。

import { formatHex8, interpolate, lerp } from '../libs/culori.mjs'
/**Interpolates  between two resultant interpolations. The function takes two sets of params and has 3 t 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 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)
            }
// Must apply an overrides object that determines the fine tuning of 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)))

先谢谢你!

ssgvzors

ssgvzors1#

通过将函数调用移到所有参数都可用的作用域,可以优化和简化这一点,从而真正利用currying:

export const bilerp = (c1, t1) => {
    const lerp1 = interpolate(c1)(t1);
    return (c2, t2) => {
        const lerp2 = interpolate(c2)(t2);
        return (mode = 'lab') => {
            return interpolate([lerp1, lerp2], mode);
        };
    };
};

(假设interpolate已经具有相同的默认值,我还省略了最里面的函数)。
然而,如果您实际上没有部分应用这个函数,我猜它实际上并没有比3次直接调用interpolate(而不是向bilerp传递6个参数)有多大改进。

相关问题