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;   
     }