# Logic on making a circle disappear when clicked and drawing another circle at the same time
**URL:** https://discourse.processing.org/t/logic-on-making-a-circle-disappear-when-clicked-and-drawing-another-circle-at-the-same-time/35066
**Category:** Coding Questions
**Created:** [February 9, 2022, 6:01pm UTC](https://discourse.processing.org/t/logic-on-making-a-circle-disappear-when-clicked-and-drawing-another-circle-at-the-same-time/35066 "2022-02-09T18:01:24Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@Timo](https://discourse.processing.org/u/Timo)
#### Post date: [February 9, 2022, 6:01pm UTC](https://discourse.processing.org/t/logic-on-making-a-circle-disappear-when-clicked-and-drawing-another-circle-at-the-same-time/35066/1 "2022-02-09T18:01:24Z")
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 have used the following way of using function so make the circle disappear but , I am unable to draw another circle at the same time. I tried to console log to check if the function is executed by the circle is actually not drawn . I am wondering what is the right way forward ?
The code is here below
```auto
let d;
let circleObject;
let circleObjectClicked = false;
let t ;
function setup() {
createCanvas(500,500)
}
function draw() {
background(255);
if(circleObjectClicked == false){
fill(128,0,128)
circle(100,100,100)
}
}
function drawRandomCircles () {
background(255);
fill(128,128,128)
circle(random(100),random(100),100)
console.log('this is called');
console.log("t value : "+t);
}
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(d);
if(d <100){
t = random(10);
circleObjectClicked = true;
drawRandomCircles();
}
```
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [February 9, 2022, 7:23pm UTC](https://discourse.processing.org/t/logic-on-making-a-circle-disappear-when-clicked-and-drawing-another-circle-at-the-same-time/35066/2 "2022-02-09T19:23:49Z")
think more simple
> a given circle the circle disappears - another is drawn on the canvas
how many circles are there?
---
### Author:  [@Timo](https://discourse.processing.org/u/Timo)
#### Post date: [February 9, 2022, 7:43pm UTC](https://discourse.processing.org/t/logic-on-making-a-circle-disappear-when-clicked-and-drawing-another-circle-at-the-same-time/35066/3 "2022-02-09T19:43:29Z")
Just one circle should be drawn on a click (random center co-ordinates)
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [February 9, 2022, 7:55pm UTC](https://discourse.processing.org/t/logic-on-making-a-circle-disappear-when-clicked-and-drawing-another-circle-at-the-same-time/35066/4 "2022-02-09T19:55:30Z")
So what do you have to do on a click happening?
---
### Author:  [@Timo](https://discourse.processing.org/u/Timo)
#### Post date: [February 10, 2022, 12:04pm UTC](https://discourse.processing.org/t/logic-on-making-a-circle-disappear-when-clicked-and-drawing-another-circle-at-the-same-time/35066/5 "2022-02-10T12:04:13Z")
When a clicking happens or when the mouse co-ordinates are inside the circle . Two things happen
- The original circle disappears , lets say circle1
- A new circle (circle 2) with different center co-ordinates should appear in the screen .
- When we click inside the the new circle (circle2) , the circle 2 disappears and a new circle , circle 3 appears.
This is the process in general, i was thinking about
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [February 10, 2022, 7:35pm UTC](https://discourse.processing.org/t/logic-on-making-a-circle-disappear-when-clicked-and-drawing-another-circle-at-the-same-time/35066/6 "2022-02-10T19:35:32Z")
I am sorry this is taking so long
> [@Timo](#):
>
> - The original circle disappears , lets say circle1
> - A new circle (circle 2)
I wanted to suggest that this is in fact only ONE circle.
Maybe this helps you to find a new approach
---
### Author:  [@Timo](https://discourse.processing.org/u/Timo)
#### Post date: [February 10, 2022, 9:11pm UTC](https://discourse.processing.org/t/logic-on-making-a-circle-disappear-when-clicked-and-drawing-another-circle-at-the-same-time/35066/7 "2022-02-10T21:11:07Z")
Thank you for the feedback , i think i have got a step further . I can see a transition now. However I have an issue in the following
when i use
```auto
if(circleObjectClicked == true){
fill(128,0,0);
circle(random(100),random(100),100)
//circle(200,200,100);
```
It seems to draw random positioned ones (which is one of the objectives) but a lot of them .
and another problem is that the distance I have hard coded so the logic below does not seem to work.
```auto
d = dist(mouseX, mouseY,100,100);
console.log("distance is " + d);
if(d <100){
circleObjectClicked = true;
}
```
The p5js scirpt is below
```auto
let d;
let circleObject;
let circleObjectClicked = false;
let t ;
let xCenter,yCenter;
function setup() {
createCanvas(500,500)
}
function draw() {
background(255);
if(circleObjectClicked == false){
fill(128,0,128)
circle(100,100,100)
}
if(circleObjectClicked == true){
fill(128,0,0);
//circle(random(100),random(100),100)
circle(200,200,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;
}
}
```
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [February 10, 2022, 10:12pm UTC](https://discourse.processing.org/t/logic-on-making-a-circle-disappear-when-clicked-and-drawing-another-circle-at-the-same-time/35066/8 "2022-02-10T22:12:51Z")
Again
Think more simple
Say you have only ONE circle all the time
ONE
What happens on mouse click?
---
### Author:  [@Timo](https://discourse.processing.org/u/Timo)
#### Post date: [February 11, 2022, 3:12pm UTC](https://discourse.processing.org/t/logic-on-making-a-circle-disappear-when-clicked-and-drawing-another-circle-at-the-same-time/35066/9 "2022-02-11T15:12:06Z")
ok , if it is only one circle , when I click it inside the circle , it disappears . This is the simplified version of the code is here .
```auto
let d;
let circleObject;
let circleObjectClicked = false;
let t ;
let xCenter,yCenter;
function setup() {
createCanvas(500,500)
}
function draw() {
background(255);
if(circleObjectClicked == false){
fill(128,0,128)
circle(100,100,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;
}
```
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [February 11, 2022, 3:49pm UTC](https://discourse.processing.org/t/logic-on-making-a-circle-disappear-when-clicked-and-drawing-another-circle-at-the-same-time/35066/10 "2022-02-11T15:49:30Z")
It disappears … and reappears!
So what do you have to do?
---
### Author:  [@Timo](https://discourse.processing.org/u/Timo)
#### Post date: [February 11, 2022, 10:32pm UTC](https://discourse.processing.org/t/logic-on-making-a-circle-disappear-when-clicked-and-drawing-another-circle-at-the-same-time/35066/11 "2022-02-11T22:32:38Z")
Sorry i didnt get you . It just disappears , it does not reappears. But perhaps i have understood something wrong here
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [February 11, 2022, 10:52pm UTC](https://discourse.processing.org/t/logic-on-making-a-circle-disappear-when-clicked-and-drawing-another-circle-at-the-same-time/35066/12 "2022-02-11T22:52:59Z")
Just give it another position instead of thinking of it in terms of 2 circles
---
### Author:  [@Timo](https://discourse.processing.org/u/Timo)
#### Post date: [February 12, 2022, 4:42pm UTC](https://discourse.processing.org/t/logic-on-making-a-circle-disappear-when-clicked-and-drawing-another-circle-at-the-same-time/35066/13 "2022-02-12T16:42:04Z")
I think i need a fresh start. I might have over complicated it here , I explored the concepts of classes. But now I think it is drifting away from the main objective . Should i split the problem into two ? quite lost here
```auto
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();
}
}
```
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [February 12, 2022, 5:48pm UTC](https://discourse.processing.org/t/logic-on-making-a-circle-disappear-when-clicked-and-drawing-another-circle-at-the-same-time/35066/14 "2022-02-12T17:48:45Z")
> [@Chrisir](#):
>
> Just give it another position
Just give it another position on mousePressed
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [February 12, 2022, 6:36pm UTC](https://discourse.processing.org/t/logic-on-making-a-circle-disappear-when-clicked-and-drawing-another-circle-at-the-same-time/35066/15 "2022-02-12T18:36:41Z")
> [@Timo](#):
>
> ```auto
> let d;
> let circleObject;
> let circleObjectClicked = false;
> let t ;
> let xCenter,yCenter;
>
> function setup() {
> createCanvas(500,500)
> }
>
> function draw() {
> background(255);
>
> if(circleObjectClicked == false){
> fill(128,0,128)
> circle(100,100,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;
> }
>
> ```
Let’s start with this version.
for the position instead of 100,100 say x,y
define x,y before setup()
```auto
if(d <100){
circleObjectClicked = true;
}
```
here you want give x and y a new value SO THAT THE circle appears elsewhere
```auto
if(d <100){
x = .....
y = ...
}
```
you can also change its radius and color (when both are variables too)
* * *
That’s what I meant when I said think of it as ONE circle and just move it to a new position
It’s just re-thinking the assignment (or its text)
I hope this helps.
Chrisir
* * *
**Full Code (in JAVA flavor)**
```auto
float x=100, y=100;
void setup() {
size(500, 500);
}
void draw() {
background(255);
fill(128, 0, 128);
ellipse(x, y, 100, 100);
}
void mouseClicked() {
float d = dist(mouseX, mouseY, x, y);
if (d <100) {
x=random(width);
y=random(height);
}
}
```
---
### Author:  [@Timo](https://discourse.processing.org/u/Timo)
#### Post date: [February 16, 2022, 3:36pm UTC](https://discourse.processing.org/t/logic-on-making-a-circle-disappear-when-clicked-and-drawing-another-circle-at-the-same-time/35066/16 "2022-02-16T15:36:38Z")
Thanks a lot, It was as you said with one circle quite straightforward . I totally went overboard in my thinking there. Thanks again.
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [February 16, 2022, 4:07pm UTC](https://discourse.processing.org/t/logic-on-making-a-circle-disappear-when-clicked-and-drawing-another-circle-at-the-same-time/35066/17 "2022-02-16T16:07:57Z")
you can also change size and color on mouse click when you store these data in variables too
---
### Author:  [@Timo](https://discourse.processing.org/u/Timo)
#### Post date: [April 6, 2022, 3:48pm UTC](https://discourse.processing.org/t/logic-on-making-a-circle-disappear-when-clicked-and-drawing-another-circle-at-the-same-time/35066/18 "2022-04-06T15:48:27Z")
Hi @Chrisir , i used your feedback , implemented and got the desired results. I am now trying to extend it in the 3D using webGL. So for now I am trying to check if the mouseX and mouseY is inside the cube. If it is inside the cube then another cube is drawn moving towards the user. In the example below, my condition to check the above statement is wrong .
Is it possible to have a condition where one can check if the mouseX, mouseY is inside the cube ( neglecting the z parameter) ? Sample sketch is below
```auto
let r = 100, g = 100, b =200
let z = -80;
let x = 0, y = 0 ;
function setup() {
createCanvas(400, 400,WEBGL);
avoidClipping();
}
function draw() {
background(255);
push();
fill(255);
fill(r,g,b);
translate(x,y,z);
box(80,80,80);
pop();
z += 3;
}
function avoidClipping() {
perspective(PI / 3.0, width / height, 1, 1000000);
}
function mouseClicked() {
let d = dist(mouseX,mouseY,x,y);
// console.log(mouseX);
console.log(d);
if (d >80) {
x= random(-200,200);//random(width);
y= random(-200,200);//random(height);
z = -40;
r = random(0,255);
g = random(0,255);
b = random(0,255);
}
}
```
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [April 6, 2022, 8:42pm UTC](https://discourse.processing.org/t/logic-on-making-a-circle-disappear-when-clicked-and-drawing-another-circle-at-the-same-time/35066/19 "2022-04-06T20:42:57Z")
I recommend you look at screenX and implement it
for p5
see [Mouse interaction with 3D objects / objects on 3D plane - #2 by Chrisir](https://discourse.processing.org/t/mouse-interaction-with-3d-objects-objects-on-3d-plane/19499/2)
In processing JAVA flavor you can say
```auto
theX=screenX (.........
theY=screenY (.........
```
and later
```auto
if(dist(mouseX,mouseY,theX,theY)<40) {
// hit
}
```
---
### Author:  [@Timo](https://discourse.processing.org/u/Timo)
#### Post date: [April 7, 2022, 4:29pm UTC](https://discourse.processing.org/t/logic-on-making-a-circle-disappear-when-clicked-and-drawing-another-circle-at-the-same-time/35066/20 "2022-04-07T16:29:32Z")
Hi thanks for the tip. If i understood the script , it takes a snapshot of the co-ordinates for example X and Y co-ordinate and stores in the variables. I modified as mentioned in the github repo , but i found out that the screenposition and the mouse position seems to be nearly identical. Have i understood it wrong ?
Script
```auto
let r = 100, g = 100, b =200
let z = -100;
let x = 0, y = 0 ;
let mouseX2D, mouseY2D;
function setup() {
createCanvas(400, 400,WEBGL);
avoidClipping();
addScreenPositionFunction();
}
function draw() {
background(255);
push();
fill(255);
fill(r,g,b);
translate(x,y,z);
box(60,60,60);
pop();
z += 3;
}
function avoidClipping() {
perspective(PI / 3.0, width / height, 1, 1000000);
}
function mouseClicked() {
mouseX2D = screenPosition(mouseX);
mouseY2D = screenPosition(mouseY);
// check if there is any difference in the values
console.log(mouseX2D.x);
console.log(mouseX);
let d = dist(mouseX,mouseY,mouseX2D.x,mouseY2D.y);
if (d <80) {
x= random(-200,200);//random(width);
y= random(-200,200);//random(height);
z = -1000;
r = random(0,255);
g = random(0,255);
b = random(0,255);
}
}
```
[Next page](https://discourse.processing.org/t/logic-on-making-a-circle-disappear-when-clicked-and-drawing-another-circle-at-the-same-time/35066.md?page=2)