Trying to loop circles and make them disappear when hovered over

Hey guys I’m new to processing and working on a project for class. I’ve made a main file and one in a new tab for my object class Circle.

Circle[] circle = new Circle[20];

void setup() {
  size(1280, 720);
  background(0,0,0);
  cursor(CROSS);
}

void draw() {
  
  drawCircles();

}



void drawCircles() {

  float x = random(1280);
  float y = random(720);

  for (int i=0; i<20; i++) {
    circle[i] = new Circle(x, y, 50);
    circle[i].update();
  }
}


-------------------------------------in the other tab---------------------------------------------------------------------------

class Circle {
  float x;
  float y;
  float radius;

  Circle(float xParam, float yParam, int newRadius) {
    x = xParam;
    y = yParam;
    radius = newRadius;
  }

  void update() {


    if (dist(mouseX, mouseY, x, y) < radius) {
      fill(0, 0, 0);
    }

    ellipse(x, y, radius*2, radius*2);
  }
}

What I’m trying to do is loop my circle in my main file to make it so that there is 20 of them, and when the mouse hovers over them they turn from white to black and “disappear” into the background. How do I fix this code so the circles don’t keep spawning forever and my circles disappear when hovered over.

basic would be

  • make_circles(); // called in setup
  • draw_circles(); // called in draw

call from setup:

void setupCircles() {

  float x = random(1280);
  float y = random(720);

  for (int i=0; i<20; i++) {
    circle[i] = new Circle(x, y, 50);
  }
}

and call from draw:

void drawCircles() {
  for (int i=0; i<20; i++) {
    circle[i].update();
  }
}

…also, don’t loop up to 20. Loop up to circle.length