For this first shader I took inspiration from the webcam displacement example and instead used two images together. I took a picture of a wolf’s head and a picture of water from the internet and added the sin() function to create a murky, watery effect. I used millis() in x position for the set.Uniform statement (myShader.setUniform(“uDisplacement”, map(millis()/50, 0, width, 0, 5));) to produce a u_time effect like in GLSL. In a way, the water image is being animated to displace the wolf image.

#ifdef GL_ES precision mediump float; #endif uniform vec2 uMousePosition; uniform vec2 uResolution; uniform sampler2D uTexture0; //wolf uniform sampler2D uTexture1; //water uniform float uTime; uniform float uDisplacement; varying vec2 vTexCoord; //takes rbg of a pixel and calculates luminosity float rgb_to_luma( vec3 color ){ return 0.2126*color.r + 0.7152*color.g + 0.0722*color.b; } 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, 1.0, 1.0, 0.0); vec2 offset = vec2(0.0, 0.0); offset = texture2D(uTexture0, vec2(vTexCoord.x, 1.0-vTexCoord.y)).gb; offset *= 1.0; //colours to luminosity float c = rgb_to_luma(texture2D(uTexture0, vec2(vTexCoord.x, 1.0-vTexCoord.y)).rgb); offset = vec2(c, c) + uDisplacement; vec2 uv = vec2(vTexCoord.x, 1.0-vTexCoord.y) + offset; //vec2 uv = vec2(uTime(vTexCoord.x), 1.0-vTexCoord.y) + offset; //using sin() to distort the image color = texture2D(uTexture1, sin(uv) * 0.5); gl_FragColor = vec4(color); }