Author Topic: HSL to RGB converter - useful for graphics!  (Read 4101 times)

0 Members and 1 Guest are viewing this topic.

Offline loudar

  • Newbie
  • Posts: 73
  • improve it bit by bit.
    • View Profile
HSL to RGB converter - useful for graphics!
« on: October 16, 2020, 04:03:22 pm »
Hey!

Used this for a while and I think I've fixed every major bug, if you happen to have improvements I'll take them :D Give it a hue, saturation, lightness and alpha and you can read out the R, G and B values if you need to, but works nice just to shift things in color or whatever. Have fun!

Code: QB64: [Select]
  1. '-------------------------------- DEMO --------------------------------'
  2.  
  3. SCREEN _NEWIMAGE(1000, 500, 32)
  4.  
  5. 'definitions
  6. h = 0 'takes values from 0 to 359
  7. s = 1 'takes values from 0 to 1
  8. l = 1 'takes values from 0 to 1
  9. changepercycle = 5
  10.  
  11.     h = h + changepercycle 'changes the hue each loop
  12.     keyhit = _KEYHIT
  13.  
  14.     colour& = hsltorgb~&(h, s, l, 255)
  15.     COLOR colour&
  16.     PRINT h, s, l, "HSL", _RED(colour&), _GREEN(colour&), _BLUE(colour&), "RGB"
  17.     _LIMIT 60
  18. LOOP UNTIL keyhit = 13
  19.  
  20.  
  21. '-------------------------------- DEMO --------------------------------'
  22.  
  23. FUNCTION hr& (hue AS _FLOAT, saturation AS _FLOAT, lightness AS _FLOAT)
  24.     SELECT CASE hue
  25.         CASE IS < 60 AND hue >= 0: tr = 1
  26.         CASE IS < 120 AND hue >= 60: tr = 1 - ((hue - 60) / 60)
  27.         CASE IS < 180 AND hue >= 120: tr = 0
  28.         CASE IS < 240 AND hue >= 180: tr = 0
  29.         CASE IS < 300 AND hue >= 240: tr = (hue - 240) / 60
  30.         CASE IS < 360 AND hue >= 300: tr = 1
  31.     END SELECT
  32.     hr& = tr * 255
  33.  
  34. FUNCTION hg& (hue AS _FLOAT, saturation AS _FLOAT, lightness AS _FLOAT)
  35.     SELECT CASE hue
  36.         CASE IS < 60 AND hue >= 0: tg = hue / 60
  37.         CASE IS < 120 AND hue >= 60: tg = 1
  38.         CASE IS < 180 AND hue >= 120: tg = 1
  39.         CASE IS < 240 AND hue >= 180: tg = 1 - ((hue - 180) / 60)
  40.         CASE IS < 300 AND hue >= 240: tg = 0
  41.         CASE IS < 360 AND hue >= 300: tg = 0
  42.     END SELECT
  43.     hg& = tg * 255
  44.  
  45. FUNCTION hb& (hue AS _FLOAT, saturation AS _FLOAT, lightness AS _FLOAT)
  46.     SELECT CASE hue
  47.         CASE IS < 60 AND hue >= 0: tb = 0
  48.         CASE IS < 120 AND hue >= 60: tb = 0
  49.         CASE IS < 180 AND hue >= 120: tb = (hue - 120) / 60
  50.         CASE IS < 240 AND hue >= 180: tb = 1
  51.         CASE IS < 300 AND hue >= 240: tb = 1
  52.         CASE IS < 360 AND hue >= 300: tb = 1 - ((hue - 300) / 60)
  53.     END SELECT
  54.     hb& = tb * 255
  55.  
  56. FUNCTION hsltorgb~& (conH, conS, conL, conA)
  57.     IF conH >= 360 THEN conH = (conH MOD 360) * 360
  58.     IF conS > 1 THEN conS = 1
  59.     IF conL > 1 THEN conL = 1
  60.  
  61.     objR = hr&(conH, conS, conL) * conS
  62.     objG = hg&(conH, conS, conL) * conS
  63.     objB = hb&(conH, conS, conL) * conS
  64.  
  65.     'maximizing to full 255
  66.     IF objR >= objG AND objG >= objB THEN '123
  67.         factor = 255 / objR
  68.     ELSEIF objG >= objR AND objR >= objB THEN '213
  69.         factor = 255 / objG
  70.     ELSEIF objB >= objR AND objR >= objG THEN '312
  71.         factor = 255 / objB
  72.     ELSEIF objR >= objB AND objB >= objG THEN '132
  73.         factor = 255 / objR
  74.     ELSEIF objG >= objB AND objB >= objR THEN '231
  75.         factor = 255 / objG
  76.     ELSEIF objB >= objR AND objG >= objR THEN '321
  77.         factor = 255 / objB
  78.     END IF
  79.     objR = objR * factor
  80.     objG = objG * factor
  81.     objB = objB * factor
  82.  
  83.     'adjusting to lightness
  84.     objR = objR * conL
  85.     objG = objG * conL
  86.     objB = objB * conL
  87.  
  88.     'adjusting to saturation
  89.     IF objR = 0 OR objG = 0 OR objB = 0 THEN
  90.         objavg = (objR + objG + objB) / 2
  91.     ELSE
  92.         objavg = (objR + objG + objB) / 3
  93.     END IF
  94.     IF conS > 0.1 THEN
  95.         objR = objR + ((objavg - objR) * (1 - conS))
  96.         objG = objG + ((objavg - objG) * (1 - conS))
  97.         objB = objB + ((objavg - objB) * (1 - conS))
  98.     ELSE
  99.         objR = objavg
  100.         objG = objavg
  101.         objB = objavg
  102.     END IF
  103.  
  104.     hsltorgb~& = _RGBA(objR, objG, objB, conA)
Check out what I do besides coding: http://loudar.myportfolio.com/

Offline bplus

  • Global Moderator
  • Forum Resident
  • Posts: 8053
  • b = b + ...
    • View Profile
Re: HSL to RGB converter - useful for graphics!
« Reply #1 on: October 17, 2020, 02:01:44 pm »
Always liked rainbow text :)

Kind of curious where we run into HSL values in QB64?
« Last Edit: October 17, 2020, 02:03:04 pm by bplus »

Offline loudar

  • Newbie
  • Posts: 73
  • improve it bit by bit.
    • View Profile
Re: HSL to RGB converter - useful for graphics!
« Reply #2 on: October 18, 2020, 12:01:54 pm »
I don't really know where it appears natively, but it's really useful if you have a color and want to shift it by a certain degree. Can't really do that in RGB, so an HSL->RGB function is kind of necessary when working with graphics on a more specific level. I guess there's stuff that you can import that don't really need that (there was a color picker somewhere in the forum which I guess has a conversion already?) but I wrote my own for convenience and learning, so figured I'd share it anyway :D
Check out what I do besides coding: http://loudar.myportfolio.com/

Offline bplus

  • Global Moderator
  • Forum Resident
  • Posts: 8053
  • b = b + ...
    • View Profile
Re: HSL to RGB converter - useful for graphics!
« Reply #3 on: October 18, 2020, 04:49:41 pm »
Yeah, it would be handy to cycle through all colors by just changing 1 number the h for hue I assume.

And then add lightness or darkness the l for light, maybe?

But what is saturation s? something with alpha or transparencies?

Offline loudar

  • Newbie
  • Posts: 73
  • improve it bit by bit.
    • View Profile
Re: HSL to RGB converter - useful for graphics!
« Reply #4 on: October 18, 2020, 06:24:15 pm »
Saturation moves the R, G and B values closer to the average between them the smaller the value is. It's nice if you want to have things just white/grey/black or just desaturated! Can't guarantee that's the proper algorithm for it, just wanted to somehow implement it.
Check out what I do besides coding: http://loudar.myportfolio.com/

Offline bplus

  • Global Moderator
  • Forum Resident
  • Posts: 8053
  • b = b + ...
    • View Profile
Re: HSL to RGB converter - useful for graphics!
« Reply #5 on: October 19, 2020, 12:14:41 pm »
Yeah I am not seeing any work with alpha, it's just being passed through to RGBA function without change.

Offline SMcNeill

  • QB64 Developer
  • Forum Resident
  • Posts: 3972
    • View Profile
    • Steve’s QB64 Archive Forum
Re: HSL to RGB converter - useful for graphics!
« Reply #6 on: October 19, 2020, 01:18:04 pm »
Doesn’t Rhosigma’s libraries include a convertor for this?  I’m thinking it does.  If so, you might want to compare ideas and see how he does his.  ;)
https://github.com/SteveMcNeill/Steve64 — A github collection of all things Steve!

Offline bplus

  • Global Moderator
  • Forum Resident
  • Posts: 8053
  • b = b + ...
    • View Profile
Re: HSL to RGB converter - useful for graphics!
« Reply #7 on: October 19, 2020, 02:24:38 pm »
Here is bunch of things to compare: https://www.qb64.org/forum/index.php?topic=2173.msg114193#msg114193

I bet I will see Loudar's in action in AVAR when I get to it.

Offline RhoSigma

  • QB64 Developer
  • Forum Resident
  • Posts: 565
    • View Profile
Re: HSL to RGB converter - useful for graphics!
« Reply #8 on: October 19, 2020, 03:56:58 pm »
Doesn’t Rhosigma’s libraries include a convertor for this?  I’m thinking it does.  If so, you might want to compare ideas and see how he does his.  ;)

The converthelper.bm file in my libaries collection (IMG-Support folder) has functions for the HSB/HSV color model, according to Wikipedia there's a difference between HSB/HSV and HSL, although the models are very similar.

here's a good description:
https://medium.com/innovaccer-tech/rgb-vs-hsb-vs-hsl-demystified-1992d7273d3a

The essence in this article is:
Quote
Hence, the only difference is that in HSB, 100% Brightness can give you the White Colour only when the Saturation is 0 while in HSL 100% Lightness will give you the White Colour irrespective of the Saturation.
« Last Edit: October 09, 2021, 01:16:20 pm by RhoSigma »
My Projects:   https://qb64forum.alephc.xyz/index.php?topic=809
GuiTools - A graphic UI framework (can do multiple UI forms/windows in one program)
Libraries - ImageProcess, StringBuffers (virt. files), MD5/SHA2-Hash, LZW etc.
Bonus - Blankers, QB64/Notepad++ setup pack