3種顏色之間的顏色插值

Question

我使用下面的公式來獲得從colorA到colorB的漂亮顏色漸變，但我不知道如何對3種顏色做同樣的處理，所以漸變從colorA到colorB到colorC

colorT = colorA * p + colorB * (1.0 - p);其中「p」是從0.0到1.0

百分比

感謝

Answer 1

那麼，對於3種顏色，你可以在同一其中p = 0.0〜2.0：

if p <= 1.0 
    colorT = colorA * p + colorB * (1.0 - p); 
else 
    colorT = colorB * (p - 1.0) + colorC * (2.0 - p); 

或縮放，所以你仍然可以使用P = 0.0〜1.0：

if p <= 0.5 
    colorT = colorA * p * 2.0 + colorB * (0.5 - p) * 2.0; 
else 
    colorT = colorB * (p - 0.5) * 2.0 + colorC * (1.0 - p) * 2.0; 

Answer 2

您希望能夠創建3個顏色，但等於梯度？完全相同：在完成此漸變之後，請啓動一個新的colorA，其中colorA是當前的colorB，colorB是新的顏色。追加的結果，就大功告成了：

colorA ---- colorB colorB ---- colorC

祝你好運！

Answer 3

爲此可能構建單個表達式，但最簡單的方法是使用條件使用不同表達式，具體取決於您處於範圍的A-B部分還是B-C部分：

colorT = 
    p < 0.5 
    ? colorA * p * 2.0 + colorB * (1.0 - p * 2.0) 
    : colorB * (p - 0.5) * 2.0 + colorC * (1.0 - (p - 0.5) * 2.0); 

Answer 4

一個可能的解決方案是通過貝氏曲線使用插值： http://en.wikipedia.org/wiki/B%C3%A9zier_curve 如果你看的特殊情況下二次樣條曲線，可以看到3點，或在您的案件顏色之間內插公式。

colorT=(1-p*p)Color0 + 2(1-p)Color1 + (p*p)Color2 , 0<=p<=1 

這是您的線性公式的推廣。

編輯：

在第二，雖然，這種方法並不能得到你的測試結果，作爲中間點從未接觸過。 要獲得一個平滑的曲線，觸及所有點（顏色），您必須使用樣條線http://en.wikipedia.org/wiki/Spline_interpolation

Answer 5

感謝您的公式。但是，我不得不作出一些修改它，因爲它沒有在3種顏色之間的正確插值（有顏色上的變化跳躍）

下面是該修復：

if (p < 0.5) 
     { 
      COLORx = (COLORb * p * 2.0) + COLORa * (0.5 - p) * 2.0; 
     } 
     else 
     { 
      COLORx = COLORc * (p - 0.5) * 2.0 + COLORb * (1.0 - p) * 2.0;   
     }