Comment calculer un dégradé de quatre couleurs?

Question

Si j'ai quatre couleurs (A, B, C & D) aux quatre coins d'un carré et que je veux remplir ce carré avec un dégradé qui se fond bien entre les quatre couleurs comment calculer la couleur du point E?

Le plus proche de E est l'un des autres points, la forte cette couleur devrait affecter le résultat.

Une idée de comment faire cela? La rapidité et la simplicité sont préférables à la précision.

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

Answer 1

La meilleure solution lorsqu'un dégradé est requis entre deux couleurs consiste à utiliser la représentation HSV (valeur de saturation de teinte). Si vous avez les valeurs HSV pour vos deux couleurs, vous faites simplement une interpolation linéaire pour H, S et V, et vous avez de belles couleurs (l'interpolation dans l'espace RGB conduit toujours à de "mauvais" résultats).

Vous trouverez également here les formules pour aller de RGB à HSV et de HSV à RGB, respectivement.

Maintenant, pour votre problème avec le coin quatre, vous pouvez faire une combinaison linéaire des quatre valeurs H/S/V, pondérée par la distance de E à quatre que les points A, B, C et D.

EDIT: même méthode que les tekBlues, mais dans l'espace HSV (il est assez facile de le tester dans les espaces RVB et HSV.) Et vous verrez les différences: dans HSV, il suffit de tourner le cylindre chromatique il donne bon résultat)

EDIT2: si vous préférez « rapidité et la simplicité », vous pouvez utiliser une norme L1, au lieu d'une norme L2 (norme euclidienne)

donc, si a est la taille de la place et la coordonnée de vos points sont A (0, 0), B (0, a), C (a, 0), D (a, a), puis la teinte d'un point E (x, y) peut être calculé avec:

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) 

où Hue(A) est la teinte du point A, Hue(B) la teinte de B, etc ...

Vous appliquez les mêmes formules pour la saturation et la valeur.

Une fois que vous avez la teinte/saturation/valeur pour votre point E, vous pouvez le transformer en espace RVB.

Answer 2

1. déterminer la distance du point E à chaque point A, B, C, D

2. La couleur pour le point E sera la combinaison de rouge/vert/bleu. Calculer chaque axe de couleur comme la moyenne du même axe de couleur pour A, B, C, D, ponderating par la distance.

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

   distance_b = ....

   sum_distances = distance_a + distance_b ...

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

   color_E = ColorFromARgb (rouge, vert, bleu)

Answer 3

Découvrez ce site, ce qui donne une démonstration visuelle du commentaire de @ ThibThib que « gradients HSV seront plus satifying »:

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

Il est un créateur de gradient qui va créer et montrer à la fois un Gradient RVB et gradient HSV.

Si vous essayez 9 étapes de FFAAAA à AAFFAA (rouge clair à vert), vous obtiendrez une belle transition à travers le jaune clair, et les HSV et RGB ressemblent.

Mais essayez 9 étapes de FF0000 à 00FF00 (rouge vif à vert), et vous verrez le passage RVB à travers un brun vert verdâtre. Le gradient de HSV, cependant, transitions à travers le jaune audacieux.