|
|
|
08-07-2016, 10:44 AM
|
#1
|
Human being with feelings
Join Date: Jul 2007
Posts: 1,890
|
@gfx -- looking for tips
Hello!
I was wondering how layering works with GFX. Are there any tutorials?
|
|
|
08-07-2016, 12:13 PM
|
#2
|
Human being with feelings
Join Date: Mar 2007
Location: Surrey, BC
Posts: 745
|
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
|
|
|
08-08-2016, 05:38 AM
|
#3
|
Human being with feelings
Join Date: Jul 2007
Posts: 1,890
|
that was very helpful! how did you learn that? is that standard with programming graphics?
|
|
|
08-08-2016, 12:16 PM
|
#4
|
Human being with feelings
Join Date: Mar 2007
Location: Surrey, BC
Posts: 745
|
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
|
|
|
08-12-2016, 10:50 AM
|
#5
|
Human being with feelings
Join Date: Jul 2007
Posts: 1,890
|
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.
|
|
|
|
08-12-2016, 12:57 PM
|
#6
|
Human being with feelings
Join Date: Dec 2015
Location: SE TN USA
Posts: 77
|
Quote:
Originally Posted by reapercurious
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.
|
|
|
08-13-2016, 07:10 PM
|
#7
|
Human being with feelings
Join Date: Mar 2007
Location: I'm in a barn
Posts: 4,467
|
Quote:
Originally Posted by reapercurious
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.
|
|
|
08-13-2016, 07:25 PM
|
#8
|
Human being with feelings
Join Date: Mar 2007
Location: I'm in a barn
Posts: 4,467
|
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);
|
|
|
10-20-2019, 11:11 AM
|
#9
|
Human being with feelings
Join Date: Oct 2017
Location: Russia
Posts: 366
|
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!
|
|
|
10-20-2019, 01:28 PM
|
#10
|
Human being with feelings
Join Date: Sep 2008
Location: Sweden
Posts: 7,416
|
Quote:
Originally Posted by Archie
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
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...
|
|
|
10-20-2019, 10:07 PM
|
#11
|
Human being with feelings
Join Date: Oct 2017
Location: Russia
Posts: 366
|
Quote:
Originally Posted by Fabian
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
Last edited by Archie; 10-20-2019 at 10:59 PM.
|
|
|
Thread Tools |
|
Display Modes |
Linear Mode
|
Posting Rules
|
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
HTML code is Off
|
|
|
All times are GMT -7. The time now is 03:27 AM.
|