colors - Interpolación de color entre 3 colores

interpolation gradients

Question

Utilizo la siguiente ecuación para obtener un bonito degradado de color de colorA a colorB, pero no tengo idea de cómo hacer lo mismo para 3 colores, por lo que el degradado va de colorA a colorB a colorC

colorT = colorA * p + colorB * (1.0 - p); donde "p" es un porcentaje de 0.0 a 1.0

Gracias

Answer 1

¿Quieres poder crear 3 gradientes de color pero iguales? Exactamente lo mismo: una vez que haya terminado con este gradiente, comience uno nuevo donde colorA sea el color actual B y colorB el nuevo color. Añade los resultados y listo:

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

¡Buena suerte!

Answer 2

Bueno, para 3 colores, puedes hacer lo mismo con p = 0.0 a 2.0:

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

O escala para que puedas usar p = 0.0 a 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

Podría ser posible construir una única expresión para eso, pero lo más simple es usar una condición para usar diferentes expresiones dependiendo de si se encuentra en la parte A - B o B - C del rango:

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

una posible solución es utilizar la interpolación a través de Bézier Curve: http://en.wikipedia.org/wiki/B%C3%A9zier_curve si observas el caso especial Quadratic Bézier Curve, puedes ver una fórmula que interpola entre 3 puntos, o colores en tu caso.

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

Esta es una generalización de su fórmula lineal.

EDITAR:

en segundo lugar, este método no obtiene los resultados, ya que nunca se toca el punto intermedio. Para obtener una curva suave que toque todos sus puntos (colores), debe usar una spline http://en.wikipedia.org/wiki/Spline_interpolation

Answer 5

Gracias por la fórmula. Pero tuve que hacerle algunas modificaciones, ya que no se interpolaba correctamente entre los 3 colores (había saltos en el cambio de color)

Aquí está la solución para eso:

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