Old 08-07-2016, 10:44 AM   #1
reapercurious
Human being with feelings
 
reapercurious's Avatar
 
Join Date: Jul 2007
Posts: 1,890
Default @gfx -- looking for tips

Hello!

I was wondering how layering works with GFX. Are there any tutorials?
reapercurious is offline   Reply With Quote
Old 08-07-2016, 12:13 PM   #2
argee
Human being with feelings
 
Join Date: Mar 2007
Location: Surrey, BC
Posts: 745
Default

I don't know about any tutorials specifically about it, but I think what you're asking about is using transparency to overlay graphics in JS?

1. You can use semi-transparent bitmaps.
2. You can set the transparency before you draw a given graphic element or bitmap to the screen using:

gfx_a = x;

x can be 0-invisible to 1-no transparency (which is the default)
(setting will remain for all subsequent graphics drawn until you set it again in the code)

Also, functions like 'gradrect' (for drawing a rectangular gradient fill) have a parameter for transparency (see the JSFX docs)

Everything is drawn in the order it is called in the @gfx code, so that determines your 'layer' order.

Here's an example of a GUI I did that used semi-transparent bitmaps for the lighting on the knobs and the 'bubbles'
http://forum.cockos.com/showthread.p...ighlight=argee

Hope this is helpful!

cheers,

argee
argee is offline   Reply With Quote
Old 08-08-2016, 05:38 AM   #3
reapercurious
Human being with feelings
 
reapercurious's Avatar
 
Join Date: Jul 2007
Posts: 1,890
Default

that was very helpful! how did you learn that? is that standard with programming graphics?
reapercurious is offline   Reply With Quote
Old 08-08-2016, 12:16 PM   #4
argee
Human being with feelings
 
Join Date: Mar 2007
Location: Surrey, BC
Posts: 745
Default

I just picked it up from the available documentation and trial-and-error.

I had a little previous experience programming some games in Visual Basic, so I guess I knew a little about display methodes for bitmaps, but JS certainly has it's own way of handling things.

Good luck with your endeavors!

cheers,

argee
argee is offline   Reply With Quote
Old 08-12-2016, 10:50 AM   #5
reapercurious
Human being with feelings
 
reapercurious's Avatar
 
Join Date: Jul 2007
Posts: 1,890
Default trouble with gradrect... tips?

I am having trouble getting the gradient rectangle to work. The description isnīt giving me the answer why my gradients look like a zebra and not a gradient.

I donīt know what numerical value and or range or resolution of a number that are wanted for drdx...dady. I do not know what these d*d* variables stand for. I know the 'rgba' but i do not understand how to cause them to create smooth gradients that flow towards some kind of a chosen azimuth.

Quote:

gfx_gradrect(x,y,w,h, r,g,b,a[, drdx, dgdx, dbdx, dadx, drdy, dgdy, dbdy, dady]) -- REAPER 4.59+

Fills a gradient rectangle with the color and alpha specified. drdx-dadx reflect the adjustment (per-pixel) applied for each pixel moved to the right, drdy-dady are the adjustment applied for each pixel moved toward the bottom. Normally drdx=adjustamount/w, drdy=adjustamount/h, etc.
reapercurious is offline   Reply With Quote
Old 08-12-2016, 12:57 PM   #6
jcjr
Human being with feelings
 
Join Date: Dec 2015
Location: SE TN USA
Posts: 77
Default

Quote:
Originally Posted by reapercurious View Post
I am having trouble getting the gradient rectangle to work. The description isnīt giving me the answer why my gradients look like a zebra and not a gradient.

I donīt know what numerical value and or range or resolution of a number that are wanted for drdx...dady. I do not know what these d*d* variables stand for. I know the 'rgba' but i do not understand how to cause them to create smooth gradients that flow towards some kind of a chosen azimuth.
I've not used that function, but in the past drawing gradients "line by line" in other languages--

For instance if we want to start a horizontal gray fade with a value of (rgb values normalized to 1.0) [0.25, 0.25, 0.25] and then at the other end of the rectangle it should end the fade at [0.5, 0.5, 0.5].

If the rectangle is 200 pixels wide, then each lighter colored line should increment the RGB values by (0.5 - 0.25) / 200. If the rectangle is 400 pixels wide, then each lighter colored line should increment the RGB values by (0.5 - 0.25) / 400.

So the js args in that function probably work "something like that". Earlier languages and OS funtions would often specify the RGB values as integers, 0 to 255 or 0 to 65535 or whatever. I like the js feature normalizing the color values into 0.0 to 1.0.

For instance in an earlier system using RGB values each ranging from 0 to 255, such as some Windows funtions-- If you increment so much while drawing the fade that the value gets bigger than 255 before you finish drawing all the lines, it would misbehave somehow depending on how you do the arithmetic. If the RGB were packed into an integer long and you overflow above 255 or underflow below 0, then it would overflow into other bytes in that 4 byte integer, making weird color changes on more than one color.

Or if you did the math a little smarter so that it doesn't overflow from the Red byte into the Green byte or whatever, then the color would "wraparound". Maybe if a Red byte is 254 and you add 2, it wraps around from very bright Red to a Red value of 0, no red at all.

From your zebra description, sounds like maybe js is smart enough to wrap around the RGB values if they get bigger than 1.0 (or smaller than 0.0).

Another option could be to clamp values within the 0.0 to 1.0 range, so if you subtract 0.1 from 0 you still get 0, etc.

Apologies if not explaining clearly.
jcjr is offline   Reply With Quote
Old 08-13-2016, 07:10 PM   #7
James HE
Human being with feelings
 
James HE's Avatar
 
Join Date: Mar 2007
Location: I'm in a barn
Posts: 4,467
Default

Quote:
Originally Posted by reapercurious View Post
I am having trouble getting the gradient rectangle to work. The description isnīt giving me the answer why my gradients look like a zebra and not a gradient.

I donīt know what numerical value and or range or resolution of a number that are wanted for drdx...dady. I do not know what these d*d* variables stand for. I know the 'rgba' but i do not understand how to cause them to create smooth gradients that flow towards some kind of a chosen azimuth.

you need a range of 0 to 1 divided by the width(or height) of the rectangle.

(Well actually you can go above 1 - just experiment - anything above 3 or so starts to give you strange blends - you can get some really cool effects! )

this may help, a simple test if you will.

Code:
desc:gradient

slider1:.5<0,1,.001>r
slider2:.5<0,1,.001>g
slider3:.5<0,1,.001>b


@gfx

drdy=slider1/gfx_h;
dgdy=slider2/gfx_h;
dbdy=slider3/gfx_h;

gfx_gradrect(0,0,gfx_w,gfx_h, gfx_r,gfx_g,gfx_b,gfx_a, 0,0,0,0, drdy, dgdy, dbdy, dady);

Last edited by James HE; 08-13-2016 at 07:45 PM.
James HE is offline   Reply With Quote
Old 08-13-2016, 07:25 PM   #8
James HE
Human being with feelings
 
James HE's Avatar
 
Join Date: Mar 2007
Location: I'm in a barn
Posts: 4,467
Default

When working with these gradients,I find it is best to actually ignore the r/g/b parameters and just manipulate the alpha. This works best if drawing on a black background (or maybe grey or white).

In working with the alpha, you are able to use negative values to good effect.

Here I am drawing a red rectangle on the black background. Note that the alpha for drawing the rectangle is itself .5 - that's just because the pure red color is a bit much. Toning it down lets you see the effect of hitting in the higher and lower numbers for the adjustment alpha.

Code:
desc:gradient

slider1:.5<-10,10,.001>a


@gfx

dady=slider1/gfx_h;

gfx_gradrect(0,0,gfx_w,gfx_h, .8,gfx_g,gfx_b,.5, 0,0,0,0,0,0,0, dady);
James HE is offline   Reply With Quote
Old 10-20-2019, 11:11 AM   #9
Archie
Human being with feelings
 
Archie's Avatar
 
Join Date: Oct 2017
Location: Russia
Posts: 366
Default

Hi!
Someone tell me why when I make a gradient from blue to pink, then I get it

And if on the contrary from pink to blue, then nothing comes out


And so with many colors
Maybe I'm doing something wrong

Thanks!
__________________
=================================
ReaPack| Archie-ReaScript: Discussion | Donate | Donate2 | Donate3 | PayPal |
Archie is offline   Reply With Quote
Old 10-20-2019, 01:28 PM   #10
Fabian
Human being with feelings
 
Fabian's Avatar
 
Join Date: Sep 2008
Location: Sweden
Posts: 7,416
Default

Quote:
Originally Posted by Archie View Post
Hi!
Someone tell me why when I make a gradient from blue to pink, then I get it

And if on the contrary from pink to blue, then nothing comes out


And so with many colors
Maybe I'm doing something wrong

Thanks!
I really have no idea, but I see that you have
Code:
0/gfx.w
in second example. Is that as it should be? 0?
__________________
// MVHMF
I never always did the right thing, but all I did wasn't wrong...
Fabian is offline   Reply With Quote
Old 10-20-2019, 10:07 PM   #11
Archie
Human being with feelings
 
Archie's Avatar
 
Join Date: Oct 2017
Location: Russia
Posts: 366
Default

Quote:
Originally Posted by Fabian View Post
in second example. Is that as it should be? 0?
0,0,1 is the blue color, and the fact that we divide 0 by gfx.w is not scary, because in any case, we get in the ending 0
__________________
=================================
ReaPack| Archie-ReaScript: Discussion | Donate | Donate2 | Donate3 | PayPal |

Last edited by Archie; 10-20-2019 at 10:59 PM.
Archie is offline   Reply With Quote
Reply

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT -7. The time now is 05:05 AM.


Powered by vBulletin® Version 3.8.11
Copyright ©2000 - 2024, vBulletin Solutions Inc.