15

フォームでいくつかの値を視覚化しようとしています。それらの範囲は 0 から 200 までで、0 付近を緑にして、200 に近づくにつれて明るい赤に変えたいと思います。

基本的に、関数は入力された値に基づいて色を返す必要があります。何か案は ？

4

8 に答える 8

17

基本的に、2 つの値の間をスムーズに移行するための一般的な方法は、次の関数です。

function transition(value, maximum, start_point, end_point):
    return start_point + (end_point - start_point)*value/maximum

その場合、トリプレット (RGB、HSV など) の遷移を行う関数を定義します。

function transition3(value, maximum, (s1, s2, s3), (e1, e2, e3)):
    r1= transition(value, maximum, s1, e1)
    r2= transition(value, maximum, s2, e2)
    r3= transition(value, maximum, s3, e3)
    return (r1, r2, r3)

sおよびeトリプレットにRGB カラーがあると仮定すると、transition3 関数をそのまま使用できます。ただし、HSV カラー スペースを使用すると、より「自然な」遷移が生成されます。したがって、変換関数が与えられた場合 (恥知らずに Python colorsys モジュールから盗まれ、疑似コードに変換されました:):

function rgb_to_hsv(r, g, b):
    maxc= max(r, g, b)
    minc= min(r, g, b)
    v= maxc
    if minc == maxc then return (0, 0, v)
    diff= maxc - minc
    s= diff / maxc
    rc= (maxc - r) / diff
    gc= (maxc - g) / diff
    bc= (maxc - b) / diff
    if r == maxc then
        h= bc - gc
    else if g == maxc then
        h= 2.0 + rc - bc
    else
        h = 4.0 + gc - rc
    h = (h / 6.0) % 1.0 //comment: this calculates only the fractional part of h/6
    return (h, s, v)

function hsv_to_rgb(h, s, v):
    if s == 0.0 then return (v, v, v)
    i= int(floor(h*6.0)) //comment: floor() should drop the fractional part
    f= (h*6.0) - i
    p= v*(1.0 - s)
    q= v*(1.0 - s*f)
    t= v*(1.0 - s*(1.0 - f))
    if i mod 6 == 0 then return v, t, p
    if i == 1 then return q, v, p
    if i == 2 then return p, v, t
    if i == 3 then return p, q, v
    if i == 4 then return t, p, v
    if i == 5 then return v, p, q
    //comment: 0 <= i <= 6, so we never come here

、次のようなコードを持つことができます：

start_triplet= rgb_to_hsv(0, 255, 0) //comment: green converted to HSV
end_triplet= rgb_to_hsv(255, 0, 0) //comment: accordingly for red

maximum= 200

… //comment: value is defined somewhere here

rgb_triplet_to_display= hsv_to_rgb(transition3(value, maximum, start_triplet, end_triplet))
于 2008-10-03T21:26:19.713 に答える
7 
red = (float)val / 200 * 255;

green = (float)(200 - val) / 200 * 255;

blue = 0;

return red << 16 + green << 8 + blue;
于 2008-10-03T20:51:46.210 に答える
7

どの環境でこれを行っているかは言いません。HSV カラーを使用できる場合、S = 100 と V = 100 を設定し、次のように H を決定することで、これを行うのは非常に簡単になります。

H = 0.4 * value + 120

HSV から RGB への変換もかなり簡単です。

[編集] 注: 他の提案された解決策とは対照的に、これは色が緑 -> 黄 -> オレンジ -> 赤に変わります。

于 2008-10-03T20:57:50.193 に答える
3

好きな緑 (RGB1 = #00FF00 など) と好きな赤 (RGB2 = #FF0000 など) を選んで、次のように色を計算します。

R = R1 * (200-i)/200 + R2 * i/200
G = G1 * (200-i)/200 + G2 * i/200
B = B1 * (200-i)/200 + B2 * i/200
于 2008-10-03T20:55:11.570 に答える
2

@tzot のコードを拡張します...開始点と終了点の間に中間点を設定することもできます。これは、「遷移色」が必要な場合に役立ちます!

//comment: s = start_triplet, m = mid_triplet, e = end_triplet
function transition3midpoint = (value, maximum, s, m, e):
    mid = maximum / 2
    if value < mid
      return transition3(value, mid, s, m)
    else
      return transition3(value - mid, mid, m, e)
于 2012-02-18T03:31:33.040 に答える
2

最適な制御可能で正確な効果を得るには、HSV カラー スペースを使用する必要があります。HSV を使用すると、色相、彩度、および/または明度を互いに分離して簡単にスケーリングできます。次に、RGB への変換を行います。

于 2008-10-03T20:57:34.077 に答える
1

Peter Parkerが提案したように、赤と緑の値に線形ランプを使用する場合、値100の色は基本的にプークグリーン（127、127、0）になります。理想的には、その中間点で明るいオレンジまたは黄色にする必要があります。そのために、あなたは使うことができます：

Red = max(value / 100, 1) * 255
Green = (1 - max(value / 100, 1)) * 255
Blue = 0
于 2008-10-03T21:27:57.697 に答える
1

このウィキペディアの記事を見ると、私は個人的に色空間を介してパスを選択し、値をそのパスにマッピングします。

しかし、それはまっすぐな機能です。16進数を与えるクイックカラーで見つけることができ、16進数を保存できるjavascriptカラーチューザーの方が適していると思います。

于 2008-10-03T20:53:06.753 に答える