Java 게임을 작성 중이며 무언가를 얼마나 열심히 쏠 지에 대한 파워 미터를 구현하고 싶습니다.

0에서 100 사이의 정수를 취하는 함수를 작성해야하며 그 숫자의 높이에 따라 녹색 (파워 스케일에서 0)과 빨간색 (파워 스케일에서 100) 사이의 색상을 반환합니다.

볼륨 컨트롤의 작동 방식과 유사합니다 :

녹색과 빨간색 사이의 색상을 생성하려면 색상의 빨강, 녹색 및 파랑 구성 요소에서 어떤 작업을 수행해야합니까?

그래서 나는 말할 수 있고 getColor(80), 그것은 오랑 지 색상 (R, G, B의 값) getColor(10)을 반환하거나 더 녹색 / 노란색 RGB 값을 반환합니다.

새 색상에 대해 R, G, B 값의 구성 요소를 늘려야한다는 것을 알고 있지만 녹색-빨간색에서 색상이 이동함에 따라 무엇이 올라가거나 내려가는 지 구체적으로 알 수 없습니다.

진행:

나는 gradiant를 더 좋아했기 때문에 HSV / HSB 색 공간을 사용했습니다 (중간에 어두운 갈색 없음).

내가 사용한 기능은 다음과 같습니다.

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

여기서 "power"는 0.0과 1.0 사이의 숫자입니다. 0.0은 밝은 빨간색을, 1.0은 밝은 녹색을 반환합니다.

자바 색조 차트 :

이것은 작동해야합니다-빨강 및 녹색 값을 선형으로 조정하십시오. 최대 빨강 / 녹색 / 파랑 값이 255이고 n범위 내에 있다고 가정0 .. 100

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

(정수 수학, Ferrucio의 모자 팁 수정)

또 다른 방법은 HSV 색상 모델 을 사용하고 채도 및 값에 따라 색조를 0 degrees(적색)에서 120 degrees(녹색)으로 순환시키는 것입니다. 이것은 더 즐거운 그라디언트를 제공해야합니다.

다음은 각 기법의 데모입니다. 상단 그라디언트는 RGB를 사용하고 하단은 HSV를 사용합니다.

내 머리 꼭대기에서 HSV 공간의 녹색-빨강 색조 전환이 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)

위의 예에서 빨강, 녹색, 파랑 값은 백분율이므로 가장 많이 사용되는 0-255 범위를 얻기 위해 255를 곱하는 것이 좋습니다.

Short Copy'n'Paste 답변 ...

Java Std에서 :

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

안드로이드 :

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

참고 : 값은 빨강-녹색 조건을 나타내는 0과 1 사이의 숫자입니다.

허용 된 답변과 같은 녹색-노랑-빨강 표현을 원한다면 이것을보십시오.

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>

녹색과 빨간색 사이의 선형 보간은 거의 작동해야합니다. 단, 중간에는 진흙 갈색이 있습니다.

가장 유연하고 가장보기 좋은 솔루션은 원하는 정확한 색상 램프가있는 이미지 파일을 어딘가에 배치하는 것입니다. 그런 다음 픽셀 값을 찾아보십시오. 그래디언트를 올바르게 조정할 수있는 유연성이 있습니다 .

여전히 코드에서 코드를 작성하려면 왼쪽의 녹색과 노란색 사이, 오른쪽의 노란색과 빨간색 사이를 보간하는 것이 가장 좋습니다. RGB 공간에서 녹색은 (R = 0, G = 255, B = 0), 노랑은 (R = 255, G = 255, B = 0), 빨강은 (R = 255, G = 0, B = 0) )-각 색상 구성 요소가 0에서 255로 가정합니다.

작은 함수로 백분율 값에 대한 RGB 정수 값을 제공합니다.

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

따라서 currentValue가 50이고 maxValue가 100 인 경우이 함수는 필요한 색상을 반환하므로이 함수를 백분율 값으로 반복하면 색상 값이 녹색에서 빨간색으로 바뀝니다. 나쁜 설명으로 죄송합니다

수락 된 답변은 실제로 질문에 대답하지 못했습니다 ...

C ++

다음은 세 가지 임의의 색상 사이를 선형적이고 효율적으로 보간하는 엔진의 간단한 C ++ 코드 세그먼트입니다.

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

의 interpolation_factor범위 내에있는 것으로 가정합니다 0.0 ... 1.0.
색상은 범위 0.0 ... 1.0(예 : OpenGL)에 있다고 가정합니다 .

씨#

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

의 interpolationFactor범위 내에있는 것으로 가정합니다 0.0 ... 1.0.
색상의 범위는 ~ 인 것으로 가정합니다 0 ... 255.

색상 구성 요소 를 선형 보간 (LERP) 해야합니다 . 시작 값 v0 , 종료 값 v1 및 필요한 비율 (0.0과 1.0 사이의 정규화 된 부동 소수점)이 주어지면 일반적으로 수행되는 방법은 다음과 같습니다 .

v = v0 + ratio * (v1 - v0)

이것은 비율이 0.0 일 때 v0, 비율이 1.0 일 때 v1 및 다른 경우 사이의 모든 것을 제공합니다.

RGB 구성 요소에서 또는 HSV 또는 HLS와 같은 다른 색 구성표를 사용하여이 작업을 수행 할 수 있습니다. 후자는 두 가지 색상 인식에 더 잘 어울리는 색조 및 밝기 구성 요소에서 작동하기 때문에 시각적으로 더 즐겁습니다.

HSV 공간의 선분 (중앙에 약간 너무 밝은 노란색이 있음)과 RGB 공간의 선분 (중앙에 못생긴 갈색) 사이에 무언가를 원한다고 말하고 싶습니다. 나는 이것을 사용 power = 0하여 녹색 power = 50을 줄 것이고 약간 둔한 노란색 power = 100을 줄 것이고 빨간색을 줄 것입니다.

blue = 0;
green = 255 * sqrt( cos ( power * PI / 200 ));
red = 255 * sqrt( sin ( power * PI / 200 )); 

Swift 및 HSV 스케일을위한 복사 및 붙여 넣기 솔루션은 다음과 같습니다.

UIColor 초기화 프로그램은 [0, 1]에서 색조, 채도 및 밝기를 허용하므로 [0, 1]의 주어진 값에 대해 다음 을 갖습니다.

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)

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

CSS (최소 버전 2.1)에서 이런 종류의 그라디언트 (실제로 반대로)가 필요한 경우 HSL도 사용할 수 있습니다.

AngularJs 템플릿에 있고 값이 0에서 1 사이의 숫자이고 요소 (배경 또는 텍스트 색상)의 스타일을 지정하려고한다고 가정합니다 ...

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

첫 번째 값 :도 (0 빨강, 120 녹색) 두 번째 값 : 채도 (50 %는 중립) 세 번째 값 : 밝기 (50 % 중립)

여기 좋은 기사

위키 백과에 대한 이론 여기

Objective-CSimucal 솔루션 의 버전은 다음과 같습니다 .

- (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];
}

어디 수준 사이의 값이 될 것입니다 0.0및 1.0.
이것이 누군가를 돕기를 바랍니다!

파이썬 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)

물론 퍼센트입니다 value / max_value. 또는 스케일이 0에서 시작하지 않으면 (value - min_value) / (max_value - min_value).

자바 스크립트

막대 차트와 함께 Google 시각화를 사용하고 있으며 백분율을 기준으로 막대가 녹색에서 빨간색으로 표시되기를 원했습니다. 이것은 내가 찾은 깨끗하고 완벽하게 작동하는 것으로 판명되었습니다.

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

0.50이 아닌 50 %의 백분율이 50인지 확인하십시오 .

허용 된 답변을 (0,100) 범위의 전반과 후반으로 나누고 100을 최대 수준으로 대체하여 범위가 동적이 될 수 있도록 허용 된 답변을 업데이트했습니다. 결과는 HSV 모델과 동일하지만 여전히 RGB를 사용합니다. 핵심은 노란 색을 나타 내기 위해 중간에 (255,255,0)을 갖는 것입니다. 이 아이디어를 허용 된 답변과 다른 VBA 코드에 결합 했으므로 VBA에서 달성하고 Excel에서 사용하십시오. 이 논리가 다른 언어 / 응용 프로그램에서 도움이되고 사용될 수 있기를 바랍니다.

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

건배, 파 블린

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

자체 포함 된 예

<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>

빨간색에서 노란색으로 변한 다음 녹색으로 변경되면
0-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];
}