2009-07-09 15 views
14

Jeśli mam cztery kolory (A, B, C & D) na czterech rogach kwadratu i chcę wypełnić ten kwadrat gradientem, który ładnie wtapia się między cztery kolory, w jaki sposób obliczyć kolor punktu E?Jak obliczyć gradient czterech kolorów?

Im bliżej E do któregokolwiek z pozostałych punktów, mocny kolor powinien wpłynąć na wynik.

Każdy pomysł, jak to zrobić? Szybkość i prostota są preferowane w stosunku do dokładności.

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

Odpowiedz

23

Najlepszym rozwiązaniem, gdy wymagany jest gradient między dwoma kolorami, jest użycie reprezentacji HSV (Wartość nasycenia odcienia).

Jeśli masz wartości HSV dla twoich dwóch kolorów, po prostu dokonujesz interpolacji liniowej dla H, S i V, i masz ładne kolory (interpolacja w przestrzeni RGB zawsze prowadzi do "złych" wyników).

Znajdziesz także here formuły, aby przejść odpowiednio od RGB do HSV i od HSV do RGB.

teraz do problemu z narożach, można dokonać liniową kombinację czterech wartości H/S/V, ważonej przez odległość od E, że cztery punkty A, B, C i D.

EDYTOWANIE: ta sama metoda, co tekBlues, ale w przestrzeni HSV (dość łatwo przetestować ją w przestrzeniach RGB i HSV, a zobaczysz różnice.) W HSV wystarczy obrócić cylinder chromatyczny, i dlatego daje piękny wynik)

Edit2: jeśli wolisz "szybkość i prostotę", można użyć L1-norm, zamiast L2-normy (norma euklidesowa)

Tak więc, jeśli a ma wielkość kwadratu, a współrzędna punkty są A (0, 0), B (0, a), C (a, 0), D (a, a), to barwa punktu E (x, y) można obliczyć z:

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) 

gdzie Hue(A) jest Hue od punktu A, Hue(B) odcień B, etc ...

Stosujesz te same formuły dla nasycenia i wartości.

Po ustawieniu barwy/nasycenia/wartości dla punktu E można przekształcić go w przestrzeń RGB.

+1

Mam to działa, dziękuję bardzo. Wygląda całkiem nieźle! –

+1

Powyższa metoda łączenia jest również znana jako "interpolacja dwu liniowa". Wykonujesz to osobno na wartościach H, S i V. –

1
  1. określić odległość punktu E do każdego z punktów A, B, C, D
  2. kolor do punktu E będzie kombinacja czerwony/zielony/niebieski. Obliczyć oś koloru jako średnią tej samej osi koloru dla A, B, C, D, rozważając odległość.

    distance_a = sqrt ((xa-XE)^2 + (ya-wy)^2)

    distance_b = ....

    sum_distances = distance_a + distance_b ...

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

    color_E = ColorFromARgb (czerwony, zielony, niebieski)

+0

Coś jest nie tak z tym podejściem, obawiam się. "Waga" określająca ile "A" przyczynia się do koloru "E" powinna być proporcjonalna do * odwrotności * odległości. Jak napisano powyżej, jeśli E ma rację w A, to odległość do A wynosi 0, a zatem A wniesie * nic * do wartości E. Ale to jest właśnie ten przypadek, w którym TYLKO A powinien przyczynić się do E. –

2

Sprawdź tę stronę, co daje wizualną prezentację użytkownika @ ThibThib komentarzu, że „gradienty w HSV będzie bardziej satifying”:

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

Jest twórcą gradientu, który będzie tworzyć i pokazać zarówno Gradient RGB i gradient HSV.

Jeśli spróbujesz 9 kroków od FFAAAA do AAFFAA (od jasnoczerwonego do zielonego), uzyskasz ładne przejście przez jasnożółty, a obrazy HSV i RGB będą podobne.

Ale spróbuj 9 kroków od FF0000 do 00FF00 (pogrubione od czerwonego do zielonego), a zobaczysz przejście RGB przez brzydko zielono-brązowy. Gradient HSV przechodzi jednak przez pogrubiony żółty kolor.

Powiązane problemy