During the program's runtime, p5.js unexpectedly encounters a problem reading my update function at a random point

Question

During the program's runtime, p5.js unexpectedly encounters a problem reading my update function at a random point

I'm currently working on a project where I want to create a program that removes particles from an array when they reach the right end of the canvas.


let P = [];
let n = 10;

function setup() 
{
    createCanvas(500,500);
    for(let i = 0; i < n; i++)
        P.push(new particle());
}

function draw() 
{
    background(0);
    for(let i = 0; i < n; i++)
    {
        if(P[i].out == true)
        {
            P.splice(i, 1);
            n--;
        }
        P[i].update();     
        P[i].plot();
        console.log(P.length)
    }   
}

class particle
{
    constructor()
    {
        this.brightness = 0;
        this.vel = random(1);
        this.dia = 3;
        this.x = 0;
        this.y = random(height);
        this.out = false;
    }

    update()
    {
        this.x += this.vel;
        if(this.x >= width)
            this.out = true;
    }

    plot()
    {
        noStroke();
        fill(255);
        circle(this.x, this.y, this.dia);
    }  
}

Most of the time, everything seems to be running smoothly with my program. However, as the array size decreases after particles are removed, I encounter an error message:

Uncaught TypeError: Cannot read property 'update' of undefined

This issue is perplexing because there shouldn't be any trouble reading the 'update' function since it's been used without issues previously in the loop.

javascript arrays processing p5.js

Answer 1

Answer №1

The problem arises when you delete elements from an array while iterating through it. When P.splice(i, 1); removes the last element in the array, P[i].update(); will try to access an index that is out of bounds, leading to the error message "Uncaught TypeError: Cannot read property 'update' of undefined"

To avoid this issue, I suggest looping through the array backwards:
(Refer also to Looping through array and removing items without breaking the for loop)

let i = P.length;
while (i--) {
    if (P[i].out == true) {
        P.splice(i, 1);
        n--;
    } else {
        P[i].update();     
        P[i].plot();
    }
}

Take a look at the example below:

let P = [];
let n = 10;

function setup() 
{
    createCanvas(500, 500);
    for(let i = 0; i < n; i++)
        P.push(new particle());
}

function draw() 
{
    background(0);

    let i = P.length;
    while (i--) {
        if (P[i].out == true) {
            P.splice(i, 1);
        } else {
            P[i].update();     
            P[i].plot();
        }
    }   
}

class particle
{
    constructor()
    {
        this.brightness = 0;
        this.vel = random(1);
        this.dia = 3;
        this.x = 0;
        this.y = random(height);
        this.out = false;
    }

    update()
    {
        this.x += this.vel;
        if(this.x >= width)
            this.out = true;
    }

    plot()
    {
        noStroke();
        fill(255);
        circle(this.x, this.y, this.dia);
    }  
}

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

Answer 2

The problem arises when you delete elements from an array while iterating through it. When P.splice(i, 1); removes the last element in the array, P[i].update(); will try to access an index that is out of bounds, leading to the error message "Uncaught TypeError: Cannot read property 'update' of undefined"

To avoid this issue, I suggest looping through the array backwards:
(Refer also to Looping through array and removing items without breaking the for loop)

let i = P.length;
while (i--) {
    if (P[i].out == true) {
        P.splice(i, 1);
        n--;
    } else {
        P[i].update();     
        P[i].plot();
    }
}

Take a look at the example below:

let P = [];
let n = 10;

function setup() 
{
    createCanvas(500, 500);
    for(let i = 0; i < n; i++)
        P.push(new particle());
}

function draw() 
{
    background(0);

    let i = P.length;
    while (i--) {
        if (P[i].out == true) {
            P.splice(i, 1);
        } else {
            P[i].update();     
            P[i].plot();
        }
    }   
}

class particle
{
    constructor()
    {
        this.brightness = 0;
        this.vel = random(1);
        this.dia = 3;
        this.x = 0;
        this.y = random(height);
        this.out = false;
    }

    update()
    {
        this.x += this.vel;
        if(this.x >= width)
            this.out = true;
    }

    plot()
    {
        noStroke();
        fill(255);
        circle(this.x, this.y, this.dia);
    }  
}

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

Answer 3

Answer №2

To effectively remove elements from the array, it is essential to iterate through it in reverse order:

function display() {
    setBackdrop(0);
    for(let x = n - 1; x >= 0; x--) {
        if(A[x].exited == true) {
            A.splice(x, 1);
            n--;
        }

        A[x].update();     
        A[x].view();
        console.log(A.length)
    }   
}

Answer 4

To effectively remove elements from the array, it is essential to iterate through it in reverse order:

function display() {
    setBackdrop(0);
    for(let x = n - 1; x >= 0; x--) {
        if(A[x].exited == true) {
            A.splice(x, 1);
            n--;
        }

        A[x].update();     
        A[x].view();
        console.log(A.length)
    }   
}

During the program's runtime, p5.js unexpectedly encounters a problem reading my update function at a random point

Answer №1

Answer №2

Similar questions

Achieving synchronization within the 'it' block using Protractor

The post method in Express.js is having difficulty parsing encoded data accurately

A guide to serving multiple HTML files with Node.js

JavaScript checkboxes not being recognized by Node element

Validate input JQuery only when specific radio buttons are chosen

Validation of time picker consistently returns false

Encoding a multidimensional associative array into JSON using PHP

Start Vue.js development server with SSL enabled (for secure HTTPS serving)

Issues with displaying AJAX Bootstrap Modals

Is there a way to efficiently navigate a local JSON file using React JS?

Tips for creating multiple popups using a single line of JavaScript code

Utilizing jQuery, the code can modify a basic element on a webpage by extracting JSON data from two external device buttons

Cycle through an array an unlimited number of times using a combination of forEach and setTimeout

Issue encountered when attempting to utilize multiple datasets with Twitter Typeahead/Bloodhound

How can you apply a class to a different element by hovering over one element?

Add the value to the array in MongoDb only if it does not already exist in

How come running `npm install <folder>` results in installing different dependencies compared to `npm install lib`?

Issue with Chrome extension's popup not displaying

Multipart form data processing without specifying files

Creating a function in a JavaScript module that can be exported to the window namespace