javascript - 颜色从蓝色跳到紫色

Question

我正在实现一个彩色屏幕保护程序。有一个颜色范围和一个 slider 。

颜色在 (HSB) 中。有 6 种颜色。

blue (230, S,B)
green (130, S,B)
yellow (55, S,B)
orange (40, S,B)
red (0(or 360), S,B)
violette (315, S,B)

slider 值从 0 到 14.9

blue 0 - 2.9 green
green 3 - 5.9 yellow
yellow 6 - 8.9 orange
orange 9 - 11.9 red
red 12 - 14.9 violette

如果使用 slider 值并且旧 slider 值和新 slider 值之间的差异小于 2.9，则实际色调将通过减去 0.5 来改变。

现在，如果差异大于 2.9，则必须进行跳跃。这工作正常，直到 slider 值小于 12。在值 12 时，颜色从 0 变为 360，我的代码不再工作。

// this works fine
if (lastSlide < 12) {
            // jump statement
            if (Math.abs(Math.round(top.fillColor.hue - value)) > 41){
                var fillColor = Math.round((Math.abs((value-top.fillColor.hue))/1.05) + Math.min(value, Math.round(top.fillColor.hue)));
                if (fillColor < 0) fillColor = adjustValue(fillColor);
                top.fillColor.hue = fillColor;
            }
            else if (Math.abs(Math.round(top.fillColor.hue - value)) < 41 && top.counter_dsg < 20){
                top.fillColor.hue-= 0.5; 
                top.counter_dsg+=0.5;
            }
            else if (Math.abs(Math.round(top.fillColor.hue - setValue())) < 41 && top.counter_dsg > 19){
                top.fillColor.hue+= 0.5; 
                top.counter_dsg+=0.5;
            }
            else top.fillColor.hue -= 0.5;
            if (top.counter_dsg > 39) top.counter_dsg = 0;
        }
// this not
else {
    // jump statement
    if (Math.abs(Math.round(top.fillColor.hue - value)) > 41){
        var fillColor = Math.round((Math.abs((value-top.fillColor.hue))/1.05) - Math.min(value, Math.round(top.fillColor.hue)));
        if (fillColor < 0) fillColor = adjustValue(fillColor);
        top.fillColor.hue = fillColor;
    }
    else if (Math.abs(Math.round(value - top.fillColor.hue)) < 41 && top.counter_dsg < 20){
        top.fillColor.hue-= 0.5;
        top.counter_dsg+=0.5;
    }
    else if (Math.abs(Math.round(value - top.fillColor.hue)) < 41 && top.counter_dsg > 19){
        top.fillColor.hue+= 0.5; 
        top.counter_dsg+=0.5;
    }
    else top.fillColor.hue -= 0.5;
    if (top.counter_dsg > 39) top.counter_dsg = 0;
}

编辑:

好吧，假设屏幕上有一个 Canvas ，我想使用 slider 更改 Canvas 的颜色。如果不使用 slider ，则 Canvas 的实际颜色是旋转的(+10hue，-10hue)。

例子

Canvas 的颜色是蓝色(230 色调，s，b)，我没有使用 slider 所以 Canvas 的颜色通过添加 0.5(计数器计数:20 次)来改变，在 0 之后， 5 将从颜色开始减色，直到计数器达到 40，然后计数器设置为 0。所以颜色在 (220 hue, s,b) 和 (240hue, s, b) 之间摆动

现在，如果我使用 slider (slidersteps = 0.1)，颜色将更改为新值。

在例子中我正在使用 slider ， slider 值为 2,9，然后通过减色 0.5 色调将颜色变为绿色。步骤看起来像 (230h,s,b),(229.5h,s,b),...,(130h,s,b)。如果达到 (130h,s,b)，颜色开始摆动。

此外，如果新 slider 值比旧 slider 值大得多，则必须更快地从旧颜色更改为新颜色。

例子 slider 值 = 11.9，最后一个 slider 值 = 2,9，它们之间的差值是 9。所以如果差值大于 2.9，我想从绿色到红色的步长更快。所以我决定使用这个公式(旧值 - 新值)/1.05 + Min[old value, new value] 来获得下一个值步骤看起来像 (130h, s,b),(123h, s,b),...,(0h, s, b)

这在从红色变为紫色之前工作正常，因为红色的值为 0，下一个为 360 直到 325 紫色。所以我很困惑如何通过这个 valuechanges 获得与上面相同的步骤

编辑2:

1.) yes its the actual hue
2.) my fault...it's always setValue() - i have declare it above in this ways value = setValue() to use it once time and didn't change it everywhere 
3.) value = setValue() -> the Hue calculated by the slider
4.) yes
5.) yes

Answer 1

要在最短路径上从一种颜色到另一种颜色 Joel 的答案很好，我不能做得更好。所以我采用了另一种方法，尽可能接近您已有的代码，因为您说第一部分工作正常。

函数中setValue()最后一行是else c = 360 - m * 15; .将其更改为:

else c = m * -15;

现在，当 sliderValue 从 12 变为 15 时，该函数返回从 0 到 -45 的负色调。这样你就可以删除从 0 到 315 的“跳跃”，并在 sliderValue 增加时(反之)获得不断减少的值。因为现在值可以 < 0 使用 adjustValue()每次为 Canvas 设置一个值时(adjustValue() 会在内部检查 < 0，因此您无需额外检查)。那么您发布的所有代码可能如下所示:

var cur = top.fillColor.hue;
if (cur > 300) cur -= 360;
var dif = cur - setValue();
if (Math.abs(dif) > 41) cur -= Math.round(dif / 1.05);
else {
    cur += top.counter_dsg < 20 ? -0.5 : 0.5; 
    top.counter_dsg += 0.5
}
if (top.counter_dsg > 39) top.counter_dsg = 0;
top.fillColor.hue = adjustValue(cur);