Increase array amount without resetting it (Javascript/Canvas)

Question

In my project, I want my array to increase in size every 5 seconds. I tried to use setInterval to call a function to do this, but it resets my array every 5 seconds with an increased amount rather than naturally growing. Is there a way to increase the amount without having to reset the array each time?

These are the functions I am using to call my "plants":

var myPlants = new Array();
var plantSpawn = 0;

function createPlants() {

    reproducePlants();

    setInterval(reproducePlants, 5000);

}   

function reproducePlants() {
    plantSpawn += 5;

    for(var i=0; i<plantSpawn; i++){

        var rr = Math.round(Math.random() * 150);
        var gg = Math.round(Math.random() * 255);
        var bb = Math.round(Math.random() * 150);

        var plant = new Object();
            plant.x = Math.random() * canvas.width;
            plant.y = Math.random() * canvas.height;
            plant.rad = 2;
            plant.skin = 'rgba('+rr+','+gg+','+bb+', 1)';

        myPlants[i] = plant;

    }
}

Answer 1

You are explicitly reseting all the values of the array when you do this:

for(var i=0; i < plantSpawn; i++){... myPlants[i] = plant; ...}

Note that plantSpawn will hold the new array size, so you are looping over all the old indexes plus the new ones and re-assigning the values on they.

So, instead you can add 5 new elements to the array with Array.push() this way:

var myPlants = new Array();
var plantsInc = 5;

function createPlants()
{
    reproducePlants();
    setInterval(reproducePlants, 5000);
}

function reproducePlants()
{
    // Push N new plants on the array.

    for (var i = 0; i < plantsInc; i++)
    {
        var rr = Math.round(Math.random() * 150);
        var gg = Math.round(Math.random() * 255);
        var bb = Math.round(Math.random() * 150);

        var plant = new Object();
        plant.x = Math.random() * canvas.width;
        plant.y = Math.random() * canvas.height;
        plant.rad = 2;
        plant.skin = 'rgba('+rr+','+gg+','+bb+', 1)';

        // Push a new plant on the array.
        myPlants.push(plant);
    }
}

And as a suggestion, you can even wrap the logic to create a new plant inside a method, like this:

var myPlants = new Array();
var plantsInc = 5;

function createPlants()
{
    reproducePlants();
    setInterval(reproducePlants, 5000);
}

function createPlant()
{
    var rr = Math.round(Math.random() * 150);
    var gg = Math.round(Math.random() * 255);
    var bb = Math.round(Math.random() * 150);

    var plant = new Object();
    plant.x = Math.random() * canvas.width;
    plant.y = Math.random() * canvas.height;
    plant.rad = 2;
    plant.skin = 'rgba('+rr+','+gg+','+bb+', 1)';
    return plant;
}

function reproducePlants()
{
    // Push N new plants on the array.

    for (var i = 0; i < plantsInc; i++)
    {
        myPlants.push(createPlant());
    }
}