The MASM Forum

General => The Workshop => Topic started by: NoCforMe on June 22, 2022, 01:26:50 PM

Title: Creating a graphic gradient
Post by: NoCforMe 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.
Title: Re: Creating a graphic gradient
Post by: jj2007 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:
do_close:
INVOKE PostQuitMessage, NULL
print "postquit"
MOV EAX, TRUE
RET

Title: Re: Creating a graphic gradient
Post by: FORTRANS on June 22, 2022, 11:48:29 PM
Hi,

Quote from: NoCforMe on June 22, 2022, 01:26:50 PM
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.
Title: Re: Creating a graphic gradient
Post by: NoCforMe on June 23, 2022, 05:00:40 AM
Quote from: jj2007 on June 22, 2022, 06:21:53 PM
On Win7-64, it crashes on exit. I can see the "postquit", the ret is performed ok, but somewhere later on it crashes :sad:
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():

MOV EAX, msg.wParam
RET


That would explain it ... but it works fine for me?!??
Title: Re: Creating a graphic gradient
Post by: NoCforMe on June 23, 2022, 05:04:38 AM
Quote from: FORTRANS on June 22, 2022, 11:48:29 PM
Hi,

Quote from: NoCforMe on June 22, 2022, 01:26:50 PM
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 ...
Title: Re: Creating a graphic gradient
Post by: avcaballero on June 23, 2022, 05:36:07 AM
Here an example

http://abreojosensamblador.epizy.com/?Tarea=5&SubTarea=1&Lang=1#DegradadoColor
Title: Re: Creating a graphic gradient
Post by: jj2007 on June 23, 2022, 05:44:38 AM
Quote from: NoCforMe on June 23, 2022, 05:00:40 AMThat would explain it ... but it works fine for me?!??

Works fine now :thumbsup:
Title: Re: Creating a graphic gradient
Post by: FORTRANS on June 23, 2022, 10:26:50 PM
Hi,

Quote from: NoCforMe on June 23, 2022, 05:04:38 AM
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.

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.
Title: Re: Creating a graphic gradient
Post by: NoCforMe 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.)
Title: Re: Creating a graphic gradient
Post by: FORTRANS 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
Title: Re: Creating a graphic gradient
Post by: FORTRANS 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.
Title: Re: Creating a graphic gradient
Post by: daydreamer on July 05, 2022, 06:40:23 PM
Quote from: FORTRANS 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.
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