precision mediump float;

    uniform vec2 u_mouse;

    uniform sampler2D u_originalImage;
    uniform sampler2D u_nextImage;
    uniform sampler2D u_flowTex;

    varying vec2 v_texcoord;
    uniform vec2 u_texSize;

    vec2 decodeFlow(vec3 flow) {
        float angle =   flow.x  * 2.0 * 3.1415926535897932384626433832795;
        float magnitude = flow.y;
        return vec2(sin(angle) * magnitude, cos(angle) * magnitude);
    }

    vec3 RGBtoHSV(vec3 c) {
        vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0);
        vec4 p = mix(vec4(c.bg, K.wz), vec4(c.gb, K.xy), step(c.b, c.g));
        vec4 q = mix(vec4(p.xyw, c.r), vec4(c.r, p.yzx), step(p.x, c.r));

        float d = q.x - min(q.w, q.y);
        float e = 1.0e-10;
        return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), d / (q.x + e), q.x);
    }

    void main() {

        vec3 color = texture2D(u_flowTex, v_texcoord).rgb;
        vec3 flowHSV = RGBtoHSV(color);
        vec2 flowVec = decodeFlow(flowHSV);
        vec2 flowTexCoord = v_texcoord +  (flowVec / u_texSize)  *25.0* ( u_mouse.y);

        if (u_mouse.y > 0.50) {
            float weight = (1.0 - u_mouse.y) / .5;
            // Sigmoid blending.
            float blend = 1.0 / (1.0 + exp(-6.0 * (weight - 0.5)));
            vec4 originalSample = texture2D(u_originalImage, flowTexCoord);
            vec4 transitionSample = texture2D(u_nextImage, v_texcoord);
            vec4 blendedSample = mix(transitionSample, originalSample, blend);
            gl_FragColor = blendedSample;
        }
        else {
            gl_FragColor = texture2D(u_originalImage, flowTexCoord);
        }
    }