P5.js Array: Multiple Objects getting Spliced instead of Single

p5.js Coding Questions
1

I’m trying to create a moving array of decorative circles, and as soon as a circle moves off the edge of the screen I would like to remove it from the array. I have tried both splicing and filtering from the array – however, as soon as I do this, all the circles in the array get deleted, instead of just the intended one. Checked multiple sources and tried different thinkgs but I simply can’t figure out what’s going wrong. You can have a look at the demo here in the p5.js editor: p5.js Web Editor

Main code here if it helps:

function setup() {

   //Create new Circle
   for (let i = 0; i < circleNumber; i++) {
     circles.push(new createCircle())
   }
 }

 function draw() {

   for (let i = circles.length - 1; i >= 0; i--) {

     circles[i].update(i * 200)

     //This is the problem: Simply cannot figure it out

     //Splicing

     if (circles[i].isDead()) {
       circles.splice(i, 1)
     }
   }

   //Filtering
   // circles = circles.filter(x => !x.isDead())
 }

//Class to create Circle

class createCircle {

   constructor() {
     this.circle = []
       this.origin = i * gap + emptySpace2
     this.pos = 0
     this.xPos = width / 5
     this.create()
   }

   create() {
     for (let i = 0; i < ringNumber; i++) {
       this.circle.push(new circleRing())
     }
   }

   update(dist) {

     push()
     this.xPos -= xSpeed
     this.pos = this.xPos + dist / 1.8

     translate(this.pos, this.origin / 1.15)
     scale(0.6, 0.6)

     for (let circles of this.circle) {
       circles.update()
     }
     pop()
   }

   isDead() {
     if (this.pos < 40) {
       return true;
     } else {
       return false;
     }
   }
 }

Thank you in advance!!

2

Nevermind, found it! Someone replied on stackoverflow