Roku Developer Program

Join our online forum to talk to Roku developers and fellow channel creators. Ask questions, share tips with the community, and find helpful resources.
cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Romans_I_XVI
Roku Guru

HSVA to RGBA function

I decided I wanted to be able to adjust color with a single slider like you would on the "hue" bar in GIMP ( or Photoshop or whatever ). The colors are created with a combination of Hue, Saturation, and Value. Instead of Red, Blue, Green.

So just in case somebody wants to do this too here is your function - h = hue , s = saturation, v = value, a = alpha


Function HSVAtoRGBA(h%,s%,v%,a%) As Integer
' Romans_I_XVI port (w/ a few tweaks) of:
' http://schinckel.net/2012/01/10/hsv-to-rgb-in-javascript/

h% = h% MOD 360

rgb = [ 0, 0, 0 ]
if s% = 0 then
rgb = [v%/100, v%/100, v%/100]
else
s = s%/100 : v = v%/100 : h = h%/60 : i = int(h)

data = [v*(1-s), v*(1-s*(h-i)), v*(1-s*(1-(h-i)))]

if i = 0 then
rgb = [v, data[2], data[0]]
else if i = 1 then
rgb = [data[1], v, data[0]]
else if i = 2 then
rgb = [data[0], v, data[2]]
else if i = 3 then
rgb = [data[0], data[1], v]
else if i = 4 then
rgb = [data[2], data[0], v]
else
rgb = [v, data[0], data[1]]
end if
end if

for c = 0 to rgb.count()-1 : rgb[c] = int(rgb[c] * 255) : end for
color% = (rgb[0] << 24) + (rgb[1] << 16) + (rgb[2] << 😎 + a%

return color%
End Function


I converted a Javascript function that I found to work for BrightScript.

Cheers.

Edit: I've changed the code to use dev42's code which solves the problem with the color getting clipped off at a baby blue and not continuing all the way back to red. Thank you very much Dev42!
0 Kudos
38 REPLIES 38
Komag
Roku Guru

Re: HSVA to RGBA function

That looks useful - maybe i could be Cint(h) to be a bit more accurate
0 Kudos
squirreltown
Roku Guru

Re: HSVA to RGBA function

Thanks for posting this I'm totally stealing it.
Kinetics Screensavers
0 Kudos
Romans_I_XVI
Roku Guru

Re: HSVA to RGBA function

Glad I could help.

And Komag - the original javascript function was using a floor function. Here is what I based it on.
http://schinckel.net/2012/01/10/hsv-to- ... avascript/
0 Kudos
dev42
Visitor

Re: HSVA to RGBA function

oooh oooh oooh! I wanna steal it too! I wanna steal it too!

OK, but a question... why not return hex value in the first place?
It's not that I didn't read THIS, I just didn't catch it at first.
... and I wanted to do bit shifting and keep things hexy.
0 Kudos
Romans_I_XVI
Roku Guru

Re: HSVA to RGBA function

Glad you like it dev42 . How were you planning on implementing it though? I'm currently jumping through about 3 hoops. But it doesn't matter too much because I'm not running these functions often.

I start with that original HSVAtoRGBA function, which gives me a decimal. Then I have to pass it through this function.


function decToHex (dec) as string
hexTab = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F"]
hex = ""
while dec > 0
hex = hexTab [dec mod 16] + hex
dec = dec / 16
end while
if hex = "" return "0" else return hex
end function


Then I'm left with a string that I finally turn back into hex like so.

val(hexstring,16)


In my Brightscript I'm doing it like this.

 some_hex_color = val(decTohex(HSVAtoRGBA(hue,sat,100,255)),16)
0 Kudos
dev42
Visitor

Re: HSVA to RGBA function

"Romans_I_XVI" wrote:
How were you planning on implementing it though?

Pardon my ignorance, and I'm not as nimble as others here, but why do you need the hex codes? I thought TheEndless' comment was that you could just use the color as an Integer/roInteger?

It's hard to say how I'd do it... Smiley LOL Warning! Continue at your own peril.

Options include, but are not limited to:
  • using roByteArray.toHexString()

  • convert each color channel into a Hex String and concatenate them together

  • make a Look Up table... Just a spectrum bitmap & a percentage ...

  • can colors be read from screen?


The huge numbers that you are multiplying by work. So why change it? But I'd prefer, "R << 24 + G << 16 + B << 8 + a" or whatever they are supposed to be.

edit: Supposedly they should be: "(R << 24) + (G << 16) + (B << 8 ) + a"
I don't know order of operations apparently. ( extra space lest I get a smiley instead of an 8 )
0 Kudos
Romans_I_XVI
Roku Guru

Re: HSVA to RGBA function

Ic. For me the integers only worked up to a certain number, then the color stopped changing. I have no idea why, all I know is I got it to work by doing what's in my previous post.
0 Kudos
dev42
Visitor

Re: HSVA to RGBA function

[spoiler=tiny updates to HSVAtoRGBA v3:2n1w1e57]
Function HSVAtoRGBA(h%,s%,v%,a%) As Integer
' Romans_I_XVI port (w/ a few tweaks) of:
' http://schinckel.net/2012/01/10/hsv-to-rgb-in-javascript/
h% = h% MOD 360

rgb = [ 0, 0, 0 ]
if s% = 0 then
rgb = [v, v, v]
else
s = s%/100 : v = v%/100 : h = h%/60 : i = int(h)

data = [v*(1-s), v*(1-s*(h-i)), v*(1-s*(1-(h-i)))]

if i = 0 then
rgb = [v, data[2], data[0]]
else if i = 1 then
rgb = [data[1], v, data[0]]
else if i = 2 then
rgb = [data[0], v, data[2]]
else if i = 3 then
rgb = [data[0], data[1], v]
else if i = 4 then
rgb = [data[2], data[0], v]
else
rgb = [v, data[0], data[1]]
end if
end if

for c = 0 to rgb.count()-1 : rgb[c] = int(rgb[c] * 255) : end for
color% = (rgb[0] << 24) + (rgb[1] << 16) + (rgb[2] << 😎 + a%

return color%
End Function
[/spoiler:2n1w1e57]
And my incredibly detailed/painstakingly laborious testing:
for hue = 0 to 360
scr.DrawLine(100,100+hue,200,100+hue, HSVAtoRGBA(hue,100,100,255))
end for

TO DO: maybe add some bounds checking on the h, s, v, a params?
0 Kudos
Romans_I_XVI
Roku Guru

Re: HSVA to RGBA function

Nice code dev42. Please try this with draw object. I promise you, once your integer gets greater than 2147483647 the color will stop changing. I have no idea why, or maybe I'm wrong and I was half asleep when I was doing this stuff. But I'm 99% sure, that if I just omitted all of these functions we're working with, and just plugged in an integer to drawobject , the color stops changing at 2147483647

Let me know if you get these same results.
0 Kudos