What is causing the crash in p5.js when I use this function to add objects to an array?

Question

What is causing the crash in p5.js when I use this function to add objects to an array?

I'm currently working on an evolution simulation app that involves reproducing organisms with a health level above 75%. After reproduction, their health is reduced by half. However, I'm encountering an issue where my app crashes in p5.js for reasons unknown to me.

To troubleshoot this problem, I have attempted to reduce the number of organisms to just 3 and encapsulate the process within a function of the organism's class.


var organisms = []; // array to store organism instances

function reproduce(){
  for (let i = 0; i < organisms.length; i++){
     if(organisms[i].life > 0.75){
        // create 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;
        }
    }
}

My expectation was for this code to simply generate new instances of the class, but unfortunately, p5.js still crashes.

javascript performance p5.js

Answer 1

Answer №1

Loop through the array and generate new organisms. Then, after completing the loop, add the newly created organisms to your initial array.

Below is a sample code snippet that demonstrates this process. The original random method call has been replaced with Math.random(), and variables width and height have been defined to avoid using p5.js.

    var organisms = []; // array to store organism instances
    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 reproduction: " + organisms.length);
reproduce();
    console.log("Organisms length after reproduction: "+organisms.length);

    function reproduce(){
      var organismsToAdd = [];
      for (let i = 0; i < organisms.length; i++){
         if(organisms[i].life > 0.75){
            // creating genetically similar size
            let size = organisms[i].size + (Math.random() > 0.5 ? 1 : -1 * Math.random() * 2);   
            // creating instance
            let org = new Organism(width, height, size)
            organismsToAdd.push(org);
            // preventing unlimited reproduction
            organisms[i].life -= 0.5;
            }
        }
      // adding new organisms to original array
  organisms.push.apply(organisms, organismsToAdd)
    }

Here is an example with p5.js implementation:

      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 reproduction: " + organisms.length);
  reproduce();
    console.log("Organisms length after reproduction: " + organisms.length);
  }
    function reproduce(){
      var organismsToAdd = [];
      for (let i = 0; i < organisms.length; i++){
         if(organisms[i].life > 0.75){
            // creating genetically similar size
            let size = organisms[i].size + (random() > 0.5 ? 1 : -1 * random() * 2);   
            // creating instance
            let org = new Organism(width, height, size)
            organismsToAdd.push(org);
            // preventing unlimited reproduction
            organisms[i].life -= 0.5;
            }
        }
  // adding new organisms to original array
  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>

Answer 2

Loop through the array and generate new organisms. Then, after completing the loop, add the newly created organisms to your initial array.

Below is a sample code snippet that demonstrates this process. The original random method call has been replaced with Math.random(), and variables width and height have been defined to avoid using p5.js.

    var organisms = []; // array to store organism instances
    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 reproduction: " + organisms.length);
reproduce();
    console.log("Organisms length after reproduction: "+organisms.length);

    function reproduce(){
      var organismsToAdd = [];
      for (let i = 0; i < organisms.length; i++){
         if(organisms[i].life > 0.75){
            // creating genetically similar size
            let size = organisms[i].size + (Math.random() > 0.5 ? 1 : -1 * Math.random() * 2);   
            // creating instance
            let org = new Organism(width, height, size)
            organismsToAdd.push(org);
            // preventing unlimited reproduction
            organisms[i].life -= 0.5;
            }
        }
      // adding new organisms to original array
  organisms.push.apply(organisms, organismsToAdd)
    }

Here is an example with p5.js implementation:

      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 reproduction: " + organisms.length);
  reproduce();
    console.log("Organisms length after reproduction: " + organisms.length);
  }
    function reproduce(){
      var organismsToAdd = [];
      for (let i = 0; i < organisms.length; i++){
         if(organisms[i].life > 0.75){
            // creating genetically similar size
            let size = organisms[i].size + (random() > 0.5 ? 1 : -1 * random() * 2);   
            // creating instance
            let org = new Organism(width, height, size)
            organismsToAdd.push(org);
            // preventing unlimited reproduction
            organisms[i].life -= 0.5;
            }
        }
  // adding new organisms to original array
  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>

Answer 3

Answer №2

You've set up a loop that could potentially go on forever.

for (let i = 0; i < organisms.length; i++){

Let's say, hypothetically, your array organisms initially has 5 elements. If the if condition in the next line adds another element to the array during the first iteration, then each subsequent iteration will modify the next element. However, because your array is growing by one with each loop, you'll never reach the end of it!

Answer 4

You've set up a loop that could potentially go on forever.

for (let i = 0; i < organisms.length; i++){

Let's say, hypothetically, your array organisms initially has 5 elements. If the if condition in the next line adds another element to the array during the first iteration, then each subsequent iteration will modify the next element. However, because your array is growing by one with each loop, you'll never reach the end of it!

What is causing the crash in p5.js when I use this function to add objects to an array?

Answer №1

Answer №2

Similar questions

Is there a way to implement full-page scrolling in Vue?

Error: Trying to set a value to an undefined object in the bind() method

Save data in a function

"Is there a way to initiate a Date Picker with the current date using Javascript in an AngularJS application

Ways to conceal the current state changes from being displayed in the URL

What is the best way to store JSON data in a MySQL database?

Sharing and displaying images on Sails JS platform

In Protractor, mastering the technique to extract multiple values simultaneously is crucial for efficiently handling applications that receive a large amount of push notifications

I am experiencing issues with my three.js script not functioning properly within the context of a

Exploring the Differences between Slim Framework's Currying and Dependency Injection

Capture the content from a paragraph element and save it into a variable

Covering a doughnut shape with a twisting spiral

Is there a way to enable horizontal scrolling for a div table within an iframe element?

What is the most efficient method for storing text in my web application?

What is the best way to retrieve a comprehensive outcome from a sql search utilizing php and consequently showcase it using javascript?

Instructions on how to properly align a Youtube video using the react-youtube package

What is the best way to remove text using javascript?

I'm struggling to retrieve $wpdb data after using a PHP function to load my posts with AJAX

Establish a specific character limit for input text

Ways to incorporate an SVG file into an HTML canvas element while adjusting its dimensions on the fly