Why does this Function (Which Pushes Objects to an Array) Crash p5.js?

Question

I am building an evolution simulation app where if a certain organism has health above 75%, it reproduces, then the health is subtracted by half. To do this, I create a new instance of the class the object belongs to then push said object to the array where the other organisms are stored. This crashes p5.js for a reason I am not aware of.

I have tried to lessen the number of organisms (3) and write it as a function of the class.

var organisms = []; // array where organisms instances go

function reproduce(){
  for (let i = 0; i < organisms.length; i++){
     if(organisms[i].life > 0.75){
        // create a genetically similar size
        let size = organisms[i].size + (random() > 0.5 ? 1 : -1 * random() * 2);   
        // declare instance
        let org = new Organism(width, height, size)
        organisms.push(org);
        // prevent infinite reproduction
        organisms[i].life -= 0.5;
        }
    }
}

I expect this to just create new class instances, but it crashes p5.js.

Answer 1

Iterate through the array and create the new organisms and then after the loop add the array of newly created organisms to your original array.

Here is a runnable snippet that creates a minimal example. The random method call from the question has been replaced with a call to Math.random() and width and height have been declared to eliminate the need for p5.js.

    var organisms = []; // array where organisms instances go
    var width = 100;
	var height = 100;
	
	function Organism(w, h, s){
	this.width = w;
	this.height = h;
	this.size = s;
	this.life = .76;
	}
	organisms.push(new Organism(1,1,1));
    console.log("Organisms length before reproduce: " + organisms.length);
	reproduce();
    console.log("Oganisms length after reproduce:  "+organisms.length);

    function reproduce(){
      var organismsToAdd = [];
      for (let i = 0; i < organisms.length; i++){
         if(organisms[i].life > 0.75){
            // create a genetically similar size
            let size = organisms[i].size + (Math.random() > 0.5 ? 1 : -1 * Math.random() * 2);   
            // declare instance
            let org = new Organism(width, height, size)
            organismsToAdd.push(org);
            // prevent infinite reproduction
            organisms[i].life -= 0.5;
            }
        }
      //organisms = organisms.concat(organismsToAdd);
      // or
	  organisms.push.apply(organisms, organismsToAdd)
    }

Here is a runnable snippet with p5.js

      var organisms = []; // array where organisms instances go

function setup(){
  createCanvas(100,100);
  	organisms.push(new Organism(1,1,1));
  noLoop();
  }
  
  function draw(){
   console.log("Organisms length before reproduce: " + organisms.length);
  	reproduce();
    console.log("Organisms length after reproduce: " + organisms.length);
  }
    function reproduce(){
      var organismsToAdd = [];
      for (let i = 0; i < organisms.length; i++){
         if(organisms[i].life > 0.75){
            // create a genetically similar size
            let size = organisms[i].size + (random() > 0.5 ? 1 : -1 * random() * 2);   
            // declare instance
            let org = new Organism(width, height, size)
            organismsToAdd.push(org);
            // prevent infinite reproduction
            organisms[i].life -= 0.5;
            }
        }
  //    organisms = organisms.concat(organismsToAdd);
	  organisms.push.apply(organisms, organismsToAdd)
    }
	  
	function Organism(w, h, s){
	  this.width = w;
	  this.height = h;
	  this.size = s;
	  this.life = .76;
	}

  
  

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js"></script>