Gerar cores entre vermelho e verde para um medidor de energia?

137

Estou escrevendo um jogo em Java e quero implementar um medidor de energia para determinar com que intensidade você vai atirar em algo.

Preciso escrever uma função que tenha um int entre 0 - 100 e, com base em quão alto é esse número, ele retornará uma cor entre Verde (0 na escala de potência) e Vermelho (100 na escala de potência).

Semelhante à maneira como os controles de volume funcionam:
controle de volume

Que operação eu preciso fazer nos componentes Vermelho, Verde e Azul de uma cor para gerar as cores entre Verde e Vermelho?

Então, eu poderia dizer, getColor(80)e ele retornará uma cor alaranjada (seus valores em R, G, B) ou getColor(10)que retornará um valor RGB mais Verde / Amarelo.

Sei que preciso aumentar os componentes dos valores R, G, B para uma nova cor, mas não sei especificamente o que aumenta ou diminui à medida que as cores mudam de Verde-Vermelho.


Progresso:

Acabei usando o espaço de cores HSV / HSB porque gostei mais da gradiant (sem marrom escuro no meio).

A função que eu usei foi:

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);
}

Onde "potência" é um número entre 0,0 e 1,0. 0.0 retornará um vermelho brilhante, 1.0 retornará um verde brilhante.

Gráfico de Matiz Java:
Gráfico de Matiz Java

mmcdole
fonte
Eu já fiz a mesma pergunta (extremamente semelhante) aqui: http://stackoverflow.com/questions/168838/color-scaling-function
Tomas Pajonk 4/08/08
2
Você não deve inverter o poder? Assumindo vermelho é o mais alto sucesso, e que está a trabalhar, entre 0,1 e 0,4, quanto maior for a energia do diminuir a H
Adriaan Davel
Você está usando o OpenGL? Como existem maneiras de definir os pontos de um triângulo com cores diferentes e depois misturar / graduar entre eles. Você provavelmente obtém um desempenho melhor solicitando à placa gráfica que faça o trabalho por você. Além disso, o código poderia ser mais simples / mais adaptável (dizer se você quer um medidor de aliens poder ir de verde para azul)
DarcyThomas

Respostas:

203

Isso deve funcionar - basta dimensionar linearmente os valores de vermelho e verde. Supondo que seu valor máximo de vermelho / verde / azul esteja 255e nesteja dentro do alcance0 .. 100

R = (255 * n) / 100
G = (255 * (100 - n)) / 100 
B = 0

(Alterado para números inteiros, ponta do chapéu para Ferrucio)

Outra maneira de fazer isso seria usar um modelo de cores HSV e alternar o tom de 0 degrees(vermelho) para 120 degrees(verde) com a saturação e o valor que mais lhe convierem. Isso deve dar um gradiente mais agradável.

Aqui está uma demonstração de cada técnica - o gradiente superior usa RGB, o inferior usa HSV:

http://i38.tinypic.com/29o0q4k.jpg

Paul Dixon
fonte
20
É muito, muito melhor fazer isso no espaço HSV.
DJClayworth
@DJClayworth, sim, eu fui com o HSV.
mmcdole 14/01/09
+1; Eu ia fazer uma nova pergunta sobre como melhorar um algoritmo de cores que tenho para colorir um gráfico de barras em HTML / PHP ... Então, sugeri essa pergunta como semelhante e sua resposta me ajudou a resolver o problema sem precisar fazer a pergunta! Obrigado!
Beggs
Como você escreveria uma função que funciona com qualquer valor de cor? Digamos, calcule a cor entre RGB 20,30,190 e RBG 69,190,10?
Kokodoko
1
mesma técnica - para se deslocar de valor X para o valor Y no N passos, cada passo que você X incremento pelo (YX) / N - embora ele vai olhar mais agradável se você se mover no espaço HSV em vez de RGB
Paul Dixon
32

Em cima da minha cabeça, aqui está a transição de matiz verde-vermelho no espaço HSV, traduzida para RGB:

blue = 0.0
if 0<=power<0.5:        #first, green stays at 100%, red raises to 100%
    green = 1.0
    red = 2 * power
if 0.5<=power<=1:       #then red stays at 100%, green decays
    red = 1.0
    green = 1.0 - 2 * (power-0.5)

Os valores de vermelho, verde e azul no exemplo acima são porcentagens. Você provavelmente deseja multiplicá-los por 255 para obter o intervalo de 0 a 255 mais usado.

Rafał Dowgird
fonte
12

Resposta curta Copy'n'Paste ...

No Java Std:

int getTrafficlightColor(double value){
    return java.awt.Color.HSBtoRGB((float)value/3f, 1f, 1f);
}

No Android:

int getTrafficlightColor(double value){
    return android.graphics.Color.HSVToColor(new float[]{(float)value*120f,1f,1f});
}

nota: value é um número entre 0 e 1, indicando a condição de vermelho para verde.

mschmoock
fonte
Para converter diretamente a um código de cor hexadecimal, você pode querer alavancagemString.format("#%06X", 0xFFFFFF & getTrafficlightColor(value));
ngeek
10

Se você deseja uma representação verde-amarela-vermelha como a resposta aceita sugere, dê uma olhada nisso.

http://jsfiddle.net/0awncw5u/2/

function percentToRGB(percent) {
    if (percent === 100) {
        percent = 99
    }
    var r, g, b;

    if (percent < 50) {
        // green to yellow
        r = Math.floor(255 * (percent / 50));
        g = 255;

    } else {
        // yellow to red
        r = 255;
        g = Math.floor(255 * ((50 - percent % 50) / 50));
    }
    b = 0;

    return "rgb(" + r + "," + g + "," + b + ")";
}


function render(i) {
    var item = "<li style='background-color:" + percentToRGB(i) + "'>" + i + "</li>";
    $("ul").append(item);
}

function repeat(fn, times) {
    for (var i = 0; i < times; i++) fn(i);
}


repeat(render, 100);
li {
    font-size:8px;
    height:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul></ul>

Blowsie
fonte
Estou recebendo valores iguais para porcentagens diferentes usando este código ... alguma idéia? Por exemplo, todas as seguintes porcentagens retornam RGB 1.255,0: 0,277, 0,222, 0,111 ... os valores mais altos (por exemplo, 1,0) retornam os RGBs corretos com um verde mais brilhante, mas eles param de parar após um limite e eu só recebo tons de verde na minha balança.
Patrick
8

A interpolação linear entre verde e vermelho quase deve funcionar, exceto que no meio haverá cor marrom enlameada.

A solução mais flexível e com melhor aparência é ter um arquivo de imagem em algum lugar com a rampa de cores exata desejada. E, em seguida, procure o valor de pixel lá. Isso tem a flexibilidade de que você pode ajustar o gradiente para ficar perfeito .

Se você ainda deseja fazer isso a partir do código, provavelmente é melhor interpolar entre as cores verde e amarelo no lado esquerdo e entre amarelo e vermelho no lado direito. No espaço RGB, verde é (R = 0, G = 255, B = 0), amarelo é (R = 255, G = 255, B = 0), vermelho é (R = 255, G = 0, B = 0 ) - isso pressupõe que cada componente de cor passa de 0 a 255.

NeARAZ
fonte
1
A sugestão aqui de dividir o espectro em Vermelho / Amarelo e Amarelo / Verde fornece os resultados amarelos mais agradáveis.
a fig
4

Eu fiz uma pequena função que fornece o valor inteiro rgb para um valor percentual:

private int getGreenToRedGradientByValue(int currentValue, int maxValue)
{
    int r = ( (255 * currentValue) / maxValue );
    int g = ( 255 * (maxValue-currentValue) ) / maxValue;
    int b = 0;
    return ((r&0x0ff)<<16)|((g&0x0ff)<<8)|(b&0x0ff);
}

Portanto, se o seu currentValue for 50 e o maxValue for 100, essa função retornará a cor que você precisa, portanto, se você repetir esta função com um valor percentual, o valor da cor passará de verde para vermelho. Desculpe pela explicação ruim

Nicholas
fonte
3

A resposta aceita nem sequer respondeu à pergunta ...

C ++

Aqui está um segmento de código C ++ simples do meu mecanismo que interpola linear e eficientemente entre três cores arbitrárias:

const MATH::FLOAT4 color1(0.0f, 1.0f, 0.0f, 1.0f);  // Green
const MATH::FLOAT4 color2(1.0f, 1.0f, 0.0f, 1.0f);  // Yellow
const MATH::FLOAT4 color3(1.0f, 0.0f, 0.0f, 1.0f);  // Red

MATH::FLOAT4 get_interpolated_color(float interpolation_factor)
{
    const float factor_color1 = std::max(interpolation_factor - 0.5f, 0.0f);
    const float factor_color2 = 0.5f - fabs(0.5f - interpolation_factor);
    const float factor_color3 = std::max(0.5f - interpolation_factor, 0.0f);

    MATH::FLOAT4 color;

    color.x = (color1.x * factor_color1 +
               color2.x * factor_color2 +
               color3.x * factor_color3) * 2.0f;

    color.y = (color1.y * factor_color1 +
               color2.y * factor_color2 +
               color3.y * factor_color3) * 2.0f;

    color.z = (color1.z * factor_color1 +
               color2.z * factor_color2 +
               color3.z * factor_color3) * 2.0f;

    color.w = 1.0f;

    return(color);
}

A interpolation_factoré assumida para estar na gama de 0.0 ... 1.0.
Presume-se que as cores estejam na faixa de 0.0 ... 1.0(por exemplo, para OpenGL).

C #

Aqui está a mesma função escrita em C #:

private readonly Color mColor1 = Color.FromArgb(255, 0, 255, 0);
private readonly Color mColor2 = Color.FromArgb(255, 255, 255, 0);
private readonly Color mColor3 = Color.FromArgb(255, 255, 0, 0);

private Color GetInterpolatedColor(double interpolationFactor)
{
    double interpolationFactor1 = Math.Max(interpolationFactor - 0.5, 0.0);
    double interpolationFactor2 = 0.5 - Math.Abs(0.5 - interpolationFactor);
    double interpolationFactor3 = Math.Max(0.5 - interpolationFactor, 0.0);

    return (Color.FromArgb(255,
                (byte)((mColor1.R * interpolationFactor1 +
                        mColor2.R * interpolationFactor2 +
                        mColor3.R * interpolationFactor3) * 2.0),

                (byte)((mColor1.G * interpolationFactor1 +
                        mColor2.G * interpolationFactor2 +
                        mColor3.G * interpolationFactor3) * 2.0),

                (byte)((mColor1.B * interpolationFactor1 +
                        mColor2.B * interpolationFactor2 +
                        mColor3.B * interpolationFactor3) * 2.0)));
}

A interpolationFactoré assumida para estar na gama de 0.0 ... 1.0.
Presume-se que as cores estejam na faixa de 0 ... 255.

Tara
fonte
1
O código C # trabalhou brilhante para mim (upvote adicionado) mas há um erro de ortografia nele interpolationFactorColor2 deve ser interpolationFactor2
DJIDave
Também para completar, foi assim que utilizei a função para retornar RGB ao MVC. Razr view double n = valor real / valor máximo / // Isso fornece a proporção 0-1 var color = GetInterpolatedColor (n); retornar string.Concat ("#", colour.R.ToString ("X"), colour.G.ToString ("X"), colour.B.ToString ("X"));
DJIDave
@DJIDave: Uau, que erro óbvio e estúpido. Eu consertei isso. Obrigado!
Tara
2

Você precisa interpolar linearmente (LERP) os componentes de cores. Veja como isso é feito, em geral, dado um valor inicial v0 , um valor final v1 e a taxa necessária (uma flutuação normalizada entre 0,0 e 1,0):

v = v0 + ratio * (v1 - v0)

Isso fornece v0 quando a proporção é 0,0, v1 quando a proporção é 1,0 e tudo o que existe entre os outros casos.

Você pode fazer isso nos componentes RGB ou usando outro esquema de cores, como HSV ou HLS. Os dois últimos serão mais agradáveis ​​visualmente, pois trabalham com componentes de matiz e brilho que mapeiam melhor a nossa percepção de cores.

efotinis
fonte
2

Eu diria que você quer algo entre um segmento de linha no espaço HSV (que tem um amarelo levemente brilhante demais no centro) e um segmento de linha no espaço RGB (que tem um marrom feio no centro). Eu usaria isso, onde power = 0darei verde, power = 50darei um amarelo levemente opaco e power = 100darei vermelho.

blue = 0;
green = 255 * sqrt( cos ( power * PI / 200 ));
red = 255 * sqrt( sin ( power * PI / 200 )); 
Dawood ibn Kareem
fonte
2

Aqui está a solução de copiar e colar para as escalas Swift e HSV:

O inicializador UIColor aceita matiz, saturação e brilho em [0, 1]; portanto, para um determinado valor de [0, 1], temos:

let hue:        CGFloat = value / 3
let saturation: CGFloat = 1 // Or choose any
let brightness: CGFloat = 1 // Or choose any
let alpha:      CGFloat = 1 // Or choose any

let color = UIColor(hue: hue, saturation: saturation, brightness: brightness, alpha: alpha)
Stanislav Pankevich
fonte
1
import java.awt.Color;

public class ColorUtils {

    public static Color interpolate(Color start, Color end, float p) {
        float[] startHSB = Color.RGBtoHSB(start.getRed(), start.getGreen(), start.getBlue(), null);
        float[] endHSB = Color.RGBtoHSB(end.getRed(), end.getGreen(), end.getBlue(), null);

        float brightness = (startHSB[2] + endHSB[2]) / 2;
        float saturation = (startHSB[1] + endHSB[1]) / 2;

        float hueMax = 0;
        float hueMin = 0;
        if (startHSB[0] > endHSB[0]) {
            hueMax = startHSB[0];
            hueMin = endHSB[0];
        } else {
            hueMin = startHSB[0];
            hueMax = endHSB[0];
        }

        float hue = ((hueMax - hueMin) * p) + hueMin;

        return Color.getHSBColor(hue, saturation, brightness);
    }
}
mawi
fonte
1

Se você precisar desse tipo de gradiente (na verdade, invertido) em CSS (versão mínima 2.1), também poderá usar o HSL.

Supondo que você esteja em um modelo AngularJs e o valor seja um número de 0 a 1 e que você queira estilizar um elemento (cor de fundo ou de texto) ...

hsl({{ value * 120}}, 50%, 35%)

Primeiro valor: graus (0 vermelho, 120 verde) Segundo valor: saturação (50% é neutro) Terceiro valor: luminosidade (50% neutro)

Um bom artigo aqui

Teoria na Wikipedia aqui

lucabelluccini
fonte
1

Aqui está a Objective-Cversão da solução da Simucal:

- (UIColor*) colorForCurrentLevel:(float)level
{
    double hue = level * 0.4; // Hue (note 0.4 = Green)
    double saturation = 0.9; // Saturation
    double brightness = 0.9; // Brightness

    return [UIColor colorWithHue:hue saturation:saturation brightness:brightness alpha:1.0];
}

Onde nível seria um valor entre 0.0e 1.0.
Espero que isso ajude alguém!

S1LENT WARRIOR
fonte
1

No Python 2.7:

import colorsys

def get_rgb_from_hue_spectrum(percent, start_hue, end_hue):
    # spectrum is red (0.0), orange, yellow, green, blue, indigo, violet (0.9)
    hue = percent * (end_hue - start_hue) + start_hue
    lightness = 0.5
    saturation = 1
    r, g, b = colorsys.hls_to_rgb(hue, lightness, saturation)
    return r * 255, g * 255, b * 255

# from green to red:
get_rgb_from_hue_spectrum(percent, 0.3, 0.0)

# or red to green:
get_rgb_from_hue_spectrum(percent, 0.0, 0.3)

Por cento é claro value / max_value. Ou se sua escala não começar em 0, então (value - min_value) / (max_value - min_value).

Christopher Galpin
fonte
1

Javascript

Estou usando o Google Visualization com gráfico de barras e queria que as barras ficassem verdes e vermelhas com base em uma porcentagem. Acabou sendo a solução mais limpa que encontrei e funciona perfeitamente.

function getGreenToRed(percent){
    r = percent<50 ? 255 : Math.floor(255-(percent*2-100)*255/100);
    g = percent>50 ? 255 : Math.floor((percent*2)*255/100);
    return 'rgb('+r+','+g+',0)';
}

Apenas verifique se o seu percentual é 50 para 50% e não para 0,50.

Patrick
fonte
1

Atualizei a resposta aceita dividindo-a na primeira e na segunda metade do intervalo (0,100) e substituindo 100 por um nível máximo, para que o intervalo possa se tornar dinâmico. O resultado é exatamente como no modelo HSV, mas ainda usando RGB. A chave é ter o (255.255,0) no meio para representar a cor amarela. Combinei essa idéia na resposta aceita e em outro código VBA, para alcançá-la no VBA e usar no Excel. Espero que a lógica ajude e possa ser usada em outros idiomas / aplicativos.

Sub UpdateConditionalFormatting(rng As Range)
    Dim cell As Range
    Dim max As Integer

    max = WorksheetFunction.max(rng)

    For Each cell In rng.Cells

    If cell.Value >= 0 And cell.Value < max / 2 Then
        cell.Interior.Color = RGB(255 * cell.Value / (max / 2), 255, 0)
    ElseIf cell.Value >= max / 2 And cell.Value <= max Then
        cell.Interior.Color = RGB(255, 255 * ((max) - cell.Value) / (max / 2), 0)
    End If

    Next cell
End Sub

Saúde, Pavlin

Pavlin Todorov
fonte
1

VB

Public Function GetPercentageColor( _
  ByVal iPercent As Long, Optional _
  ByVal bOpposit As Boolean) As Long
' 0->100% - Green->Yellow->Red
' bOpposit - Red->Yellow->Green

If bOpposit Then iPercent = (100 - iPercent)

Select Case iPercent
Case Is < 1: GetPercentageColor = 65280 ' RGB(0, 255, 0)
Case Is > 99: GetPercentageColor = 255  ' RGB(255, 0, 0)
Case Is < 50: GetPercentageColor = RGB(255 * iPercent / 50, 255, 0)
Case Else: GetPercentageColor = RGB(255, (255 * (100 - iPercent)) / 50, 0)
End Select

End Function
MartiniB
fonte
Enquanto isso pode funcionar, seria útil se você iria fornecer alguma explicação
David Glickman
0

Exemplo independente

<html>
<head>
<script>
//--------------------------------------------------------------------------
function gradient(left, mid, right)
{
    var obj = {}

    var lt50 = {"r":(mid.r-left.r)/50.0,
                "g":(mid.g-left.g)/50.0,
                "b":(mid.b-left.b)/50.0}
    var gt50 = {"r":(right.r-mid.r)/50.0,
                "g":(right.g-mid.g)/50.0,
                "b":(right.b-mid.b)/50.0}

    obj.getColor = function(percent) {
        if (percent == 50.0) {
            return mid;
        }
        if (percent < 50.0) {
            return "rgb("+Math.floor(left.r+lt50.r*percent+0.5)+","+
                          Math.floor(left.g+lt50.g*percent+0.5)+","+
                          Math.floor(left.b+lt50.b*percent+0.5)+")";
        }
        var p2 = percent-50.0;
        return "rgb("+Math.floor(mid.r+gt50.r*p2+0.5)+","+
                      Math.floor(mid.g+gt50.g*p2+0.5)+","+
                      Math.floor(mid.b+gt50.b*p2+0.5)+")";
    }

    return obj;
}

//--------------------------------------------------------------------------
var g_gradient = gradient( {"r":255, "g":20, "b":20},  // Left is red
                           {"r":255, "g":255, "b":20}, // Middle is yellow
                           {"r":20, "g":255, "b":20} ); // right is green

//--------------------------------------------------------------------------
function updateColor()
{
    var percent = document.getElementById('idtext').value.length;
    var oscore = document.getElementById('idscore');

    if (percent > 100.0) {
        percent = 100.0;
    }
    if (percent < 0.0) {
        percent = 0.0;
    }
    var col = g_gradient.getColor(percent)
    oscore.style['background-color'] = col;
    oscore.innerHTML = percent + '%';
}

</script>
</head>
<body onLoad="updateColor()">
<input size='100' placeholder='type text here' id='idtext' type="text" oninput="updateColor()" />
<br />
<br />
<div id='idscore' style='text-align:center; width:200px; border-style:solid;
     border-color:black; border-width:1px; height:20px;'> </div>
</body>
</html>
Amnon
fonte
0

Isso varia de vermelho a amarelo e, em seguida, a verde o
valor varia de 0 a 100

-(UIColor*) redToGreenColorWithPosition:(int) value {

    double R, G;
    if (value > 50) {
        R = (255 * (100 - value)/ 50) ;
        G = 255;
    }else {
        R = 255;
        G = (255 * (value*2)) / 100;
    }

    return [UIColor colorWithRed:R/255.0f green:G/255.0f blue:0.0f alpha:1.0f];
}
Simon Fernandes
fonte