Ich schreibe ein Java-Spiel und möchte einen Leistungsmesser implementieren, um festzustellen, wie schwer es ist, etwas zu schießen.
Ich muss eine Funktion schreiben, die ein int zwischen 0 und 100 annimmt. Basierend auf der Höhe dieser Zahl wird eine Farbe zwischen Grün (0 auf der Leistungsskala) und Rot (100 auf der Leistungsskala) zurückgegeben.
Ähnlich wie bei der Lautstärkeregelung:
Welche Operation muss ich für die Rot-, Grün- und Blau-Komponenten einer Farbe ausführen, um die Farben zwischen Grün und Rot zu erzeugen?
Ich könnte also sagen, getColor(80)
und es wird eine orange Farbe zurückgeben (seine Werte in R, G, B) oder getColor(10)
die einen grün / gelben RGB-Wert zurückgibt.
Ich weiß, dass ich die Komponenten der R-, G- und B-Werte für eine neue Farbe erhöhen muss, aber ich weiß nicht genau, was nach oben oder unten geht, wenn sich die Farben von Grün-Rot ändern.
Fortschritt:
Am Ende habe ich den HSV / HSB-Farbraum verwendet, weil mir der Farbverlauf besser gefallen hat (keine dunklen Brauntöne in der Mitte).
Die Funktion, die ich benutzte, war:
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);
}
Wobei "Leistung" eine Zahl zwischen 0,0 und 1,0 ist. 0.0 gibt ein helles Rot zurück, 1.0 gibt ein helles Grün zurück.
Java Hue Chart:
Antworten:
Dies sollte funktionieren - skalieren Sie die roten und grünen Werte einfach linear. Angenommen , Ihr max rot / grün / blau - Wert ist
255
, undn
ist in Reichweite0 .. 100
(Geändert für ganzzahlige Mathematik, Spitze des Hutes an Ferrucio)
Eine andere Möglichkeit wäre, ein HSV-Farbmodell zu verwenden und den Farbton von
0 degrees
(rot) nach120 degrees
(grün) mit der für Sie geeigneten Sättigung und dem für Sie geeigneten Wert zu wechseln. Dies sollte einen angenehmeren Gradienten ergeben.Hier ist eine Demonstration jeder Technik - der obere Gradient verwendet RGB, der untere verwendet HSV:
quelle
Hier ist der grün-rote Farbtonübergang im HSV-Raum, übersetzt in RGB:
Die Werte für Rot, Grün und Blau im obigen Beispiel sind Prozentsätze. Sie möchten sie wahrscheinlich mit 255 multiplizieren, um den am häufigsten verwendeten Bereich von 0 bis 255 zu erhalten.
quelle
Kurze Antwort auf Copy'n'Paste ...
Auf Java Std:
Auf Android:
Hinweis: Der Wert ist eine Zahl zwischen 0 und 1, die den Rot-Grün-Zustand angibt.
quelle
String.format("#%06X", 0xFFFFFF & getTrafficlightColor(value));
Wenn Sie eine grün-gelb-rote Darstellung wünschen, wie sie in der akzeptierten Antwort vorgeschlagen wird, sehen Sie sich diese an.
http://jsfiddle.net/0awncw5u/2/
quelle
Die lineare Interpolation zwischen Grün und Rot sollte fast funktionieren, außer dass in der Mitte eine schlammige braune Farbe entsteht.
Die flexibelste und am besten aussehende Lösung besteht darin, eine Bilddatei mit genau der gewünschten Farbrampe zu haben. Und dann suchen Sie dort nach dem Pixelwert. Dies hat die Flexibilität, dass Sie den Verlauf so einstellen können, dass er genau richtig ist .
Wenn Sie dies dennoch aus Code heraus tun möchten, ist es wahrscheinlich am besten, zwischen grünen und gelben Farben auf der linken Seite und zwischen Gelb und Rot auf der rechten Seite zu interpolieren. Im RGB-Raum ist Grün (R = 0, G = 255, B = 0), Gelb ist (R = 255, G = 255, B = 0), Rot ist (R = 255, G = 0, B = 0) ) - Dies setzt voraus, dass jede Farbkomponente von 0 bis 255 reicht.
quelle
Ich habe eine kleine Funktion erstellt, die Ihnen den ganzzahligen RGB-Wert für einen Prozentwert gibt:
Wenn Ihr aktueller Wert also 50 und Ihr maximaler Wert 100 ist, gibt diese Funktion die Farbe zurück, die Sie benötigen. Wenn Sie diese Funktion also mit einem Prozentwert wiederholen, wechselt Ihr Farbwert von grün nach rot. Entschuldigung für die schlechte Erklärung
quelle
Die akzeptierte Antwort beantwortete die Frage nicht einmal wirklich ...
C ++
Hier ist ein einfaches C ++ - Codesegment aus meiner Engine, das linear und effizient zwischen drei beliebigen Farben interpoliert:
Es
interpolation_factor
wird angenommen, dass der im Bereich von liegt0.0 ... 1.0
.Es wird angenommen, dass die Farben im Bereich von
0.0 ... 1.0
(z. B. für OpenGL) liegen.C #
Hier ist die gleiche Funktion, die in C # geschrieben wurde:
Es
interpolationFactor
wird angenommen, dass der im Bereich von liegt0.0 ... 1.0
.Es wird angenommen, dass die Farben im Bereich von liegen
0 ... 255
.quelle
Sie müssen die Farbkomponenten linear interpolieren (LERP). So wird es im Allgemeinen bei einem Startwert v0 , einem Endwert v1 und dem erforderlichen Verhältnis (einem normalisierten Float zwischen 0,0 und 1,0) gemacht:
Dies ergibt v0, wenn das Verhältnis 0,0 ist, v1, wenn das Verhältnis 1,0 ist, und alles dazwischen in den anderen Fällen.
Sie können dies entweder für die RGB-Komponenten oder mit einem anderen Farbschema wie HSV oder HLS tun. Die beiden letzteren werden optisch ansprechender sein, da sie an Farbton- und Helligkeitskomponenten arbeiten, die besser auf unsere Farbwahrnehmung abgestimmt sind.
quelle
Ich würde sagen, Sie möchten etwas zwischen einem Liniensegment im HSV-Raum (das in der Mitte ein etwas zu helles Gelb aufweist) und einem Liniensegment im RGB-Raum (das in der Mitte ein hässliches Braun aufweist). Ich würde dies verwenden, wo
power = 0
Grünpower = 50
ergibt, ein leicht mattes Gelbpower = 100
ergibt und Rot ergibt.quelle
quelle
Wenn Sie diese Art von Farbverlauf (tatsächlich umgekehrt) in CSS (min. Version 2.1) benötigen, können Sie auch HSL verwenden.
Angenommen, Sie befinden sich in einer AngularJs-Vorlage und der Wert ist eine Zahl von 0 bis 1, und Sie möchten ein Element (Hintergrund- oder Textfarbe) formatieren ...
Erster Wert: Grad (0 rot, 120 grün) Zweiter Wert: Sättigung (50% ist neutral) Dritter Wert: Helligkeit (50% neutral)
Ein schöner Artikel hier
Theorie auf Wikipedia hier
quelle
Hier ist eine Copy-and-Paste-Lösung für die Swift- und HSV-Skala:
Der UIColor-Initialisierer akzeptiert Farbton, Sättigung und Helligkeit in [0, 1]. Für den angegebenen Wert aus [0, 1] haben wir also:
quelle
Hier ist die
Objective-C
Version von Simucals Lösung:Wobei Niveau ein Wert zwischen
0.0
und wäre1.0
.Hoffe das hilft jemandem!
quelle
In Python 2.7:
Prozent ist natürlich
value / max_value
. Oder wenn Ihre Skala dann nicht bei 0 beginnt(value - min_value) / (max_value - min_value)
.quelle
JavaScript
Ich verwende Google Visualization mit Balkendiagramm und wollte, dass die Balken basierend auf einem Prozentsatz grün bis rot sind. Dies stellte sich als die sauberste Lösung heraus, die ich gefunden habe und die perfekt funktioniert.
Stellen Sie einfach sicher, dass Ihr Prozentsatz 50 für 50% und nicht 0,50 beträgt .
quelle
Ich habe die akzeptierte Antwort aktualisiert, indem ich sie in die erste und zweite Hälfte des Bereichs (0,100) aufgeteilt und 100 durch eine maximale Stufe ersetzt habe, damit der Bereich dynamisch wird. Das Ergebnis ist genau wie beim HSV-Modell, verwendet jedoch weiterhin RGB. Der Schlüssel ist, die (255,255,0) in der Mitte zu haben, um die gelbe Farbe darzustellen. Ich habe diese Idee in der akzeptierten Antwort und einem anderen VBA-Code kombiniert, also erreiche ich sie in VBA und verwende sie in Excel. Ich hoffe, die Logik hilft und kann in anderen Sprachen / Anwendungen verwendet werden.
Prost, Pavlin
quelle
VB
quelle
In sich geschlossenes Beispiel
quelle
Dies variiert von Rot zu Gelb und dann zu Grün. Der
Wert variiert von 0 bis 100
quelle