javascript - RGB 到现实生活中的光色 Javascript 转换

Question

我有一个我认为非常有趣的问题，需要一个优雅的解决方案......

我有一个 RGB 值，例如 205,50,63 .

我正在尝试模拟网页上 RGB LED 的颜色，就好像它是现实生活中的灯光一样。

例如，RGB颜色255,0,0在 LED 和网页上都会显示为红色。

同样，RGB 颜色 255,255,255在 LED 和网页上都会显示为白色。

但是 RGB 颜色 0,0,0在 LED 上显示为关闭，在网页上显示为黑色。

我想要实现的是 0,0,0 和 255,255,255 显示为白色。就好像 LED 越暗，它就越白。

我一直在尝试对值应用比例算法，然后分层 <div>互相超越但没有运气。有什么想法吗？

Answer 1

我不确定您想象的情况是什么，但是阅读您想要的输出，简单地按比例放大以使最大值变为 255 有什么问题吗？

function scaleUp(rgb) {
    let max = Math.max(rgb.r, rgb.g, rgb.b);
    if (!max) { // 0 or NaN
        return {r: 255, g: 255, b: 255};
    }
    let factor = 255 / max;
    return {
        r: factor * rgb.r,
        g: factor * rgb.g,
        b: factor * rgb.b,
    };
}

所以你会得到类似的结果

scaleUp({r: 0, g: 0, b: 0}); // {r: 255, g: 255, b: 255}
scaleUp({r: 255, g: 0, b: 0}); // {r: 255, g: 0, b: 0}
scaleUp({r: 50, g: 80, b: 66}); // {r: 159.375, g: 255, b: 210.375}

<小时/>

请注意，这会将所有 {x, 0, 0} 折叠为 {255, 0, 0}，即 {1, 0, 0} code> 与 {1, 1, 1} 有很大不同。如果这是不可取的，您需要考虑对此类情况进行特殊处理

<小时/>

更多RGB提示；如果你围绕你的操作进行平方和根运算，你会得到更平滑的“更自然”的光线过渡等，例如而不是 x + y，而是 sqrt(x*x + y*y)

这导致了如何解决问题的不同想法；添加白色并缩小

function scaleDown(rgb) {
    let whiteAdded = {
        r: Math.sqrt(255 * 255 + rgb.r * rgb.r),
        g: Math.sqrt(255 * 255 + rgb.g * rgb.g),
        b: Math.sqrt(255 * 255 + rgb.b * rgb.b)
    };
    return scaleUp(whiteAdded);
}

这一次

scaleDown({r: 0, g: 0, b: 0}); // {r: 255, g: 255, b: 255}
scaleDown({r: 255, g: 0, b: 0}); // {r: 255, g: 180.3122292025696, b: 180.3122292025696}
scaleDown({r: 50, g: 80, b: 66}); // {r: 247.94043129928136, g: 255, b: 251.32479296236951}

并且在边缘点周围的跳跃较少，例如

scaleDown({r: 1, g: 0, b: 0}); // {r: 255, g: 254.99803923830171, b: 254.99803923830171}

最后，请注意这将 rgb 映射到 180..255 范围，因此如果您想保留“true”，则可以将其转换为 0..255红色等

function solution(rgb) {
    let high = scaleDown(rgb);
    return {
        r: 3.4 * (high.r - 180),
        g: 3.4 * (high.g - 180),
        b: 3.4 * (high.b - 180),
    };
}

所以

solution({r: 255, g: 0, b: 0}); // {r: 255, g: 1.0615792887366295, b: 1.0615792887366295}
solution({r: 1, g: 0, b: 0}); // {r: 255, g: 254.99333341022583, b: 254.99333341022583}
solution({r: 50, g: 80, b: 66}); // {r: 230.9974664175566, g: 255, b: 242.50429607205635}