LÖVE

I'm trying to create a shader that will warp my output by by scaling the x axis based on the y position of the pixel. It's working but the sides of the output image are curved instead of straight? Any ideas what I'm doing wrong? Here is the shader and the input and output images are attached.


vec4 effect( vec4 color, Image texture, vec2 texture_coords, vec2 screen_coords )
{
// We need to calculate the pixel that will end up "here" after the transformation
// so we need to find the pixel that when scaled by x will end up here.
// Note: Texture Y is inverted so 1,1 is upper right

// We have a linear scale in as Y changes. Scale goes from 2 to 1
float x_scale = (2.0 - (texture_coords.y));

texture_coords.x = ((texture_coords.x - .5) * x_scale) + .5;

// If the pixel is off the screen just use black
if(texture_coords.x < 0 || texture_coords.x >= 1){
return vec4(0.0,0.0,0.0,1.0);
}
else
{
return Texel(texture,texture_coords);//This is the current pixel
}
}

As far as I can tell, the problem doesn't seem to be the actual shader but rather when you use it. If you want the white square to stay a square, draw it without the shader, and only use the shader for drawing the red circle.

great eggs

So the problem is not that the white square is warped, the problem is that the edges of the white square are curved (non-linear). Based on my shader it seems like the edges of the square should be linear, not slightly curved?

Anyone else have an idea why the edge of the white box is curved instead of straight?

While the formula looks linear to me it's apparent by the result that it isn't, so I guess you simply need to figure out a different solution to get the values you want.
Perhaps something like this.
Add uv.x with a re-scale of uv.x from 0 to 1 to -1 to 1 then multiply with uv.y and a target scale of the top.
Haven't tested this, so if it doesn't work I probably used a wrong number somewhere.