Piszę grę Java i chcę zaimplementować miernik mocy określający, jak mocno zamierzasz coś zrobić.
Muszę napisać funkcję, która przyjmuje wartość między 0-100 i na podstawie tego, jak wysoka jest ta liczba, zwróci kolor między zielonym (0 na skali potęgi) a czerwonym (100 na skali potęgi).
Podobnie jak w przypadku regulacji głośności:
Jaką operację muszę wykonać na składnikach czerwonego, zielonego i niebieskiego koloru, aby wygenerować kolory między zielonym i czerwonym?
Mogę więc uruchomić, powiedzmy, getColor(80)
i zwróci pomarańczowy kolor (jego wartości w R, G, B) lub getColor(10)
który zwróci bardziej zielono / żółtą wartość RGB.
Wiem, że muszę zwiększyć składowe wartości R, G, B dla nowego koloru, ale nie wiem konkretnie, co rośnie lub spada, gdy kolory zmieniają się z zielono-czerwony.
Postęp:
Skończyło się na tym, że użyłem przestrzeni kolorów HSV / HSB, ponieważ bardziej podobał mi się gradient (brak ciemnych brązów w środku).
Funkcja, której użyłem, to:
public Color getColor(double power)
{
double H = power * 0.4; // Hue (note 0.4 = Green, see huge chart below)
double S = 0.9; // Saturation
double B = 0.9; // Brightness
return Color.getHSBColor((float)H, (float)S, (float)B);
}
Gdzie „moc” to liczba z przedziału od 0,0 do 1,0. 0.0 zwróci jasnoczerwony, 1.0 zwróci jasnozielony.
Wykres odcieni Java:
Odpowiedzi:
To powinno działać - po prostu skaluj liniowo wartości czerwonego i zielonego. Zakładając, że twoja maksymalna wartość czerwonego / zielonego / niebieskiego wynosi
255
in
znajduje się w zakresie0 .. 100
(Zmieniono dla matematyki całkowitej, czubek kapelusza do Ferrucia)
Innym sposobem byłoby użycie modelu kolorów HSV i przełączanie odcienia od
0 degrees
(czerwonego) do120 degrees
(zielonego) z dowolnym nasyceniem i wartością, które Ci odpowiadają. Powinno to dać bardziej przyjemny gradient.Oto demonstracja każdej techniki - górny gradient używa RGB, dolny używa HSV:
źródło
Z góry mojej głowy, oto przejście zielono-czerwonego odcienia w przestrzeni HSV, przetłumaczone na RGB:
Wartości czerwonego, zielonego i niebieskiego w powyższym przykładzie to wartości procentowe. Prawdopodobnie chciałbyś pomnożyć je przez 255, aby uzyskać najczęściej używany zakres 0-255.
źródło
Krótka kopia i wklej odpowiedź ...
W standardzie Java:
W systemie Android:
uwaga: wartość to liczba z przedziału od 0 do 1, wskazująca stan od czerwonego do zielonego.
źródło
String.format("#%06X", 0xFFFFFF & getTrafficlightColor(value));
Jeśli chcesz uzyskać zielono-żółto-czerwoną reprezentację, jak sugeruje zaakceptowana odpowiedź, spójrz na to.
http://jsfiddle.net/0awncw5u/2/
źródło
Liniowa interpolacja między zielonym a czerwonym prawie powinna działać, poza tym, że w środku będzie mętnobrązowy kolor.
Najbardziej elastycznym i najlepiej wyglądającym rozwiązaniem jest umieszczenie pliku obrazu w miejscu, które ma dokładnie taką skalę kolorów, jaką chcesz. Następnie wyszukaj tam wartość piksela. Zapewnia to elastyczność, dzięki której można dostosować gradient, aby był odpowiedni .
Jeśli nadal chcesz to zrobić z kodu, prawdopodobnie najlepiej jest interpolować między zielonym i żółtym kolorem po lewej stronie oraz między żółtym i czerwonym po prawej stronie. W przestrzeni RGB zielony to (R = 0, G = 255, B = 0), żółty to (R = 255, G = 255, B = 0), czerwony to (R = 255, G = 0, B = 0 ) - przy założeniu, że każdy składnik koloru przechodzi od 0 do 255.
źródło
Zrobiłem małą funkcję, która podaje wartość całkowitą rgb dla wartości procentowej:
Więc jeśli twoja currentValue to 50, a twoja maxValue to 100, ta funkcja zwróci kolor, którego potrzebujesz, więc jeśli zapętlisz tę funkcję z wartością procentową, twoja wartość koloru zmieni się z zielonego na czerwony. Przepraszam za złe wyjaśnienie
źródło
Przyjęta odpowiedź nie odpowiadała nawet na pytanie ...
C ++
Oto prosty segment kodu w C ++ z mojego silnika, który liniowo i wydajnie interpoluje między trzema dowolnymi kolorami:
interpolation_factor
Zakłada się w przedziale0.0 ... 1.0
.Zakłada się, że kolory mieszczą się w zakresie
0.0 ... 1.0
(np. Dla OpenGL).DO#
Oto ta sama funkcja napisana w C #:
interpolationFactor
Zakłada się w przedziale0.0 ... 1.0
.Zakłada się, że kolory mieszczą się w zakresie
0 ... 255
.źródło
Musisz interpolować liniowo (LERP) składowe koloru. Oto jak to się ogólnie robi, biorąc pod uwagę wartość początkową v0 , wartość końcową v1 i wymagany współczynnik (znormalizowany zmiennoprzecinkowy między 0,0 a 1,0):
Daje to v0, gdy współczynnik wynosi 0,0, v1, gdy współczynnik wynosi 1,0, i wszystko pomiędzy w pozostałych przypadkach.
Możesz to zrobić na komponentach RGB lub przy użyciu innego schematu kolorów, takiego jak HSV lub HLS. Dwie ostatnie będą bardziej przyjemne wizualnie, ponieważ działają na komponentach odcienia i jasności, które lepiej odwzorowują naszą percepcję kolorów.
źródło
Powiedziałbym, że potrzebujesz czegoś pomiędzy segmentem linii w przestrzeni HSV (który ma nieco zbyt jasny żółty pośrodku) a segmentem linii w przestrzeni RGB (który ma brzydki brąz w środku). Użyłbym tego, gdzie
power = 0
da zielony,power = 50
da lekko matowy żółty ipower = 100
da czerwony.źródło
Oto rozwiązanie do kopiowania i wklejania dla skali Swift i HSV:
Inicjator UIColor przyjmuje odcień, nasycenie i jasność w [0, 1], więc dla podanej wartości z [0, 1] mamy:
źródło
źródło
Jeśli potrzebujesz tego rodzaju gradientu (faktycznie odwróconego) w CSS (min wersja 2.1), możesz również użyć HSL.
Przypuśćmy, że jesteś w szablonie AngularJs, a wartość to liczba od 0 do 1 i chcesz nadać styl elementowi (kolor tła lub tekstu) ...
Pierwsza wartość: stopnie (0 czerwonych, 120 zielonych) Druga wartość: nasycenie (50% jest neutralne) Trzecia wartość: jasność (50% neutralne)
Ładny artykuł tutaj
Teoria na Wikipedii tutaj
źródło
Oto
Objective-C
wersja rozwiązania Simucal:Gdzie poziom byłby wartością między
0.0
a1.0
.Mam nadzieję, że to komuś pomoże!
źródło
W Pythonie 2.7:
Oczywiście procent
value / max_value
. Lub jeśli twoja skala nie zaczyna się od 0, wtedy(value - min_value) / (max_value - min_value)
.źródło
JavaScript
Używam Google Visualization z wykresem słupkowym i chciałem, aby słupki były od zielonego do czerwonego w procentach. Okazało się, że jest to najczystsze rozwiązanie, jakie znalazłem i działa idealnie.
Po prostu upewnij się, że Twój procent wynosi 50 na 50%, a nie 0,50.
źródło
Zaktualizowałem zaakceptowaną odpowiedź, dzieląc ją na pierwszą i drugą połowę zakresu (0,100) i zastępując 100 poziomem maksymalnym, aby zakres mógł stać się dynamiczny. Rezultat jest dokładnie taki sam, jak w modelu HSV, ale nadal używa RGB. Kluczem jest umieszczenie (255,255,0) pośrodku, aby reprezentować żółty kolor. Połączyłem ten pomysł w zaakceptowanej odpowiedzi i innym kodzie VBA, więc osiągnij to w VBA i użyj w Excelu. Mam nadzieję, że logika pomaga i może być używana w innych językach / aplikacjach.
Pozdrawiam, Pavlin
źródło
VB
źródło
Samodzielny przykład
źródło
Będzie się zmieniać od czerwonego do żółtego, a następnie do zielonego, w zakresie
od 0 do 100
źródło