Function loop

wavyImage.js:167–209

()

    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++) {
            // segment positions for X-waves
            var ly1 = y1 + o4.current(x * 0.32)  * maxXShift * xAmpInputValue/300,
                ly2 = y2 + o5.current(x * 0.3)  * maxXShift * xAmpInputValue/300,
                ly3 = y3 + o6.current(x * 0.4) *  maxXShift * xAmpInputValue/300;

            ctx.drawImage(vcanvas, x, y0, 1, sh0, x, 0        , 1, ly1);
            ctx.drawImage(vcanvas, x, y1, 1, sh1, x, ly1 - 0.5, 1, ly2 - ly1 + 0.5);
            ctx.drawImage(vcanvas, x, y2, 1, sh2, x, ly2 - 0.5, 1, ly3 - ly2 + 0.5);
            ctx.drawImage(vcanvas, x, y3, 1, sh3, x, ly3 - 0.5, 1,  y4 - ly3 + 0.5);
        }
        
        //requestAnimationFrame(loop);
    }

    animationInterval = setInterval(loop,1000/fps);