language-agnostic - パワーメーターの赤と緑の間の色を生成しますか?

Question

私はJavaゲームを書いています。何かを撃つ強さを測るパワーメーターを実装したいと思っています。

0 から 100 までの int を受け取る関数を作成する必要があり、その数値の高さに基づいて、緑 (パワースケールでは 0) と赤 (パワースケールでは 100) の間の色を返します。

ボリュームコントロールの仕組みに似ています。
音量調節

緑と赤の間の色を生成するには、色の赤、緑、青のコンポーネントに対してどのような操作を行う必要がありますか?

したがって、実行すると、getColor(80)オレンジ色 (R、G、B の値)getColor(10)を返すか、より緑/黄色の RGB 値を返します。

新しい色の R、G、B 値のコンポーネントを増やす必要があることはわかっていますが、色が緑から赤に変わるときに何が上下するかは具体的にわかりません。

進捗：

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 は明るい緑を返します。

Java 色相チャート:

score 206 · Accepted Answer

これは機能するはずです-赤と緑の値を線形にスケーリングするだけです。赤/緑/青の最大値が255でありn、範囲内にあると仮定します0 .. 100

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

(整数演算用に修正、Ferrucio に敬意を表します)

もう 1 つの方法は、HSV カラーモデル0 degreesを使用し、色相を(赤) から120 degrees(緑) に、適切な彩度と値で循環させることです。これにより、より心地よいグラデーションが得られるはずです。

各手法のデモンストレーションを次に示します。上のグラデーションは RGB を使用し、下のグラデーションは HSV を使用します。

score 32 · Accepted Answer

頭のてっぺんから、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を掛けます。

score 14 · Accepted Answer

短いコピー＆ペーストの答え...

Java 標準の場合:

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

Android の場合:

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

注: 値は、赤から緑への状態を示す 0 から 1 までの数値です。

score 10 · Accepted Answer

受け入れられた回答が示唆するような緑黄赤の表現が必要な場合は、これを見てください。

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>

score 8 · Accepted Answer

緑と赤の間の線形補間は、真ん中に濁った茶色になることを除いて、ほとんど機能するはずです。

最も柔軟で見栄えの良い解決策は、必要な正確なカラーランプを持つ画像ファイルをどこかに置くことです。そして、そこでピクセル値を検索します。これには、グラデーションを適切に調整できる柔軟性があります。

それでもコードから実行したい場合は、左側の緑と黄色の間、および右側の黄色と赤の間を補間するのがおそらく最善です。RGB空間では、緑は（R = 0、G = 255、B = 0）、黄色は（R = 255、G = 255、B = 0）、赤は（R = 255、G = 0、B = 0）です。）-これは、各色成分が0から255になることを前提としています。

score 5 · Accepted Answer

パーセンテージ値の 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 の場合、この関数は必要な色を返します。この関数をパーセンテージ値でループすると、色の値は緑から赤になります。説明下手でごめんなさい

score 2 · Accepted Answer

色成分を線形補間（LERP）する必要があります。開始値v0、終了値v1、および必要な比率（0.0から1.0の間の正規化されたフロート）が与えられた場合の一般的な方法は次のとおりです。

v = v0 + ratio * (v1 - v0)

これにより、比率が0.0の場合はv0、比率が1.0の場合はv1、その他の場合はその間のすべてが得られます。

これは、RGBコンポーネントで行うか、HSVやHLSなどの他の配色を使用して行うことができます。後者の2つは、色覚によく対応する色相と明るさの構成要素に作用するため、視覚的に心地よいものになります。

score 1 · Accepted Answer

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

score 1 · Accepted Answer

受け入れられた回答を (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

乾杯、パブリン

score 1 · Accepted Answer

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)

パーセントはもちろんvalue / max_valueです。または、スケールが 0 から始まらない場合は(value - min_value) / (max_value - min_value).

score 1 · Accepted Answer

CSS (最小バージョン 2.1) でこの種のグラデーション (実際には反転) が必要な場合は、HSL も使用できます。

AngularJs テンプレートを使用していて、値が 0 から 1 の数値で、要素 (背景またはテキストの色) のスタイルを設定したいとします...

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

最初の値: 度 (赤 0、緑 120) 2 番目の値: 彩度 (50% ニュートラル) 3 番目の値: 明るさ (50% ニュートラル)

素敵な記事はこちら

ウィキペディアの理論はこちら

language-agnostic - パワー メーターの赤と緑の間の色を生成しますか?

19 に答える 19

Related

Reference

language-agnostic - パワーメーターの赤と緑の間の色を生成しますか?