Angled Gradient

vvvv beta question
1

how would be possible to generate angled gradient with option to modify the angle?
and offset X and Y?
https://vvvv.org/sites/default/files/imagecache/large/images/AngleGradient.jpg
https://vvvv.org/sites/default/files/imagecache/large/images/AngleGradient2.jpg

Angled Gradient.v4p (10.2 kB)

2

either you just look inside the PolarCoordinates module and make use of the _ Texture Transform_

or you save yourself some performance and do all of that in a pixelshader:

...
//create a 'polar' gradient from the center
//texturecoordinates start on the upper left, so shift by 0.5 to the center
float polGradient = atan2(In.TexCd.y+0.5,In.TexCd.x+0.5);

//the gradient now has a range from -PI to +PI so normalize
polGradient = polGradient/6.2831853 + 0.5;

//use the gradient as rgb value
col.rgb = polGradient;
...

the shifting and rotation still can be done via texturetransform, since that transform modifies TexCd in the vertexshader

and in case you want to control the colors of your gradient:

...
//of course create two color input pins first
col = lerp(color1, color2, polGradient);
...
3

Thanks woei!
of course - Texture transform. It’s hidden by default
but would be nice to have shader for that
my copy-pasting knowledge in hlsl is not good enough.
Can someone correct syntax error: line 67 pls?

PolarGradient.fx (3.9 kB)

4

There’s more than an error on line 67.
Also there were some really minor corrections to be done with woei’s code.
To achieve position\rotation transformation you should create other pins to play with tex coords.
You can (should) also remove those Address = WRAP that I put and left there for no reason.

PolarGradient.fx (4.3 kB)

5

Thanks h99!
that’s perfect.

6

here you go, minimalized shader

h99 just had a little mistake in the code: although the code is there executing the lerp between the colors, still only the b/w gradient was output.

note that translation and rotation ‘feels’ normal, if you use CenterX/Y for translation due to translation of the uvs

PolarGradient.fx (1.6 kB)

7

Now, that’s clean and working code.

8

Thanks guys