const emptySpace = 10

 const gap = 10

 const emptySpace2 = 2

 let xPos

 let circles = []

 let circleNumber = 3

 let xSpeed = 1

​

 function setup() {

   createCanvas(windowWidth, windowHeight);

   xPos = width / 5

​

   //Create new Circle

   for (let i = 0; i < circleNumber; i++) {

     circles.push(new createCircle(i))

   }

 }

​

 function draw() {

   background(0);

   strokeCap(SQUARE);

​

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

​

     // circles[i].update(i * 200)

     circles[i].update(200)

​

​

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

​

     //Splicing

​

     if (circles[i].isDead()) {

       console.log(circles[i].isDead())

       circles.splice(i, 1)

     }

   }

​

   //Filtering

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

​

   //Marker - Each should disappear by here

   stroke('red')

   line(40, 0, 40, height)

 }

​

 class createCircle {

​

   constructor(circleNum) {

​

     this.circle = []

     this.pos = 0

     this.xPos = width / 5

     this.circleNum = circleNum;

​

     this.create()

   }

​

   create() {

     for (let i = 0; i < ringNumber; i++) {

​

       this.origin = i * gap + emptySpace2

       this.outerRadius = ringNumber * gap + emptySpace2

​

       this.circle.push(new circleRing(this.origin, this.outerRadius))

​

     }

   }

​

   update(dist) {

​

     push()

​

     this.xPos -= xSpeed

     this.pos = this.xPos + (this.circleNum*dist) / 1.8;

     // console.log(this.pos)

     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;

     }

   }

 }