Making circle disappear if mouseX,mouseY co-oridnates are within circle boundaries and at same time create another circle

Hello, I am currently struggling the way forward regarding the following

  • On a mouse click inside a given circle the circle disappears
  • At the same time another is drawn on the canvas .The same process repeats, that is the new created circle should disappear if the mouse is clicked inside the circle ( or if the x co-ordinate and y co-ordinate of mouse if inside the circle , it should disappear)

I tried using concepts of classes but i am not sure how to move forward with it . For now the distance is also hard coded which would also change with new position / co-ordinates .

let d;
let circleObject;
let circleObjectClicked = false;
let t ;
let xCenter,yCenter;
let newCircle ;

function setup() {

function draw() { 
  if(circleObjectClicked == false){

class Circle {
  constructor(x, y, r) {
    this.x = x;
    this.y = y;

 display() {
    circle(this.x, this.y, 100);

function mouseClicked(){
  console.log('confirmation that the mouse got clicked!');
  console.log(mouseX, mouseY); //finding out the x and y co ordinates 
  d = dist(mouseX, mouseY,100,100);
  console.log("distance is " + d);
  if(d <100){
    circleObjectClicked = true;
    newCircle = new Circle(100,100,100);


Which part of this is giving you trouble? Is there a specific part of the code that’s doing something different from what you expected?