Цветовая интерполяция между 3 цветами

Question

Я использую следующее уравнение, чтобы получить хороший градиент цвета от colorA к colorB, но я не знаю, как сделать то же самое для 3 цветов, поэтому градиент переходит от colorA к colorB к colorC

colorT = colorA * p + colorB * (1.0 - p); где "р" - это процент от 0,0 до 1,0

Спасибо

Answer 1

Спасибо за формулу.Но мне пришлось внести некоторые изменения в него, поскольку он не интерполировал между 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;          
        }

Answer 2

Ну, для 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 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 если вы посмотрите на специальный случай Quadratic Bézier Curve, вы увидите формулу, которая интерполирует 3 точки или цвета в вашем случае.

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

Это обобщение вашей линейной формулы.

EDIT:

на секунду, однако, этот метод не дает результатов, так как промежуточная точка никогда не затрагивается. Чтобы получить плавную кривую, которая касается всех ваших точек (цветов), вы должны использовать сплайн http://en.wikipedia.org/wiki/Spline_interpolation

Answer 5

Вы хотите иметь возможность создавать 3 цветных, но равных градиента?Точно так же: после того, как вы закончите с этим градиентом, начните новый, где colorA - это текущий colorB, а colorB - новый цвет.Добавьте результаты, и все готово:

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

Удачи!