Create a "genie" effect in fragment shader GLSL

Question

I have tried a while now to create a genie effect on a scrolling plane to emulate the background/floor from the Mad Hatter fight in Adventures of Batman and Robin (SEGA).
Judging the way the 16 bit era loved using scan-lines to create most of these (in this case amazing) effects I wanted to try and achieve this effect in GLSL. What I have tried to do so far was to adapt this tutorial code here and convert it to work in the fragment shader instead of the vertex shader, mostly because I haven't dabbled much with model loading (creating grids by hand isn't fun) but have created this monstrosity.

So far I am at step two where the float t gets introduced, instead of getting a leaning trapezoid like shape I only get this:
The square is just squished more on the x-axis instead of actually doing anything useful for me, this is my current fragment code for manipulating the image:

#version 330 core
precision lowp float;

out vec4 color;
in vec2 UV;

uniform sampler2D in_Tex_0;
uniform vec4 in_Val_0;

vec2 dist(vec2 coord)
{
    // xy range of transformation
    vec2 start = vec2( 0.0, 0.0 );
    vec2 end = vec2( 1.0, 1.0 );
    vec2 pos;
    // in_Val_0.x instead of size param in tutorial
    pos.y = mix( start.y, end.y, in_Val_0.x );
    float t = pos.y / end.y;
    pos.x = mix( start.y, end.x, t * in_Val_0.x );
    // should return a leaning trapezoid
    return coord * pos;
}

void main()
{
    // Pass through color data to bound framebuffer using distorted texture
    color = vec4( texture2D( in_Tex_0, dist( UV ) ) );
}

I'm suspecting there's something wrong with the ´t´ that gets added in the mix, but I am at a loss of what. Any idea of what might be wrong and/or how I could fix this?

Answer 1

You don't need the mix calls if start and end are always 0 and 1, respectively. If you want a trapezoid:

vec2 dist(vec2 coord){
    vec2 pos;
    pos.y = in_Val_0.x;
    vec2 trapezoidSize = vec2(0.2, 0.8); //0.2 baseSize; 0.8 topSize;
    float t = trapezoidSize.x + trapezoidSize.y*coord.y;
    pos.x = t * in_Val_0.x;
    return coord * pos;
}

If you want that distorted "trapezoidish" image:

vec2 dist(vec2 coord){
    vec2 pos;
    pos.y = in_Val_0.x;
    vec2 trapezoidSize = vec2(0.2, 0.8); //0.2 baseSize; 0.8 topSize;
    float t = coord.y;
    t = (3.0 - 2.0 * t) * t * t;
    t = trapezoidSize.x + trapezoidSize.y*t;
    pos.x = t * in_Val_0.x;
    return coord * pos;
}