重置processing.js

Question

I added a canvas element inside a slider using owlCarousel.js and I want the animation in the canvas to reset every time the slider slides to a new image. Is it possible to do that with a setTimeout? Thanks.

Code:

var canvas = document.getElementById("c");
    var processing = new Processing(canvas, function(processing) {
        processing.size(window.innerWidth, window.innerHeight);
        processing.background(0xFFF);

        var mouseIsPressed = false;
        processing.mousePressed = function () { mouseIsPressed = true; };
        processing.mouseReleased = function () { mouseIsPressed = false; };

        var keyIsPressed = false;
        processing.keyPressed = function () { keyIsPressed = true; };
        processing.keyReleased = function () { keyIsPressed = false; };

        function getImage(s) {
            var url = "./imgs/" + s + ".png";
            processing.externals.sketch.imageCache.add(url);
            return processing.loadImage(url);
        }

        with (processing) {

        noStroke(); 
        var y = 700;
        var y2 = 700;
        var draw = function (){
            background(235,123,89);
            var clouds = getImage("clouds");
            image(clouds, mouseX, 0);
            image(clouds, mouseX + 800, 0);
            var mountain = getImage("mountain2");
            image(mountain, 800, y);
            var mountain1 = getImage("mountain1");
            image(mountain1, 700, y2);
            y -= 10;
            y2 -= 10;
            if(y < 70){
                y += 10;
            } if(y2 < 400){
                y2 += 10;
            }
        }
    }
        if (typeof draw !== 'undefined') processing.draw = draw;
    });

Answer 1

You don't need a setTimeout() at all. Just create a reset() function that sets all of the variables back to their original values. Then call that function whenever you want to reset the animation.