# 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:** 2

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 7, 2022, 5:52pm UTC](https://discourse.processing.org/t/logic-on-making-a-circle-disappear-when-clicked-and-drawing-another-circle-at-the-same-time/35066/21 "2022-04-07T17:52:11Z")

</div>

You want to pass the coordinates of the box to the screen position function

---

<div class="post-metadata">

**Author:** ![Timo](https://avatars.discourse-cdn.com/v4/letter/t/c4cdca/32.png) [@Timo](https://discourse.processing.org/u/Timo)\
**Post date:** [April 8, 2022, 9:30am UTC](https://discourse.processing.org/t/logic-on-making-a-circle-disappear-when-clicked-and-drawing-another-circle-at-the-same-time/35066/22 "2022-04-08T09:30:09Z")

</div>

Thanks ! sorry I understood it wrong and passed it to the 2D objects . I think now I have it done correctly. However I was trying to corelate the x position , y position for the mouse and the cube. I think the **logic : Switch to a new cube if the** `mouseX` and `mouseY` \*\*is inside the cube \*\*  
is some how wrong. And i am not why. I actually printed out the values to for inspection, and currently I am using a static condition to check if the cubes are switching .

```auto
let r = 100, g = 100, b =200
let z = -100;
let x = 0, y = 0 ;
let tempX, tempY, screenPositionGen;
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(80,80,80);
  pop(); 
  z += 1;
  ScreenPositionGen = screenPosition(x,y,z);
  mouseX2D = ScreenPositionGen.x;
  mouseY2D = ScreenPositionGen.y ;

}

function avoidClipping() {
  
    perspective(PI / 3.0, width / height, 1, 1000000);

}

function mouseClicked() {

  // check if there is any difference in the values 
  
  //console.log(mouseX);
  
  
  let d = dist(mouseX,mouseY,mouseX2D, mouseX2D);
  console.log("X mouse : " + mouseX);
  console.log("Y mouse : " + mouseY);
  console.log("X snapshot : "+ mouseX2D);
  console.log("Y snapshot : "+ mouseY2D);
  console.log("distance : " + d);
  

  if (d >40) {
    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);
  }
  
  
  
  
}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 8, 2022, 12:57pm UTC](https://discourse.processing.org/t/logic-on-making-a-circle-disappear-when-clicked-and-drawing-another-circle-at-the-same-time/35066/23 "2022-04-08T12:57:33Z")

</div>

> [@Timo](#):
>
> `mouseX,mouseY,mouseX2D, mouseX2D);`

Typo in last word

Chrisir

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 8, 2022, 12:58pm UTC](https://discourse.processing.org/t/logic-on-making-a-circle-disappear-when-clicked-and-drawing-another-circle-at-the-same-time/35066/24 "2022-04-08T12:58:11Z")

</div>

> [@Timo](#):
>
> `if (d >40) {`

Consider using \< here !!!

---

<div class="post-metadata">

**Author:** ![Timo](https://avatars.discourse-cdn.com/v4/letter/t/c4cdca/32.png) [@Timo](https://discourse.processing.org/u/Timo)\
**Post date:** [April 8, 2022, 1:27pm UTC](https://discourse.processing.org/t/logic-on-making-a-circle-disappear-when-clicked-and-drawing-another-circle-at-the-same-time/35066/25 "2022-04-08T13:27:48Z")

</div>

Hi Chris , sorry was my mistake. I did use` mouseY2D` and had also tried with the threshold conditition

```auto
d < 40 

```

But when i measured the distance between `mouseX,mouseY,mouseX2D,mouseY2D` the distance computed was more than 40 , even though the mouseclick was inside the cube. So i am a but confused what is the reason.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 8, 2022, 1:33pm UTC](https://discourse.processing.org/t/logic-on-making-a-circle-disappear-when-clicked-and-drawing-another-circle-at-the-same-time/35066/26 "2022-04-08T13:33:58Z")

</div>

Interesting.

I never used `screenPosition` because I don’t use p5.

Try:

```auto
  ScreenPositionGen = screenPosition(0,0,0); // only 0 here!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

```

directly after translate() command !!!

**Remark**

Maybe 40 is too small?

---

<div class="post-metadata">

**Author:** ![Timo](https://avatars.discourse-cdn.com/v4/letter/t/c4cdca/32.png) [@Timo](https://discourse.processing.org/u/Timo)\
**Post date:** [April 8, 2022, 1:50pm UTC](https://discourse.processing.org/t/logic-on-making-a-circle-disappear-when-clicked-and-drawing-another-circle-at-the-same-time/35066/27 "2022-04-08T13:50:12Z")

</div>

Hi, thanks for the quick reply. Hmmm I thought putting ScreenPositionGen after translate would take the snap shot of the X,Y component . If the value is set to 0 then the condition would not change right ? I tried to put the condition twice, once to reset it and then get the new parameters. I am not sure , I am just guessing right now .

40 sounds right ? because is it half the length of side of the cube? (80 is the side length)

```auto
let r = 100, g = 100, b =200
let z = -100;
let x = 0, y = 0 ;
let tempX, tempY, screenPositionGen;
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);
  ScreenPositionGen = screenPosition(0,0,0);  
  box(80,80,80);
  pop(); 
  ScreenPositionGen = screenPosition(x,y,z);
  z += 1;
  mouseX2D = ScreenPositionGen.x;
  mouseY2D = ScreenPositionGen.y ;

  
  
}

function avoidClipping() {
  
    perspective(PI / 3.0, width / height, 1, 1000000);

}

function mouseClicked() {

  // check if there is any difference in the values 
  
  //console.log(mouseX);
  
  
  let d = dist(mouseX,mouseY,mouseX2D, mouseY2D);
  console.log("X mouse : " + mouseX);
  console.log("Y mouse : " + mouseY);
  console.log("X snapshot : "+ mouseX2D);
  console.log("Y snapshot : "+ mouseY2D);
  console.log("distance : " + d);
  

  if (d < 40) {
    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);
  }
  
  
  
  
}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 8, 2022, 1:55pm UTC](https://discourse.processing.org/t/logic-on-making-a-circle-disappear-when-clicked-and-drawing-another-circle-at-the-same-time/35066/28 "2022-04-08T13:55:57Z")

</div>

Using it twice doesn’t make sense. The 2nd would just overwrite the first.

Just once (the first appearance in your code using 0,0,0)

Test it please.

(sorry, I don’t have time right now)

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 8, 2022, 2:10pm UTC](https://discourse.processing.org/t/logic-on-making-a-circle-disappear-when-clicked-and-drawing-another-circle-at-the-same-time/35066/29 "2022-04-08T14:10:37Z")

</div>

> [@Timo](#):
>
> `mouseX2D, mouseY2D`

Not good names

Better `boxPositionX2D, boxPositionY2D`

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 8, 2022, 6:24pm UTC](https://discourse.processing.org/t/logic-on-making-a-circle-disappear-when-clicked-and-drawing-another-circle-at-the-same-time/35066/30 "2022-04-08T18:24:23Z")

</div>

Did you follow the usage here: [GitHub - bohnacker/p5js-screenPosition: This function provides a solution to the missing screenX and screenY functions in p5.js. See https://github.com/processing/p5.js/issues/1553 for the discussion.](https://github.com/bohnacker/p5js-screenPosition)  
?

Can you post a link to your p5.js editor to share?

---

<div class="post-metadata">

**Author:** ![Timo](https://avatars.discourse-cdn.com/v4/letter/t/c4cdca/32.png) [@Timo](https://discourse.processing.org/u/Timo)\
**Post date:** [April 9, 2022, 9:29pm UTC](https://discourse.processing.org/t/logic-on-making-a-circle-disappear-when-clicked-and-drawing-another-circle-at-the-same-time/35066/31 "2022-04-09T21:29:17Z")

</div>

Hello sorry for the late reply. I did use the script in the disucssion and followed the instructions.

My sample sketch is here :

> **[p5.js Web Editor](https://editor.p5js.org/timtensor/sketches/LcYftQ2oj)**
>
> A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

I am still experimenting on it .

---

<div class="post-metadata">

**Author:** ![Timo](https://avatars.discourse-cdn.com/v4/letter/t/c4cdca/32.png) [@Timo](https://discourse.processing.org/u/Timo)\
**Post date:** [April 13, 2022, 10:21pm UTC](https://discourse.processing.org/t/logic-on-making-a-circle-disappear-when-clicked-and-drawing-another-circle-at-the-same-time/35066/32 "2022-04-13T22:21:01Z")

</div>

@Chrisir I could not think of any other way except for what was mentioned in the guide. Any ideas ?

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 14, 2022, 6:52am UTC](https://discourse.processing.org/t/logic-on-making-a-circle-disappear-when-clicked-and-drawing-another-circle-at-the-same-time/35066/33 "2022-04-14T06:52:14Z")

</div>

File an issue on github or contact the maker of the tool

---

<div class="post-metadata">

**Author:** ![Timo](https://avatars.discourse-cdn.com/v4/letter/t/c4cdca/32.png) [@Timo](https://discourse.processing.org/u/Timo)\
**Post date:** [April 14, 2022, 1:32pm UTC](https://discourse.processing.org/t/logic-on-making-a-circle-disappear-when-clicked-and-drawing-another-circle-at-the-same-time/35066/34 "2022-04-14T13:32:49Z")

</div>

Good idea, I have raised an issue in github! Hopefully can get some directions and information. Actually I am not sure at the moment , how to check if the point is inside a 2D squarer plane , since we do not have the corners ( such as x1, x2, y1,y2) but only the side of the cube .

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 14, 2022, 3:34pm UTC](https://discourse.processing.org/t/logic-on-making-a-circle-disappear-when-clicked-and-drawing-another-circle-at-the-same-time/35066/35 "2022-04-14T15:34:41Z")

</div>

iirc we use dist from the mouse position to the box position (which is the 2D screen position derived from the 3D position)

So no square needed

---

<div class="post-metadata">

**Author:** ![Timo](https://avatars.discourse-cdn.com/v4/letter/t/c4cdca/32.png) [@Timo](https://discourse.processing.org/u/Timo)\
**Post date:** [April 19, 2022, 11:17am UTC](https://discourse.processing.org/t/logic-on-making-a-circle-disappear-when-clicked-and-drawing-another-circle-at-the-same-time/35066/36 "2022-04-19T11:17:27Z")

</div>

Hi , I think i found my mistake here. I had not translated the mouse co ordinates to reflect on the canvas. My mistake.

---

<div class="post-metadata">

**Author:** ![Timo](https://avatars.discourse-cdn.com/v4/letter/t/c4cdca/32.png) [@Timo](https://discourse.processing.org/u/Timo)\
**Post date:** [April 29, 2022, 1:14pm UTC](https://discourse.processing.org/t/logic-on-making-a-circle-disappear-when-clicked-and-drawing-another-circle-at-the-same-time/35066/37 "2022-04-29T13:14:29Z")

</div>

Hi @Chrisir , I kept of moving forward with what was initially suggested by you and also when finding my mistake. The issues I am currently facing are two folds  
A) When i am clicking inside the cube ( or when the condition is met) the cube disappears but the explosion occurs in the second circle . That is the cubes move forward and the explosion keeps occuring at the same time. What I am trying to do is to  
1. Click inside the cube  
2. First cube disappears  
3. Explosion is created and at the same time new cube appears.  
I remember in your explanations above , you mentioned to think of the circle as one circle . ( or to simplify things )  
I am wondering if the same applies to the above logic  
B) Currently the explosion only supports splitting into rectangles and not into smaller cubes. I tried randomly assigning smaller number .

I am not sure how to move forward . Any ideas . The sketch is mostly inspired from happy-coding p5js tutorials.

Sketch link : [p5.js Web Editor](https://editor.p5js.org/timtensor/sketches/sIAbQJAPj)

Timo

I

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 29, 2022, 7:47pm UTC](https://discourse.processing.org/t/logic-on-making-a-circle-disappear-when-clicked-and-drawing-another-circle-at-the-same-time/35066/38 "2022-04-29T19:47:38Z")

</div>

explosion code in processing java

```auto

// for explosions (these are actually shrapnels)
ArrayList <Shrapnel> shrapnels = new ArrayList<Shrapnel>(); 

//
// ---------------------------------------------------------------
//
void setup() {
  // runs only once - init
  size(800, 600);
} // func

void draw() {
  // runs again and again

  // delete screen
  background(0, 64, 0);

  // explosions
  explosionManager();
} // func

//------------------------------------------------------------------------

void mousePressed() {
  explode();
}

void explode() {
  // explode!
  shrapnels.clear();
  int maxMissiles = int(random(4, 222));
  for (int i=0; i<maxMissiles; i++) {    
    // this is where explode missile/shrapnel object is created 
    // and added to the missiles arrayList.
    // It is small (4) and life decrease is .72 (how fast it dies), 
    // no Line (false).
    shrapnels.add( 
      new Shrapnel(
      random(mouseX-3, mouseX+3), random(mouseY-9, mouseY+9), 
      random(-1.3, 1.3), random(-2.7, .6), 
      4, .72, false)); //
  }
} // method

//--------------------------------------------------------------------------------------------------
// the tab for Explosions and related and the complete class

void explosionManager() {
  // this is a new for loop. 
  // Actually for the Shrapnels.
  for (Shrapnel m : shrapnels) {
    m.decreaseLife(); // call the decrease life (for explosion)
    m.fly(); // call the "fly" method of the missile
    m.display(); // call the "display" method of the missile
  }
  //
  // remove dead ones (you need to have a conventional for-loop here) 
  for (int i=shrapnels.size()-1; i>=0; i--) {
    Shrapnel m = (Shrapnel) shrapnels.get(i);
    if (m.dead) {
      shrapnels.remove(i);
    }
  }
} // func

// ===============================================================

class Shrapnel {
  float startlocX, startlocY; // start location 
  float x, y; // current pos 
  float xvel, yvel; // velocity
  float sizeShrapnel; // size for rect
  float life=20; // how much lifes does it have
  float lifeDecrease; // remove lifes
  boolean dead=false; // is it alive? 
  boolean withLine; // draw line? Explosion has none.

  // contructor
  Shrapnel(
    float _startlocX, float _startlocY, 
    float _xvel, float _yvel, 
    float _size, float _lifeDecrease, 
    boolean _withLine) 
  {
    startlocX = _startlocX;
    startlocY = _startlocY;    
    x = startlocX;
    y = _startlocY;
    sizeShrapnel = _size;
    lifeDecrease=_lifeDecrease;
    xvel = _xvel;
    yvel = _yvel;
    withLine=_withLine;
  } // contructor

  //-----

  void display() {
    //stroke(255, 2, 2);
    fill(255, 2, 2);
    noStroke();
    if (withLine) {
      line(startlocX, startlocY, x, y);
    }
    sizeShrapnel-=.07;
    rect(x, y, sizeShrapnel, sizeShrapnel);
  } // method

  void fly() {
    x += xvel;
    y += yvel;
  } // method

  void decreaseLife() {
    life-=lifeDecrease;
    if (life<=0 || sizeShrapnel<=0) {
      dead=true;
    }
  } // method
  //
} // class
//
// ======================================================================

```

---

<div class="post-metadata">

**Author:** ![Timo](https://avatars.discourse-cdn.com/v4/letter/t/c4cdca/32.png) [@Timo](https://discourse.processing.org/u/Timo)\
**Post date:** [April 29, 2022, 9:42pm UTC](https://discourse.processing.org/t/logic-on-making-a-circle-disappear-when-clicked-and-drawing-another-circle-at-the-same-time/35066/39 "2022-04-29T21:42:47Z")

</div>

Thank you @Chrisir , I will try to go through it and understand it. As I am learning javascript and using p5js as web editor , it is kind of difficult at the moment to check the java implementation into javascript . At the moment i dont understand quite a few of the syntaxes . 😊

---

<div class="post-metadata">

**Author:** ![Timo](https://avatars.discourse-cdn.com/v4/letter/t/c4cdca/32.png) [@Timo](https://discourse.processing.org/u/Timo)\
**Post date:** [April 29, 2022, 10:36pm UTC](https://discourse.processing.org/t/logic-on-making-a-circle-disappear-when-clicked-and-drawing-another-circle-at-the-same-time/35066/40 "2022-04-29T22:36:33Z")

</div>

@Chrisir Actually when i first wanted to check the sketch it threw an error right away . I am wondering how to translate it to p5js web sketch

[Previous 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=1)

[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=3)