# Create a “genie” effect in fragment shader GLSL

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: imgur.com"/"UTfWjJG (too little reputation, just remove quotes).

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?

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;
}

• I still have some problems, it's the position of the thin end (left-right), I'm not sure how to go about doing it. Also, the scale had to be larger than one to scale the texture down, because this is UV coordinates instead of vertex ones. Sorry for late reply too. edit: NEVERMIND, I found out how to do it, now for the fun stuff of figuring the rest out myself – MetroidChild Jul 23 '15 at 8:42