# 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:** 6\
**Page:** 3

<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, 11:18pm UTC](https://discourse.processing.org/t/logic-on-making-a-circle-disappear-when-clicked-and-drawing-another-circle-at-the-same-time/35066/41 "2022-04-29T23:18:06Z")

</div>

good exercise and research for you

---

<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:** [May 1, 2022, 10:26am UTC](https://discourse.processing.org/t/logic-on-making-a-circle-disappear-when-clicked-and-drawing-another-circle-at-the-same-time/35066/42 "2022-05-01T10:26:56Z")

</div>

Seriously, when you want to have real help on this, translate into p5js and post the link to your attempt 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:** [May 4, 2022, 3:33pm UTC](https://discourse.processing.org/t/logic-on-making-a-circle-disappear-when-clicked-and-drawing-another-circle-at-the-same-time/35066/43 "2022-05-04T15:33:01Z")

</div>

Hi @Chrisir , indeed it was a good research and exercise. I have put the p5 version of it linked below

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

Right now I am trying to figure how to make the explosion go radially outwards ( to have a more natural movement ) and perhaps to explode into smaller cubes instead of squares.

T

---

<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:** [May 4, 2022, 4:54pm UTC](https://discourse.processing.org/t/logic-on-making-a-circle-disappear-when-clicked-and-drawing-another-circle-at-the-same-time/35066/44 "2022-05-04T16:54:43Z")

</div>

That’s done  
By the two vel variables in the 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:** [May 4, 2022, 9:34pm UTC](https://discourse.processing.org/t/logic-on-making-a-circle-disappear-when-clicked-and-drawing-another-circle-at-the-same-time/35066/45 "2022-05-04T21:34:22Z")

</div>

Thanks , yes i noticed that but i thought of adding more variance but maybe later. 😊

I am currently trying to figure out a way to have the explosions occur on top of a webcam feed instead of having it on the canvas. I think the way forward is to use createGraphics function . not sure at the moment , perhaps would need investigation .

---

<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:** [May 6, 2022, 2:17pm UTC](https://discourse.processing.org/t/logic-on-making-a-circle-disappear-when-clicked-and-drawing-another-circle-at-the-same-time/35066/46 "2022-05-06T14:17:00Z")

</div>

Hi , I read up and found that in order to draw on different canvases one needs to use `create graphics` method to do so . I tried to extend the logic : Explore when the mouse is inside the cube to draw on top of a webcam feed but it does not seem to work .

From wikipage : [Getting started with WebGL in p5 · processing/p5.js Wiki · GitHub](https://github.com/processing/p5.js/wiki/Getting-started-with-WebGL-in-p5)  
I had translated the co-ordinate system from the WEBGL sketch , that is the origin being at the center as compared to the 2D canvas which is on top left.

However when i run the sketch , I can see that the mouse is being clicked inside the cube but it only explodes in the first instance but not later . The distance computer seems to be wrong . It seemed to have worked perfectly for the 2d sketch but not when introducing a webcam feed. So i am a bit confused as in what is wrong  
Sketch to the webcam feed ( exploisions not working ) : [p5.js Web Editor](https://editor.p5js.org/timtensor/sketches/PNbchOyYp)

I think it could something fundamentally wrong in approaching the problem .

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