¿Cómo calculo un degradado de cuatro colores?

Question

Si tengo cuatro colores (A, B, C & D) en cuatro esquinas de un cuadrado y quiero llenar ese cuadrado con un degradado que combina muy bien entre los cuatro colores, ¿cómo puedo calcular el color del punto E?

Cuanto más cerca esté E de cualquiera de los otros puntos, más fuerte es el color que debería afectar el resultado.

¿Alguna idea de cómo hacer eso? Se prefiere la velocidad y la simplicidad a la precisión.

colours http://rabien.com/image/colours.png

Answer 1

La mejor solución cuando se requiere un degradado entre dos colores es utilizar la representación HSV (valor de saturación de tono).

Si tiene los valores HSV para sus dos colores, solo hace interpolación lineal para H, S y V, y tiene bonitos colores (la interpolación en el espacio RGB siempre conduce a resultados "malos").

También encontrará here las fórmulas para pasar de RGB a HSV y de HSV a RGB, respectivamente.

Ahora, para su problema con los cuatro esquina, se puede hacer una combinación lineal de los valores de cuatro H/S/V, ponderada por la distancia de E a que los cuatro puntos A, B, C y D.

EDITAR: el mismo método que tekBlues, pero en el espacio HSV (es bastante fácil probarlo en RGB y en espacios HSV. Y verá las diferencias. En HSV, simplemente da la vuelta al cilindro cromático, y esta es la razón por la cual que da buen resultado)

Edit2: si lo prefiere "velocidad y simplicidad", es posible utilizar una L1-norma, en lugar de una L2-norma (norma euclidiana)

lo tanto, si a es el tamaño de su cuadrado y la coordenada de sus puntos son A (0, 0), B (0, a), C (a, 0), D (a, a), entonces el Hue de un punto E (x, y) se puede calcular con:

Hue(E) = (Hue(B)*y/a + Hue(A)*(1-y/a)) * (x/a) + (Hue(D)*y/a + Hue(C)*(1-y/a)) * (1-x/a) 

donde Hue(A) es la tonalidad del punto A, Hue(B) Hue de la B, etc ...

Aplica las mismas fórmulas para la saturación y el valor.

Una vez que tenga el Tono/Saturación/Valor para su punto E, puede transformarlo en un espacio RGB.

Answer 2

1. determinar la distancia del punto E a cada punto A, B, C, D

2. El color para el punto E será la combinación de rojo/verde/azul. Calcule cada eje de color como el promedio del mismo eje de color para A, B, C, D, ponderando por distancia.

   distance_a = sqrt ((xa-xe)^2 + (ya-YE)^2)

   distance_b = ....

   sum_distances = distance_a + distance_b ...

   rojo = (red_a distance_a + red_b distance_b ...)/sum_distances

   color_E = ColorFromARgb (rojo, verde, azul)

Answer 3

Salida este sitio, lo que da una demostración visual de comentario de @ ThibThib que "gradientes en VHS serán más satifying":

http://www.perbang.dk/rgbgradient/

Es un creador de gradiente que va a crear y mostrar tanto una Gradiente RGB y un gradiente HSV.

Si prueba 9 pasos de FFAAAA a AAFFAA (rojo claro a verde), obtendrá una transición agradable a través de amarillo claro, y los de HSV y RGB se verán similares.

Pero pruebe 9 pasos de FF0000 a 00FF00 (rojo negruzco a verde), y verá la transición de RGB a través de un marrón verdoso asqueroso. Sin embargo, el gradiente HSV pasa a amarillo negrita.