Text Only | Text with Attachments

QB64.org Forum

Active Forums => QB64 Discussion => Topic started by: TempodiBasic on April 18, 2019, 03:47:55 pm

Title: formula to develop a gradient of a color from Black to max light with RGB system
Post by: TempodiBasic on April 18, 2019, 03:47:55 pm
Yes I like this effect and the use of _RGBA for black visibility...

I question:
there is a formula to develop a gradient of a color from Black to max light with RGB system?
I try to be clear... if I use this
Code: QB64: [Select]
  1. SCREEN _NEWIMAGE(500, 500, 32)
  2. FOR a = 1 TO 255 STEP 1
  3.     LINE (1 + a, 1)-(2 + a, 300), _RGB(0, 0, a), BF
  5.  
you get a gradient of blue, you can easily do the same with green and with red. But for the other color there is a formula?
Title: Re: formula to develop a gradient of a color from Black to max light with RGB system
Post by: Petr on April 18, 2019, 03:56:53 pm
Hi. Yes, sure. Take the starting color, for example RGB32 (120, 70, 60) and suppose the end of the color effect should be RGB32 (255, 0, 55). Then determine the number of steps that will lead to the target color, say 50 steps. Then you just compare the input and output values.
So, the first start color of RED is 120. The end is 255. That is a difference of 135, the number of steps to go to 50, so you add 135/50 in one step.
The second GREEN color is 70, the end is 0. The start is less than the target, so you take a -70/50 in one step.
And the third color BLUE turn the same thing. The start is 60, end 55. You add -5/50 in one step.
Title: Re: formula to develop a gradient of a color from Black to max light with RGB system
Post by: TempodiBasic on April 18, 2019, 04:02:14 pm
Thanks Petr
I'll study and use your info!
Title: Re: formula to develop a gradient of a color from Black to max light with RGB system
Post by: FellippeHeitor on April 18, 2019, 04:32:14 pm
lerpColor() takes two colors and returns an intermediate value between the two ranging from 0 to 1.

This example shows from black to a shade of orange. I've also used map() to translate screen coordinates into the 0-1 range.

Code: QB64: [Select]
  1. SCREEN _NEWIMAGE(500, 500, 32)
  2.  
  4.  
  5. color1 = _RGB32(0) 'black
  6. color2 = _RGB32(200, 116, 67) 'orange
  7.  
  8. FOR i = 0 TO _WIDTH
  9.     LINE (i, 0)-(i, _HEIGHT), lerpColor(color1, color2, map(i, 0, _WIDTH, 0, 1))
  11.  
  14.  
  15. FUNCTION lerpColor~& (c1 AS _UNSIGNED LONG, c2 AS _UNSIGNED LONG, __v!)
  16.     DIM v!
  17.     v! = constrain(__v!, 0, 1)
  18.  
  19.     DIM r1 AS SINGLE, g1 AS SINGLE, b1 AS SINGLE
  20.     DIM r2 AS SINGLE, g2 AS SINGLE, b2 AS SINGLE
  21.     DIM rstep AS SINGLE, gstep AS SINGLE, bstep AS SINGLE
  22.  
  23.     r1 = _RED32(c1)
  24.     g1 = _GREEN32(c1)
  25.     b1 = _BLUE32(c1)
  26.  
  27.     r2 = _RED32(c2)
  28.     g2 = _GREEN32(c2)
  29.     b2 = _BLUE32(c2)
  30.  
  31.     rstep = map(v!, 0, 1, r1, r2)
  32.     gstep = map(v!, 0, 1, g1, g2)
  33.     bstep = map(v!, 0, 1, b1, b2)
  34.  
  35.     lerpColor~& = _RGB32(rstep, gstep, bstep)
  37.  
  38. FUNCTION min! (a!, b!)
  39.     IF a! < b! THEN min! = a! ELSE min! = b!
  41.  
  42. FUNCTION max! (a!, b!)
  43.     IF a! > b! THEN max! = a! ELSE max! = b!
  45.  
  46. FUNCTION constrain! (n!, low!, high!)
  47.     constrain! = max(min(n!, high!), low!)
  49.  
  50. FUNCTION map! (value!, minRange!, maxRange!, newMinRange!, newMaxRange!)
  51.     map! = ((value! - minRange!) / (maxRange! - minRange!)) * (newMaxRange! - newMinRange!) + newMinRange!
  53.  

Same example but now going from a shade of orange to a shade of blue:
Code: QB64: [Select]
  1. SCREEN _NEWIMAGE(500, 500, 32)
  2.  
  4.  
  5. color1 = _RGB32(200, 116, 67) 'orange
  6. color2 = _RGB32(22, 122, 211) 'blue
  7.  
  8. FOR i = 0 TO _WIDTH
  9.     LINE (i, 0)-(i, _HEIGHT), lerpColor(color1, color2, map(i, 0, _WIDTH, 0, 1))
  11.  
  14.  
  15. FUNCTION lerpColor~& (c1 AS _UNSIGNED LONG, c2 AS _UNSIGNED LONG, __v!)
  16.     DIM v!
  17.     v! = constrain(__v!, 0, 1)
  18.  
  19.     DIM r1 AS SINGLE, g1 AS SINGLE, b1 AS SINGLE
  20.     DIM r2 AS SINGLE, g2 AS SINGLE, b2 AS SINGLE
  21.     DIM rstep AS SINGLE, gstep AS SINGLE, bstep AS SINGLE
  22.  
  23.     r1 = _RED32(c1)
  24.     g1 = _GREEN32(c1)
  25.     b1 = _BLUE32(c1)
  26.  
  27.     r2 = _RED32(c2)
  28.     g2 = _GREEN32(c2)
  29.     b2 = _BLUE32(c2)
  30.  
  31.     rstep = map(v!, 0, 1, r1, r2)
  32.     gstep = map(v!, 0, 1, g1, g2)
  33.     bstep = map(v!, 0, 1, b1, b2)
  34.  
  35.     lerpColor~& = _RGB32(rstep, gstep, bstep)
  37.  
  38. FUNCTION min! (a!, b!)
  39.     IF a! < b! THEN min! = a! ELSE min! = b!
  41.  
  42. FUNCTION max! (a!, b!)
  43.     IF a! > b! THEN max! = a! ELSE max! = b!
  45.  
  46. FUNCTION constrain! (n!, low!, high!)
  47.     constrain! = max(min(n!, high!), low!)
  49.  
  50. FUNCTION map! (value!, minRange!, maxRange!, newMinRange!, newMaxRange!)
  51.     map! = ((value! - minRange!) / (maxRange! - minRange!)) * (newMaxRange! - newMinRange!) + newMinRange!
  53.  
Title: Re: formula to develop a gradient of a color from Black to max light with RGB system
Post by: Petr on April 18, 2019, 05:02:15 pm
Code: QB64: [Select]
  1. SCREEN _NEWIMAGE(1024, 768, 32)
  2.  
  3.  
  4. FOR show = 0 TO 3
  6.     EFF _RGB32(RND * 255, RND * 255, RND * 255), _RGB32(RND * 255, RND * 255, RND * 255), 1024, show
  7.     SLEEP 2
  8.     CLS
  10.  
  11.  
  12.  
  13. SUB EFF (color1 AS _UNSIGNED LONG, color2 AS _UNSIGNED LONG, steps AS LONG, efect AS _BYTE)
  14.  
  15.     R1 = _RED32(color1)
  16.     G1 = _GREEN32(color1)
  17.     B1 = _BLUE32(color1)
  18.     A1 = _ALPHA32(color1)
  19.  
  20.     R2 = _RED32(color2)
  21.     G2 = _GREEN32(color2)
  22.     B2 = _BLUE32(color2)
  23.     A2 = _ALPHA32(color2)
  24.     IF R1 < R2 THEN
  25.         sR = R1
  26.         DiffR = (R2 - R1) / steps
  27.     ELSE
  28.         sR = R2
  29.         DiffR = (R1 - R2) / steps
  30.     END IF
  31.     IF G1 < G2 THEN
  32.         sG = G1
  33.         DiffG = (G2 - G1) / steps
  34.     ELSE
  35.         DiffG = (G1 - G2) / steps
  36.         sG = G2
  37.     END IF
  38.     IF B1 < B2 THEN
  39.         sB = B1
  40.         DiffB = (B2 - B1) / steps
  41.     ELSE
  42.         DiffB = (B1 - B2) / steps
  43.         sB = B2
  44.     END IF
  45.     IF A1 < A2 THEN
  46.         sA = A1
  47.         DiffA = (A2 - A1) / steps
  48.     ELSE
  49.         DiffA = (A1 - A2) / steps
  50.         sA = A2
  51.     END IF
  52.     SELECT CASE efect
  53.         CASE 0, 3 'LINE b
  54.             startX = _WIDTH / 2
  55.             startY = _HEIGHT / 2
  56.         CASE 1, 2
  57.             startX = 1
  58.             startY = 1
  59.     END SELECT
  60.  
  61.     FOR D = 1 TO steps
  62.         newcolor~& = _RGBA32((sR + (DiffR * D)), (sG + (DiffG * D)), (sB + (DiffB * D)), (sA + (DiffA * D)))
  63.         SELECT CASE efect
  64.             CASE 0 'LINE B
  65.                 LINE (startX - D, startY - D)-(startX + D, startY + D), newcolor~&, B
  66.  
  67.             CASE 1
  68.                 LINE (startX, startY + D)-(steps, startY + D), newcolor~&
  69.  
  70.             CASE 2
  71.                 LINE (startX + D, startY)-(startX + D, steps), newcolor~&
  72.  
  73.             CASE 3
  74.                 FOR E = 0 TO _PI(2) STEP .001
  75.                     PSET (startX + SIN(E) * D, startY + COS(E) * D), newcolor~&
  76.                 NEXT E
  77.         END SELECT
  78.     NEXT D
  80.  
Title: Re: formula to develop a gradient of a color from Black to max light with RGB system
Post by: bplus on April 18, 2019, 06:37:18 pm
I use my own midInk, input 2 RGB values and the fraction from 0 to 1 you want the blend of the first color towards the 2nd.
Code: QB64: [Select]
  1. _TITLE "midInk test" 'B+ 2019-04-18
  2.  
  3. CONST xmax = 800
  4. CONST ymax = 600
  5. SCREEN _NEWIMAGE(xmax, ymax, 32)
  7.  
  8. horizon% = rand(100, ymax - 100)
  9. FOR i = 0 TO horizon%
  10.     midInk 0, 0, 68, 40, 200, 255, i / horizon%
  11.     LINE (0, i)-(xmax, i)
  13. FOR i = horizon% TO ymax
  14.     midInk 120, 200, 100, 0, 48, 0, (i - horizon%) / (ymax - horizon%)
  15.     LINE (0, i)-(xmax, i)
  18.  
  19. 'from black to white just does greys
  20. FOR i = 0 TO xmax
  21.     midInk 0, 0, 0, 255, 255, 255, i / xmax
  22.     LINE (i, 0)-(i, ymax), , BF
  25.  
  26. FUNCTION rand% (lo%, hi%)
  27.     rand% = INT(RND * (hi% - lo% + 1)) + lo%
  29.  
  30. SUB midInk (r1%, g1%, b1%, r2%, g2%, b2%, fr##)
  31.     COLOR _RGB32(r1% + (r2% - r1%) * fr##, g1% + (g2% - g1%) * fr##, b1% + (b2% - b1%) * fr##)
  33.  
  34.  

EDIT: want _RGB32() not _RGB()
Title: Re: formula to develop a gradient of a color from Black to max light with RGB system
Post by: FellippeHeitor on April 18, 2019, 06:43:43 pm
Very concise, bplus! I remember having seen it on previous projects you've shared. Thanks for sharing it again!
Title: Re: formula to develop a gradient of a color from Black to max light with RGB system
Post by: bplus on April 18, 2019, 06:49:28 pm
Thanks Fellippe, I think it should be _RGB32 for color, it's been awhile since I've looked at the code.
Title: Re: formula to develop a gradient of a color from Black to max light with RGB system
Post by: Raven_Singularity on April 18, 2019, 10:12:38 pm
I just wanted to add a technical note, which is beyond what you were asking, but still interesting.

Original CRT TVs had extremely fine-grained brightness available.  The intensity of photons shot out determine the pixel brightness.  There was no particular upper bound for brightness, it was an analog signal.

Once computer CRTs came out, they eventually adopted RGB gammut with 256 shades of red, green, blue to mix together.  CRT TVs had many thousands of steps of brightness, while CRT monitors only had 256.  The goal was making computer monitors less blurry and more precise.  But the severe limitation of only 256 brightness steps from thousands meant if you based it on a linear scale, 256 equal sized steps, the result is almost no dark shades, and too many bright shades.  To deal with this perceptual brightness issue, the RGB gammut uses more values in the darker ranges (humans can see small shifts in dark colours easily) and less in the bright end.

The problem with a non-linear RGB is if you draw from 0 to 255 brightness, one pixel row at a time, you end up with a gradient that doesn't evenly transition from dark to medium to light.  One hack to get around this is "gamma 2.2" adjustment, which almost matches the real brightness scale.  In this way, a gradient would have less of the dark colours, and more mids and bright tones across the gradient.

Most graphics tools, including Photoshop, fail to handle linear brightness correctly.  Most apps produce poor quality gradients.  Also, when you scale an image down the app combines pixel colour brightnesses together to make the smaller image, but because RGB isn't linear the shrunk image becomes darker than it should actually be.

I'm not offering code to produce a linear gradient on-screen in QB64 -- that's beyond my experience level -- but I can tell you that the gradients being described here do not match an actual linear brightness scale.  There's also other issues with RGB, such as green appearing brighter to humans than red, I think by around ~12%.

I can't wait until all computer monitors and video cards support 10bit or higher linear RGB colourspace (instead of 8bit non-linear).  10bit offers 1024 linear brightness steps per RGB channel, instead of 256 non-linear steps.  The problem with 8bit RGB is it became so prevelant on PCs that nearly every app out there is using it currently, and it's a lot of work converting over all these apps to a new colourspace that operates quite differently.

With gradients in 8bit RGB, the best gradients you can produce use a linear colourspace that then downsample back to 8bit, matching the closest colour brightness value, and making full use of dithering to help perceptually fill in the gaps in-between the RGB brightness steps.  Dithering also removes the visible banding you get with non-linear RGB gradients, which is by far the ugliest aspect of 8bit RGB gradients (especially visible with radial gradients, terrible!).

As an example of an app that correctly handles non-linear RGB colourspace:

ImageWorsener (http://entropymine.com/imageworsener/)

I always use this app for scaling down large images, it produces much higher quality results than standard image editing apps (Gimp, Photoshop, QB64, etc.).  It doesn't darken the shrunk images, properly handles translucency (opacity in RGBA is 8bits as well, but it is a linear 8bits), and maintains much more of the visible hard lines and details when shrinking.

Probably too much information, but it's fascinated me for the last decade or so!
Title: Re: formula to develop a gradient of a color from Black to max light with RGB system
Post by: Petr on April 24, 2019, 02:40:19 pm
Maybe it might be interested, for you, TempodiBasic. It's a simple creation of a color gradient (this is just the beginning of a program to do aged photos by going to yellow at the edges). First I make a mask (edge), then I take it, calculate the transition and throw with the alpha transition to the original photo. It's a simple way.

Use own photo.

Code: QB64: [Select]
  1.  
  2.  
  3. img = _LOADIMAGE("velikonoce.jpg", 32) ' <- insert your photo please
  4.  
  5. W = _WIDTH(img)
  6. H = _HEIGHT(img)
  7. M = _NEWIMAGE(W, H, 32) 'mask
  8.  
  9. X1 = 1 + RND * 240 'left border - line
  10. X2 = 1 + RND * 190
  11.  
  13. LINE (X1, 0)-(X2, H) 'left border
  14. CIRCLE (-50, H / 2), W 'right border
  15.  
  17. DIM V2(H) AS INTEGER
  18.  
  20. FOR search = 1 TO H 'left border
  21.     x = 0
  22.     DO UNTIL POINT(x, search)
  23.         x = x + 1
  24.     LOOP
  25.     V(search) = x
  27.  
  28.  
  29. FOR search = 1 TO H 'right border
  30.     x = W - 1
  31.     DO UNTIL POINT(x, search)
  32.         x = x - 1
  33.     LOOP
  34.     V2(search) = x
  36.  
  38.  
  39. SCREEN M 'now is used as output screen
  40. PRINT "Program use this mask. Press key..."
  43. _PUTIMAGE , img, M
  44.  
  45. FOR y = 1 TO H
  46.     d = 255 / V(y)
  47.     FOR x = 1 TO W
  48.         alpha = 255 - d * x
  49.         PSET (x, y), _RGBA32(255, 255, 0, alpha)
  50. NEXT x, y
  51.  
  52. FOR y = 1 TO H
  53.     d = 255 / (W - V2(y))
  54.     FOR x = W TO 1 STEP -1
  55.         alpha = 255 - d * (W - x)
  56.         PSET (x, y), _RGBA32(255, 255, 0, alpha)
  57. NEXT x, y
  58.  
Title: Re: formula to develop a gradient of a color from Black to max light with RGB system
Post by: TempodiBasic on April 25, 2019, 05:27:59 pm
@Petr
fine and interesting this last your post, also if it is not the reason for my question, these are more informations, your previouse response and your code as so also code of Fellippe and code of Bplus have already given to me the answer.
Text Only | Text with Attachments