Function createAnimation

wavyImage.js:139–213

()

//Source: https://stackoverflow.com/questions/29586754/how-can-i-recreate-this-wavy-image-effect
function createAnimation() {
    playAnimationToggle = true;

    var ctx = animation.getContext("2d");
    var w = scaledWidth;
    var h = scaledHeight;

    //document.documentElement.style.width = scaledWidth;

    //ctx.drawImage(this, 0, 0);
    //ctx.drawImage(originalImg, 0, 0);

    // source grid lines
    x0 = 0, x1 = w * 0.25, x2 = w * 0.5, x3 = w * 0.75, x4 = w,
    y0 = 0, y1 = h * 0.25, y2 = h * 0.5, y3 = h * 0.75, y4 = h;
    
    var maxXShift = scaledHeight*0.25;
    var maxYShift = scaledWidth*0.25;

    // cache source widths/heights
    sw0 = x1, sw1 = x2 - x1, sw2 = x3 - x2, sw3 = x4 - x3,
    sh0 = y1, sh1 = y2 - y1, sh2 = y3 - y2, sh3 = y4 - y3,

    vcanvas = document.createElement("canvas"),  // off-screen canvas for 2. pass
    vctx = vcanvas.getContext("2d");

    vcanvas.width = w; vcanvas.height = h;           // set to same size as main canvas
    
    function loop() {
        ctx.clearRect(0, 0, w, h);
        
        for (var y = 0; y < h; y++) {

            // segment positions for Y-waves
            var lx1 = x1 + o1.current(y * 0.2) * maxYShift * yAmpInputValue/300,
                lx2 = x2 + o2.current(y * 0.26) * maxYShift * yAmpInputValue/300,
                lx3 = x3 + o3.current(y * 0.22) * maxYShift * yAmpInputValue/300,

                // segment widths
                w0 = lx1,
                w1 = lx2 - lx1,
                w2 = lx3 - lx2,
                w3 =  x4 - lx3;

            // draw image lines
            ctx.drawImage(originalImg, x0, y, sw0, 1, 0        , y, w0      , 1);
            ctx.drawImage(originalImg, x1, y, sw1, 1, lx1 - 0.5, y, w1 + 0.5, 1);
            ctx.drawImage(originalImg, x2, y, sw2, 1, lx2 - 0.5, y, w2 + 0.5, 1);
            ctx.drawImage(originalImg, x3, y, sw3, 1, lx3 - 0.5, y, w3 + 0.5, 1);

        }

        // pass 1 done, copy to off-screen canvas:
        vctx.clearRect(0, 0, w, h);    // clear off-screen canvas (only if alpha)
        vctx.drawImage(animation, 0, 0);
        ctx.clearRect(0, 0, w, h);     // clear main (onlyif alpha)
        
        for (var x = 0; x < w; x++) {