Hello,
I have two different images with the dimensions 2000x1 pixel (cut from the photographs).
I want to create a vertical gradient between two images (for instance 2000x200 pixel image). I can not find the pixel-to-pixel gradient method.
I extract the color and position values of each pixel for both images.
What can I do?
Hello,
Here is a quick solution using compute shader to calculate the gradient here completely linear on R, G and B but you can make exactly what you want, its simple math !
uniform ivec2 size;
layout (local_size_x = 8, local_size_y = 8) in;
void main()
{
ivec2 xy = ivec2(gl_GlobalInvocationID.xy);
vec4 color0 = texelFetch(sTD2DInputs[0], ivec2(xy.x, 0), 0);
vec4 color1 = texelFetch(sTD2DInputs[1], ivec2(xy.x, 0), 0);
vec4 color = color0 * xy.y/size.y + color1 * (1 - xy.y/size.y);
imageStore(mTDComputeOutputs[0], xy, TDOutputSwizzle(color));
}
verticalGradient.toe (4.4 KB)
Hello Jacques,
I appreciate your help.
"Actually, there’s one more dimension in the project I’m trying to do. I want to create a color transition between the pixels at the top and the pixels at the bottom. For example, let the first pixel at the top be r4, g40, b60, and the first pixel at the bottom be r60, g10, b100.
It’s like r4>60, g40>10, b60>100.
In your example, while the colors are transitioning from left to right, they remain constant from bottom to top. As a result, is it possible to create a gradient for the pixels moving from bottom to top too?"
Excuse-me but you are wrong 
, pixel are not the same from bottom to top.
If you choose an image with a real difference from one line to the other (not with the video provided by derivative who are a little bit uniform), you have a gradient.
The other very important question is how you make your gradient, here I use a very promitive sort of making it in the form
Color1/normalized distance to bottom + Color2/normalized distance to top
The same for R, G and B (and alpha but the formula keep it at 1).
You can search for more creative way of mixing, GLSL is your friend 
Yes, I realized that
“The other very important question is how you make your gradient, here I use a very promitive sort of making it in the form.”
Ok, I understand, I will search for that.
Thanks, Jacques, I really appreciated.
I checked it, thanks.
Yes, both solutions will work.
@flowb
Elegant no-code solution, but I personaly prefer the compute shader way, easier to tweek IMHO.
@nacitepedelen
You have the choice and it could be thousand other methods to obtain it…
I took a look at your shader code and I’m seeing what look like rounding errors in your interpolation function. it looks like you’re using ivec2 components and integers to get your interpolation value. This means that the decimal places are lost. I’m a little surprised the compiler didn’t complain about it.
By adding float() cast wrappings around these, you can have the compiler preserve the fractional component which I think produces the desired result. I’ve attached a revised version.
verticalGradient_fm.toe (4.7 KB)
Hello @flowb
You are right, the compiler doesnt complain because the calculation is mathematicaly right but conceptualy false.
Thank you,
Jacques
No worries
One additional note @nacitepedelen:
Using a fragment shader instead of compute makes the code a bit more straightforward and allows you to use the TD provided texture coordinate uniforms (vUV) which make it simpler to mix images of different sizes.
This also makes it pretty trivial to drive the ‘cropping’ part of your process within the shader using a normalized (0 to 1) number. In the attached example, this is wired to the vertical sliders. Animating it with LFOs produces really interesting visuals. This looks like it’s a fun project.
Leaving the first input of the glslTOP disconnected lets you set the size using the OPs Common page. So you can set your output size to something useful but send images or frames of any size into it.
verticalGradient_fm_frag.toe (5.6 KB)
Thanks @flowb
Thanks for your creativity. 
