Javascript 算法/函数为可见光谱中的颜色生成 RGB 值

Question

我正在寻找一个 Javascript 函数/算法，它会为“可见光”光谱中占 p% 的颜色生成 RGB 值。

例如 - 给定可见光谱...

... 给定 p=0，该函数应返回红色的 RGB(整个光谱中的 0%。给定 p=50，该函数应近似返回绿色的 RBG(整个光谱中的 50%)。最后，给定 p=100，该函数将返回紫色的 RBG。

该函数不需要在技术上/科学上精确 - 我只是在寻找一个相当接近的近似值，具有合理的灵敏度。 (例如，p=76 的 RGB 应该不同于 p=77)。

理想情况下，我正在寻找一个纯数学公式。即，我想避免将下面的图像实际加载到 Canvas 上，而不是使用 context.getImageData 来查找图像中像素 p% 的颜色。

当然，我不知道这是否可能......

Answer 1

您可以使用 this answer 中的 HSVtoRGB 函数轻松地创造一些东西。

function HSVtoRGB(h, s, v) {
    var r, g, b, i, f, p, q, t;
    if (arguments.length === 1) {
        s = h.s, v = h.v, h = h.h;
    }
    i = Math.floor(h * 6);
    f = h * 6 - i;
    p = v * (1 - s);
    q = v * (1 - f * s);
    t = v * (1 - (1 - f) * s);
    switch (i % 6) {
        case 0: r = v, g = t, b = p; break;
        case 1: r = q, g = v, b = p; break;
        case 2: r = p, g = v, b = t; break;
        case 3: r = p, g = q, b = v; break;
        case 4: r = t, g = p, b = v; break;
        case 5: r = v, g = p, b = q; break;
    }
    return {
        r: Math.round(r * 255),
        g: Math.round(g * 255),
        b: Math.round(b * 255)
    };
}

function rainbow(p) {
    var rgb = HSVtoRGB(p/100.0*0.85, 1.0, 1.0);
    return 'rgb('+rgb.r+','+rgb.g+','+rgb.b+')';
}

for(var i=0; i<100; i++) {
    var span = document.createElement('span');
    span.style.backgroundColor = span.style.color = rainbow(i);
    span.textContent = 'i';
    document.body.appendChild(span);
}