Vraag Kleurschaalfunctie


Ik probeer een aantal waarden op een formulier te visualiseren. Ze variëren van 0 tot 200 en ik zou willen dat degenen rond 0 groen zijn en helderrood worden als ze naar 200 gaan.

In principe moet de functie de kleur retourneren op basis van de ingevoerde waarde. Om het even welke ideeën?


14
2017-10-03 20:49


oorsprong


antwoorden:


Kort gezegd is de algemene methode voor een vloeiende overgang tussen twee waarden de volgende functie:

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

Met dat gegeven definieert u een functie die de overgang uitvoert voor triplets (RGB, HSV, enz.).

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)

Ervan uitgaande dat je RGB-kleuren hebt voor de s en e drietallen, kunt u de transition3-functie gebruiken zoals ze is. Het doorlopen van de HSV-kleurenruimte produceert echter meer "natuurlijke" overgangen. Dus, gezien de conversiefuncties (schaamteloos gestolen uit de Python-colorys-module en geconverteerd naar pseudocode :):

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

, je kunt code als volgt hebben:

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

17
2017-10-03 21:26



Je zegt niet in welke omgeving je dit doet. Als je kunt werken HSV-kleuren, dit zou vrij eenvoudig zijn om te doen door S = 100 en V = 100 in te stellen en H te bepalen door:

H = 0.4 * value + 120

Converteren van HSV naar RGB is ook redelijk eenvoudig.

[EDIT] Opmerking: in tegenstelling tot sommige andere voorgestelde oplossingen, zal dit de kleur groen -> geel -> oranje -> rood veranderen.


7
2017-10-03 20:57



red = (float)val / 200 * 255;

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

blue = 0;

return red << 16 + green << 8 + blue;

7
2017-10-03 20:51



Kies een groen die je leuk vindt (RGB1 = # 00FF00, bijvoorbeeld) en een rode die je mooi vindt (RGB2 = # FF0000, bijvoorbeeld) en bereken vervolgens de kleur zoals deze

R = R1 * (200-i)/200 + R2 * i/200
G = G1 * (200-i)/200 + G2 * i/200
B = B1 * (200-i)/200 + B2 * i/200

3
2017-10-03 20:55



Voor een optimaal beheersbaar en nauwkeurig effect moet u de HSV-kleurruimte gebruiken. Met HSV kunt u de tint, verzadiging en / of helderheid gemakkelijk van elkaar scheiden. Vervolgens voert u de transformatie uit naar RGB.


2
2017-10-03 20:57



uitbreiding op de code van @ tzot ... u kunt ook een midden instellen tussen de begin- en eindpunten, wat handig kan zijn als u een "overgangskleur" wilt!

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

2
2018-02-18 03:31



Doorkijken dit Wikipedia-artikel Ik zou persoonlijk een pad door een kleurenruimte kiezen en de waarden op dat pad in kaart brengen.

Maar dat is een rechte functie. Ik denk dat je misschien beter geschikt bent voor een javascript kleurkiezer die je kunt vinden met een snelle kleur die je de Hex geeft, en je kunt de Hex opslaan.


1
2017-10-03 20:53



Als u lineaire hellingshoeken voor rode en groene waarden gebruikt, zoals Peter Parker suggereerde, zal de kleur voor waarde 100 in principe gelijk zijn aan kots groen (127, 127, 0). Je wilt idealiter dat het een fel oranje of geel is in dat middelpunt. Daarvoor kunt u gebruik maken van:

Red = max(value / 100, 1) * 255
Green = (1 - max(value / 100, 1)) * 255
Blue = 0

0
2017-10-03 21:27