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

**URL:** <https://discourse.processing.org/t/glitches-and-crashes-appearing-on-p5-js-app-in-google-chrome/16641>\
**Category:** Coding Questions\
**Created:** [December 26, 2019, 4:11pm UTC](https://discourse.processing.org/t/glitches-and-crashes-appearing-on-p5-js-app-in-google-chrome/16641 "2019-12-26T16:11:31Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ackados](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ackados/32/8282_2.png) [@Ackados](https://discourse.processing.org/u/Ackados)\
**Post date:** [December 26, 2019, 4:11pm UTC](https://discourse.processing.org/t/glitches-and-crashes-appearing-on-p5-js-app-in-google-chrome/16641/1 "2019-12-26T16:11:31Z")

</div>

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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/77819e26e16c87258668f3e72a5f9dc94e63063d.png)

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?

```auto
// 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)}

```

---

<div class="post-metadata">

**Author:** ![Tiemen](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tiemen/32/5477_2.png) [@Tiemen](https://discourse.processing.org/u/Tiemen)\
**Post date:** [December 27, 2019, 11:16am UTC](https://discourse.processing.org/t/glitches-and-crashes-appearing-on-p5-js-app-in-google-chrome/16641/2 "2019-12-27T11:16:12Z")

</div>

I ran your code in Chrome using the [P5 Web Editor](https://editor.p5js.org/) and it didn’t recreate the issue. Had to comment out the line `b.align()` because it didn’t work:

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

```