let circle_xy_list = [];

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  let visible_circle = 0;

  // draw circles
  for (let i = 0; i < circle_xy_list.length; i++) {
    [circle_x, circle_y, circle_r] = circle_xy_list[i];
    if (circle_r > 0) {
      visible_circle = visible_circle + 1;
    }

    if (mouse_pressed && circle_x == mouseX && circle_y == mouseY) {
      // grow circle
      circle_xy_list[i][2] = circle_xy_list[i][2] + 1;
    } else {
      if (circle_r > -0.1) {
        // deprecate circle after click
        circle_xy_list[i][2] = circle_r - 0.1;
      }
    }

    // output circle, if radius larger than zero
    if (circle_r > 0) {
      circle(circle_x, circle_y, circle_r * 2);
    }
  }
  text("num=" + visible_circle, 10, 10);
}

function mouseReleased() {
  // console.log({ mouse_release: [mouseX, mouseY] });
  mouse_pressed = false;
  mouse_released = true;
}

function mousePressed() {
  // console.log({ mouse_press: [mouseX, mouseY] });
  mouse_pressed_xy = [mouseX, mouseY, 1];
  mouse_pressed = true;
  mouse_released = false;

  circle_xy_list.push(mouse_pressed_xy);
}