Author Topic: Creating a graphic gradient  (Read 601 times)

NoCforMe

  • Member
  • ***
  • Posts: 387
Creating a graphic gradient
« on: June 22, 2022, 01:26:50 PM »
OK, so the latest 30-minute obsession turned out to be how to create a gradient in a window. Came up with this li'l program to demonstrate. It shows two techniques for this: one is a y=1/x gradient, the other is just a linear one. Both are shown side by side.

Turns out I don't really like the way either one looks, so I'm open to suggestions for other methods. The 1/x one has a nice top, but it goes too quickly to all white. (If you want to play with the program, tweak the variable Scaler to change the look of this gradient (currently set at 1024 * 7). The larger this number, the longer the gradient stays black at the top.

One small challenge here is mapping whatever numbers the gradient method produces to the range [0 ... 255] required by the Win32 RGB quad color values. One small hiccup in my code is that the gradients don't always reach 255 (full white).

And of course it would be nice to introduce color here. Probably have to study up on that HSV--> RGB stuff to do that.

Anyhow, see whatcha think.

Oh, and BTW, the program uses a dialog created by my memory-template dialog creator, usually as an include file, but I put it inline to not have to mess with extra files here.

jj2007

  • Member
  • *****
  • Posts: 12691
  • Assembler is fun ;-)
    • MasmBasic
Re: Creating a graphic gradient
« Reply #1 on: June 22, 2022, 06:21:53 PM »
Looks nice, and I would definitely go for the linear gradient.

On Win7-64, it crashes on exit. I can see the "postquit", the ret is performed ok, but somewhere later on it crashes :sad:
Code: [Select]
do_close:
INVOKE PostQuitMessage, NULL
print "postquit"
MOV EAX, TRUE
RET

FORTRANS

  • Member
  • *****
  • Posts: 1175
Re: Creating a graphic gradient
« Reply #2 on: June 22, 2022, 11:48:29 PM »
Hi,

Turns out I don't really like the way either one looks, so I'm open to suggestions for other methods.

   When I was playing around with gradients and gray scale images,
I found that gamma correction helped.  But it does seem to depend
on your display's characteristics.  Gamma values in the range of 1.95
to 2.5 were worth investigating when I tried using it.  I ended up with
a lot of funny looking patterns trying to test for a uniform gradient.

Cheers,

Steve N.

NoCforMe

  • Member
  • ***
  • Posts: 387
Re: Creating a graphic gradient
« Reply #3 on: June 23, 2022, 05:00:40 AM »
On Win7-64, it crashes on exit. I can see the "postquit", the ret is performed ok, but somewhere later on it crashes :sad:
Code: [Select]
do_close:
INVOKE PostQuitMessage, NULL
print "postquit"
MOV EAX, TRUE
RET

Win7-64 here too. I'll look at it, see if I left something open or whatever. Could be the dialog code.

Aha! Found it. When I clipped out some logging stuff w/IFDEF ... ENDIF I wrongly clipped out this stuff too before exiting WinMain():
Code: [Select]
MOV EAX, msg.wParam
RET

That would explain it ... but it works fine for me?!??
« Last Edit: June 23, 2022, 01:22:36 PM by NoCforMe »

NoCforMe

  • Member
  • ***
  • Posts: 387
Re: Creating a graphic gradient
« Reply #4 on: June 23, 2022, 05:04:38 AM »
Hi,

Turns out I don't really like the way either one looks, so I'm open to suggestions for other methods.

   When I was playing around with gradients and gray scale images,
I found that gamma correction helped.  But it does seem to depend
on your display's characteristics.  Gamma values in the range of 1.95
to 2.5 were worth investigating when I tried using it.  I ended up with
a lot of funny looking patterns trying to test for a uniform gradient.

Is gamma correction something you'd do in the code that generates the gradient, or by adjusting your monitor?

It occurred to me that rather than reinventing the wheel, there must be some long-time standard algorithms for creating gradients. Further research required ...

caballero

  • Member
  • *****
  • Posts: 1949
  • Matrix - Noah
    • abre ojos ensamblador
The logic of the error is hidden among the most unexpected lines of the program

jj2007

  • Member
  • *****
  • Posts: 12691
  • Assembler is fun ;-)
    • MasmBasic
Re: Creating a graphic gradient
« Reply #6 on: June 23, 2022, 05:44:38 AM »
That would explain it ... but it works fine for me?!??

Works fine now :thumbsup:

FORTRANS

  • Member
  • *****
  • Posts: 1175
Re: Creating a graphic gradient
« Reply #7 on: June 23, 2022, 10:26:50 PM »
Hi,

Is gamma correction something you'd do in the code that generates the gradient, or by adjusting your monitor?

   Well, it is both sort of.  You can change the characteristics of your monitor,
contrast and brightness.  And that can affect its gamma curve.  But mostly
those changes should be constrained.  To further correct a gray scale image
one would apply a gamma correction.  I used a look up table, such as the
following.

Code: [Select]
IF 0    ; Gamma = 2.0
; 4 April 2013
; See MORIE.WK1 for derivation.
               ; 0    1    2    3    4    5    6    7    8    9    A    B    C    D    E    F
Power   DB       0,  16,  23,  28,  32,  36,  39,  42,  45,  48,  50,  53,  55,  58,  60,  62 ; 0
        DB      64,  66,  68,  70,  71,  73,  75,  77,  78,  80,  81,  83,  84,  86,  87,  89 ; 1
        DB      90,  92,  93,  94,  96,  97,  98, 100, 101, 102, 103, 105, 106, 107, 108, 109 ; 2
        DB     111, 112, 113, 114, 115, 116, 117, 118, 119, 121, 122, 123, 124, 125, 126, 127 ; 3
        DB     128, 129, 130, 131, 132, 133, 134, 135, 135, 136, 137, 138, 139, 140, 141, 142 ; 4
        DB     143, 144, 145, 145, 146, 147, 148, 149, 150, 151, 151, 152, 153, 154, 155, 156 ; 5
        DB     156, 157, 158, 159, 160, 160, 161, 162, 163, 164, 164, 165, 166, 167, 167, 168 ; 6
        DB     169, 170, 170, 171, 172, 173, 173, 174, 175, 176, 176, 177, 178, 179, 179, 180 ; 7
        DB     181, 181, 182, 183, 183, 184, 185, 186, 186, 187, 188, 188, 189, 190, 190, 191 ; 8
        DB     192, 192, 193, 194, 194, 195, 196, 196, 197, 198, 198, 199, 199, 200, 201, 201 ; 9
        DB     202, 203, 203, 204, 204, 205, 206, 206, 207, 208, 208, 209, 209, 210, 211, 211 ; A
        DB     212, 212, 213, 214, 214, 215, 215, 216, 217, 217, 218, 218, 219, 220, 220, 221 ; B
        DB     221, 222, 222, 223, 224, 224, 225, 225, 226, 226, 227, 228, 228, 229, 229, 230 ; C
        DB     230, 231, 231, 232, 233, 233, 234, 234, 235, 235, 236, 236, 237, 237, 238, 238 ; D
        DB     239, 240, 240, 241, 241, 242, 242, 243, 243, 244, 244, 245, 245, 246, 246, 247 ; E
        DB     247, 248, 248, 249, 249, 250, 250, 251, 251, 252, 252, 253, 253, 254, 254, 255 ; F
ENDIF

   Just take the pixel value as an index into the array and use the table value
as a corrected pixel value to display.

   At the time, the best results depended on the computer being used, but were
between 2.0 and 2.5.  However my current display seems to want something
much smaller.  Maybe even not using a correction at all.  (May require further
investigation?  Drat.  And two other computers purchased since then as well.)

Regards,

Steve N.

NoCforMe

  • Member
  • ***
  • Posts: 387
Re: Creating a graphic gradient
« Reply #8 on: June 24, 2022, 05:46:38 AM »
So how do you calculate gamma progammatically? In other words, how would you go about creating such a lookup table? (Yeah, I know there's lotsa stuff out there, but I'm too lazy at the moment to dig through it all.)

FORTRANS

  • Member
  • *****
  • Posts: 1175
Re: Creating a graphic gradient
« Reply #9 on: June 24, 2022, 07:23:25 AM »
Hi,

   It has been a while, but the formula is something along
the lines of:

  (Corrected Pixel) = Constant * (Input pixel) ^ (1/gamma)

   For the table displayed above:

 gamma = 2.0
 constant = 1.0 / 0.062622
 Pixels range 0 ... 255

   Apparent reference is "Jim Blinn's Corner: Dirty Pixels", 1998,
ISBN 1-55860-455-3.  Chapter Five, Dirty Pixels, July 1989.
The book is a collection of monthly magazine column articles.

   I will look around for another reference to quote from.

Cheers,

Steve

FORTRANS

  • Member
  • *****
  • Posts: 1175
Re: Creating a graphic gradient
« Reply #10 on: July 05, 2022, 06:17:09 AM »
Hi,

   I went and calculated curves for gamma values of 1/3,
1/2, 1.0, 2.0, and 3.0.  And then made gray gradient
images to show the differences.  If there is some interest,
I can post those.

Regards,

Steve N.

daydreamer

  • Member
  • *****
  • Posts: 2028
  • beer glass
Re: Creating a graphic gradient
« Reply #11 on: July 05, 2022, 06:40:23 PM »
Hi,

   I went and calculated curves for gamma values of 1/3,
1/2, 1.0, 2.0, and 3.0.  And then made gray gradient
images to show the differences.  If there is some interest,
I can post those.

Regards,

Steve N.
so next step is to make pictures made for adjust brightness on monitor to right settings,for example in my Solid snake PS4 game have such tv adjustment screen
also computer art is supposed to be watched on an adjusted monitor,also games have lot of photorealistic art nowadays
SIMD fan and macro fan
I am an Invoker
"An Invoker is a mage who specializes in the manipulation of raw and elemental energies."