Glitches and crashes appearing on p5.js app in Google Chrome

p5.js Coding Questions
1

I am not sure if this a problem from my code or a problem from Google Chrome itself, but I am seeing this “glitch”.
Capture

Then after a while this tab that I am working on with Processing “crashes” or restarts. I don’t see all of Google Chrome restart. I am using VSCode with the live server feature. Any suggestions?

// Boid Class
class Boid {
    constructor() {
        this.loc = createVector();
        this.vel = p5.Vector.random2D();
        this.vel.setMag(random(1, 2));
        this.acc = createVector();

        this.maxSpeed = 1;
    }

    draw()  {
        stroke(255);
        strokeWeight(2)
        push();
        beginShape();
        rotate(this.vel.heading());
        vertex(this.loc.x, this.loc.y);
        vertex(this.loc.x - 3, this.loc.y + 10);
        vertex(this.loc.x, this.loc.y + 8);
        vertex(this.loc.x + 3, this.loc.y + 10);
        endShape(CLOSE);
        pop();

    }

    update() {
        this.loc.add(this.vel);
        this.vel.add(this.acc);
        this.vel.limit(this.maxSpeed)
    }
}

// Main Class
let MAX = 100;
let boids = [];

function setup() {
    createCanvas(windowWidth, windowHeight);
    
    for (let i = 0; i < MAX; i++) {
        let b = new Boid();
        b.loc = createVector(
            random(-width/2, width/2), 
            random(-height/2, height/2)
            );
            boids.push(b);
        }
        
    }
    
function draw() {
    centerCanvas();
    background(0);
        
    for (let b of boids) {
        b.draw();
        b.align();
        b.update();
    }


}

function windowResized() {
    centerCanvas();
    resizeCanvas(windowWidth, windowHeight);
}
function centerCanvas() {translate(width / 2, height / 2)}
2

I ran your code in Chrome using the P5 Web Editor and it didn’t recreate the issue. Had to comment out the line b.align() because it didn’t work:

for (let b of boids) {
   b.draw();
   // b.align();
   b.update();
}