// see https://discourse.processing.org/t/making-shapes-and-deleting-them/13888/9

// thanks @ jeremydouglass, it was first time i play .splice and not tested the details

​

​

let circlist = []; // array of objects

let lifetime = 5000; //millis

​

function setup() {

  createCanvas(710, 400);

  print("paint mode: mouse press & drag");

  //frameRate(4);

}

​

function draw() {

  background(50, 89, 100);

  //  for (let i = 0; i < circlist.length; i++) {

  //    circlist[i].display();

  //    if ( circlist[i].timeout ) circlist.splice(i,1);

  //  }

  //  for (let i = 0; i < circlist.length; i++) circlist[i].display();         // draw & timeout check

  circlist.forEach( function(circ,idx) {  circ.display();  } );            // test js forEach

  for (let i = circlist.length - 1; i >= 0; --i)                           // array clean up

    if ( circlist[i].timeout )

      circlist.splice(i, 1);

}

​

function mouseDragged() {

  circlist.push(new Acirc());

}

​

// class

class Acirc {

  constructor() {

    this.x = mouseX;

    this.y = mouseY;

    this.make = millis();

    this.timeout = false;

  }

​

  display() {

    if (millis() > this.make + lifetime) 

      this.timeout = true;

    else

      circle(this.x, this.y, 20);

  }

​

}