Color fade math

BlitzMax Forums/BlitzMax Programming/Color fade math

ima747

(Posted 2011) [#1]

Brain failure, hopefully someone can help with this.

I have a percentage (expressed in a float, e.g. 0.5 for 50%).

I have a number of colors that I want to fade between depending on the percentage supplied. e.g.
Green------------Red------------Gray----------White

How do I get an appropriate RGB value for a given percentage along that line. e.g.

X-------------------------------------------------------- (0.0)
Green------------Red------------Gray----------White
RGB: 0, 255, 0

--------------------------------------------------------X (1.0)
Green------------Red------------Gray----------White
RGB: 255, 255, 255

-------------------------------------X------------------- (0.66)
Green------------Red------------Gray----------White
RGB: 127, 127, 127

------------------------------X-------------------------- (0.5)
Green------------Red------------Gray----------White
RGB: = 191, 127, 127

It's easy enough to fade from a color at 0 to another at 1, but how do I add "striations" inbetween? The only thing I can think of is determine which range the target value falls in (i.e. between 0 and 0.33 is between red and green) and then get the percentage difference between the 2 and fade those values, but I suspect I'm missing a trick to make this easier... also what if I want values that aren't evenly spaced (I assume this would complicate things immensely, and is not critical but just curious). Again if I broke it down into ranges I could handle that but I have a nagging suspicion that there's an easier way...

Warpy

(Posted 2011) [#2]

Nope, don't think there's an easier way. You could do it in a very fidgety one-liner with cut-off functions, but why bother?


Graphics 600,600,0

Local colors[][] = [[0,255,0],[255,0,0],[127,127,127],[255,255,255]]
Local grades#[] = [0.0, 1.0/3, 2.0/3, 1.0]

While Not (KeyHit(KEY_ESCAPE) Or AppTerminate())
	For x=0 To 600
		t#=x/600.0
		calcColor t,colors,grades
		DrawRect x,400,1,100
	Next

	t#=MouseX()/600.0
	
	calcColor t,colors,grades
	
	DrawRect 250,150,100,100
	
	DrawLine 0,400,600,400
	DrawRect MouseX()-5,390,10,20
	
	Flip
	Cls

Wend

Function calcColor(t#,colors[][],grades#[])
	i=1
	While t>grades[i]
		i:+1
	Wend
	
	t=(t-grades[i-1])/(grades[i]-grades[i-1])
	
	red# = (1-t)*colors[i-1][0]+t*colors[i][0]
	green# = (1-t)*colors[i-1][1]+t*colors[i][1]
	blue# = (1-t)*colors[i-1][2]+t*colors[i][2]
	
	SetColor red,green,blue
EndFunction

Warpy

(Posted 2011) [#3]

For reference, here's that fidgety one-liner (on four lines)

Function calcColor2(t#)
	red = (t<1.0/3)*(t*3)*255 + (t>=1.0/3 And t<2.0/3)*(255*(1-(t-1.0/3)*3)+127*(t-1.0/3)*3) + (t>=2.0/3)*(127*(1-(t-2.0/3)*3)+255*(t-2.0/3)*3)
	green = (t<1.0/3)*(1-t*3)*255 + (t>=1.0/3 And t<2.0/3)*(127*(t-1.0/3)*3) + (t>=2.0/3)*(127*(1-(t-2.0/3)*3)+255*(t-2.0/3)*3)
	blue = (t>=1.0/3 And t<2.0/3)*(127*(t-1.0/3)*3) + (t>=2.0/3)*(127*(1-(t-2.0/3)*3)+255*(t-2.0/3)*3)
	SetColor red,green,blue
End Function

Warpy

(Posted 2011) [#4]

Post-post-script: I'm just doing a linear interpolation on the RGB values here. For a better-looking effect, it might be worthwhile using HSV, to maintain constant luminosity.

ima747

(Posted 2011) [#5]

Great sample, thanks for that! Was what I was thinking but now I'm not going cross eyed trying to keep it straight in my head and get it down :0)

Good note about HSV. Never really worked with it before but depending on how a simple RGB implementation ends up looking (it's coloration for vertexes on a terrain map, so there are plenty of other lighting things going on that may either help or hinder the ends result) I may chase that one as well...