顏色從藍色跳到藍色

Question

我正在實施彩色屏幕保護程序。有一個顏色範圍和一個滑塊。

顏色在（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) 

滑塊值從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 

如果使用滑塊值和舊slidervalue和新的滑塊值之間的差爲2.9下的實際色調將發生變化分解0.5。

現在如果差異大於2.9則必須跳轉。這工作正常，直到滑塊值小於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; 
} 

編輯：

好那好，我們說有屏幕上的畫布，我想通過使用滑塊以更改畫布的顏色。如果沒有使用滑塊，畫布的實際顏色就是swining（+ 10hue，-10hue）。

例如

畫布的顏色爲藍色（230色調，S，B），我不使用滑塊這樣的畫布的變化通過添加0,5（計數器的計數值的顏色：20次）之後，0,5將從顏色中分解，直到計數器達到40，然後計數器設置爲0.因此，顏色在（220色相，s，b）和（240hue，s，b）之間變動

現在，如果我使用滑塊（slidersteps = 0.1），顏色將更改爲新值。

在示例 我使用的滑塊和滑塊值是2,9，然後顏色變成綠色0.5色相。步驟看起來像（230h，s，b），（229.5h，s，b），...，（130h，s，b）。如果（130h，s，b）達到，則顏色開始擺動。

此外，如果新的滑塊值比舊的大得多，則舊的顏色到新的顏色的變化必須更快。

示例 滑塊值= 11.9，最後一個滑塊值= 2,9，它們之間的差值爲9.所以如果差別比較大，那麼2.9我希望從綠色變爲紅色更快。所以我決定通過使用這個公式（舊值 - 新值）/ 1.05 +最小[舊值，新值] 步驟看起來像（130h，s，b），（123h，s，b）， ...，（0h，s，b）

此工作正常，直到從紅色變爲紫色，因爲紅色的值爲0，而下一個的值爲360，直到325紫色。所以我很困惑，如何讓相同的步驟，像上面這種valuechanges

EDIT2：

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()的beforelast線是else c = 360 - m * 15;。將其更改爲：

else c = m * -15; 

現在，當sliderValue從12變爲15時，此函數將返回負色調，從0到-45。這樣，您可以將「跳躍」從0移到315，並且在sliderValue增加時（並且相反），可以持續減少值。由於現在值可以是< 0使用adjustValue()每次將值設置爲畫布（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); 

Answer 2

我希望我正確的答案，但我真的不知道要了解你要什麼做。如果我明白了，你想對顏色變化產生一些過渡效果，對吧？

我提出了一個完全不同的方法，更「數學」，流利。假設您想要在1秒內完成顏色轉換，無論從舊顏色跳到新顏色有多大。你只需確定一個「過渡向量」，這將是最短的：如果規模從0到360，向量是：（540 +新舊）％360 - 180.

爲什麼這樣？ 「天真」向量只是（新舊）。通過添加360然後模塊360，我們確保我們有一個正數。並且通過在模前加180（540 = 180 + 360），然後去掉180後模，我們確定我們有一個範圍在[-180,180] =>這是我們想要的最短路徑。

例如，使用以下公式：

• 如果舊= 5，新= 10 =>載體是5
• 如果舊= 350，新= 10 =>向量是20
• 如果舊= 350，新= 340 =>矢量是-10

然後，一旦你計算出向量，你就必須把它應用到每個時間幀的顏色值，乘以時間係數。例如：

var v = (540 + newColor - oldColor) % 360 - 180; 
var currentColor = oldColor; 
var delta = 200; // milliseconds 
var timeElapsed = 0; 
var timeFrame = 1000; // 1s 
var hInt = setInterval(function() { 
    if (timeElapsed >= timeFrame) { 
     clearInterval(hInt); 
     currentColor = newColor; 
    } else { 
     timeElapsed += delta; 
     currentColor += v * delta/timeFrame; 
    } 
}, delta); 

「currentColor」會隨着時間的推移爲您提供正確的顏色。