Update random values in setInterval function (lazylinepainter.js)

I've been trying to write a script based on lazylinepainter.js (http://ift.tt/1sWXTt3), that will loop a drawing function, using a randomly selected path from an array of objects (each path is an object, in a separate .js file) as well as assigning it a random color, each time it draws.

On each load of the page, I successfully get a random path, and a random color. But after that, it continues to redraw the same exact path + color that is chosen when the page loads.

I asked the question similarly (here: Random number not updating in SetInterval function) and got a good start, but fell short of this specific part of the problem.

The whole drawing function, is wrapped in a setInterval function. Each time it runs, I'm logging the random color + item in the path array to the console, and seeing it successfully pick random values, but it's not finding its way to the actual line drawing.

It's probably worth noting, that this seems pretty contrary to how people typical use the lazylinepainter plugin—which is by storing each drawing in one JS object, and assigning each a different id——which I don't believe will work for me, as I'll potentially have a long list of drawings I'd like to be called upon randomly.

paths.js :

var duration = 0;

var w = 1280,
h = 800;


var pathOne = { // One loop from right
"drawing-box": {
    "strokepath": [
        {
            "path": "M     163,45c0,0,576.5,37.9,576.5,364.5S269.6,629.6,269.6,629.6s-166.5-49.5-111-172.5s165-141,165-141 s397.5-79.5,580.5,61.5S1225,706,1225,706",
            "duration": duration
        }
    ],
    "dimensions": {
        "width": w,
        "height": h
    }
}

},

// Tall Zig-Zag
pathTwo = {
    "drawing-box": {
        "strokepath": [
            {
                "path": "M 163,45 839.2,170.3 284.3,313.2 1030.2,466.4 497.3,644.4 L 1135,736",
                "duration": duration
            }
        ],
        "dimensions": {
            "width": w,
            "height": h
        }
    }
},

// Straight
pathThree = {
    "drawing-box": {
        "strokepath": [
            {
                "path": "M 163,45 L 1135,736",
                "duration": duration
            }
        ],
        "dimensions": {
            "width": w,
            "height": h
        }
    }
},

// 3 Point Zag
pathFour = {
    "drawing-box": {
        "strokepath": [
            {
                "path": "M 113,50 446.1,614.1 781.1,157.1 L 1215,676",
                "duration": duration
            }
        ],
        "dimensions": {
            "width":  w,
            "height": h
        }
    }
},   

// One loop from bottom
pathFive = {
    "drawing-box": {
        "strokepath": [
            {
                "path": "M 113,80c0,0-8.9,481.1,460.6,481.1s416.5-288,416.5-288S935.6,36,658.1,36c-297,0-262,320-262,320s2.5,397,586,397s242.9,0,0,0",
                "duration": duration
            }
        ],
        "dimensions": {
            "width":  w,
            "height": h
        }
    }
}; 

main.js:

(where all of these objects are wrapped in an array, and the plugin is told to call a random item from this array, while looping in a setInterval.)

var pathArray = [pathOne,pathTwo,pathThree,pathFour,pathFive],
colors = ['#e51616','#0000FF','#FFFF00','#00FF00'],
drawBox = $('#drawing-box'),
svg = $('#drawing-box svg'),
y = pathArray.length;

console.log(y + " items in the Path Array");

function randomFrom(array) {
    return array[Math.floor(Math.random() * array.length)];
}

function Draw(){

var i = Math.floor(Math.random() * (y - 0 + 1));
console.log('Path number ' + i + ' selected.');
console.log('Color ' + randomFrom(colors) + ' selected.');

var drawLoop = setTimeout(function (){
                    $('#drawing-box svg path').animate({'opacity':0},300);
                    setTimeout(function(){
                        $('#drawing-box svg path').remove();
                        drawBox.lazylinepainter('paint');
                        console.log(pathArray[i]);
                    },350);
                },5500);

var drawFunc = drawBox.lazylinepainter({
                "svgData": pathArray[i],
                "strokeColor": randomFrom(colors),
                "strokeWidth": 5,
                "responsive": true
            });

drawFunc.lazylinepainter('paint');

};


drawLoop = setInterval(function(){
                Draw();
            },2500);

Ideally, I could have the drawing function working as it is right now, but each time it loops/redraws, it will draw a completely different path from the array, randomly chosen of course.

JSFiddle: http://ift.tt/1B9mbWq