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() {
createCanvas(500,500)
}
function draw() {
background(255);
if(circleObjectClicked == false){
fill(128,0,128)
circle(100,100,100)
}
}
class Circle {
constructor(x, y, r) {
this.x = x;
this.y = y;
}
display() {
fill('yellow');
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);
newCircle.display();
}
}