Image Distortion (Noise)

#ifdef GL_ES precision mediump float; #endif uniform vec2 uMousePosition; uniform vec2 uResolution; uniform sampler2D uTexture0; // image uniform sampler2D uTexture1; // image2 uniform bool uMousePressed; uniform float uTime; uniform float uDisplacement; varying vec2 vTexCoord; // 2D Random float random (in vec2 st) { return fract(sin(dot(st.xy, vec2(12.9898,78.233))) * 43758.5453123); } // 2D Noise based on Morgan McGuire @morgan3d // https://www.shadertoy.com/view/4dS3Wd float noise (in vec2 st) { vec2 i = floor(st); vec2 f = fract(st); // Four corners in 2D of a tile float a = random(i); float b = random(i + vec2(1.0, 0.0)); float c = random(i + vec2(0.0, 1.0)); float d = random(i + vec2(1.0, 1.0)); // Smooth Interpolation // Cubic Hermine Curve. Same as SmoothStep() vec2 u = f*f*(3.0-2.0*f); // u = smoothstep(0.,1.,f); // Mix 4 coorners percentages return mix(a, b, u.x) + (c - a)* u.y * (1.0 - u.x) + (d - b) * u.x * u.y; } // calulate luminosity/brightness of pixel from rgb float rgb_to_luma( vec3 color ){ return 0.2126*color.r + 0.7152*color.g + 0.0722*color.b; } // map range (just like processing/p5) float map(float value, float min1, float max1, float min2, float max2) { return min2 + (value - min1) * (max2 - min2) / (max1 - min1); } void main() { vec4 color = vec4(0.0, 0.0, 0.0, 1.0); float br = rgb_to_luma(texture2D(uTexture0, vec2(vTexCoord.x, 1.0-vTexCoord.y)).rgb); vec2 uv = vec2(vTexCoord.x, 1.0-vTexCoord.y); color = texture2D(uTexture0, fract(uv)); // Use the noise function float n = noise(uv); float mode = 4.0; mode = floor(mode); if( mode==4.0){ vec4 color1 = texture2D(uTexture0, vec2(vTexCoord.x, fract(1.0-vTexCoord.y))); // get brightness // map from 0, 1 =&gt; -1, 1 float br = rgb_to_luma(color1.rgb); br = map(br, 0.0, 1., -1., 1.); // add brigness to current pixel lookup // use fract to repeat values color = texture2D(uTexture1, vec2(fract(vTexCoord.x+ br*uDisplacement), fract(1.0-vTexCoord.y+ br*uDisplacement))); } gl_FragColor = vec4(color); }