# How to click on a moving ellipse

**URL:** <https://discourse.processing.org/t/how-to-click-on-a-moving-ellipse/20864>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [May 14, 2020, 12:48pm UTC](https://discourse.processing.org/t/how-to-click-on-a-moving-ellipse/20864 "2020-05-14T12:48:12Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![jaiy](https://avatars.discourse-cdn.com/v4/letter/j/919ad9/32.png) [@jaiy](https://discourse.processing.org/u/jaiy)\
**Post date:** [May 14, 2020, 12:48pm UTC](https://discourse.processing.org/t/how-to-click-on-a-moving-ellipse/20864/1 "2020-05-14T12:48:12Z")

</div>

Urgently need help on finishing my project its called the dropping ball game and everytime the ball drops you would click on it and the score would go up by 1 and vice versa but having a hard time clicking on the ellipse. This what I got so far if someone could help that would be awsome.

```auto
type or paste code here
PImage p;
int missed = 0;
int hits = 0;
int score = 0;
int y = 25;
int x = (int)random(25,475);
void setup(){
  p = loadImage("projectBackground.png");
  size(500,700);
  background(255);
}

void draw(){
  background(p);
  fill(#DFF218);
  ellipse(x,y,50,50);
  y+=5;
  if(y >= height){
    y = 25;
    x = (int)random(25,475);}
    fill(0);
    textSize(25);
    textAlign(CENTER);
    text("Score= " + score, 100,650);
    text("Missed= " + missed, 250,650);
    text("Hits= " + hits, 400,650);
    if(y > 575){
     y = 25;
     x = (int)random(25,475);
    }
  }
  
void mouseClicked(){
if(mouseX < 600 && mouseX > 0 && mouseY > 0 && mouseY < 500){
  hits++;
}
 
  }
 
  

 
 
void keyPressed(){
  if(key == 'r'){
    loop();
  }
  if(key == 's'){
    noLoop();
  }
}

```

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [May 14, 2020, 12:57pm UTC](https://discourse.processing.org/t/how-to-click-on-a-moving-ellipse/20864/2 "2020-05-14T12:57:42Z")

</div>

Oh wait, hang on. …

---

<div class="post-metadata">

**Author:** ![jaiy](https://avatars.discourse-cdn.com/v4/letter/j/919ad9/32.png) [@jaiy](https://discourse.processing.org/u/jaiy)\
**Post date:** [May 14, 2020, 12:59pm UTC](https://discourse.processing.org/t/how-to-click-on-a-moving-ellipse/20864/3 "2020-05-14T12:59:35Z")

</div>

I’m confused as I am only a beginner

---

<div class="post-metadata">

**Author:** ![jaiy](https://avatars.discourse-cdn.com/v4/letter/j/919ad9/32.png) [@jaiy](https://discourse.processing.org/u/jaiy)\
**Post date:** [May 14, 2020, 1:00pm UTC](https://discourse.processing.org/t/how-to-click-on-a-moving-ellipse/20864/4 "2020-05-14T13:00:30Z")

</div>

doing this last minute stressin right now

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [May 14, 2020, 1:05pm UTC](https://discourse.processing.org/t/how-to-click-on-a-moving-ellipse/20864/5 "2020-05-14T13:05:12Z")

</div>

The problem is that when mouseClicked() runs, you check if the mouse’s position is in a rectangle that takes up most of the screen. What you really need to do is see if the click is close enough to the center of the circle so that the click was on the circle. That is, the distance between where the click was and where the center of the circle is needs to be less than the radius of the circle.

You can use dist() to get the distance between two points. One point is (mouseX, mouseY), the other is (x,y), the center of the circle.

How big is your circle? So what’s it’s radius?

`if( dist(???,???,???,???) < ??? ){`

---

<div class="post-metadata">

**Author:** ![jaiy](https://avatars.discourse-cdn.com/v4/letter/j/919ad9/32.png) [@jaiy](https://discourse.processing.org/u/jaiy)\
**Post date:** [May 14, 2020, 1:06pm UTC](https://discourse.processing.org/t/how-to-click-on-a-moving-ellipse/20864/6 "2020-05-14T13:06:41Z")

</div>

y is the circle and y = 25 so would it be that

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [May 14, 2020, 1:10pm UTC](https://discourse.processing.org/t/how-to-click-on-a-moving-ellipse/20864/7 "2020-05-14T13:10:01Z")

</div>

Here’s a working example. Notice the conditional statement in mousePressed() (not mouseClicked()) has changed.

```auto
PImage p;
int missed = 0;
int hits = 0;
int score = 0;
int y = 25;
int x = (int)random(25, 475);
void setup() {
  // I don't have your background image.
  //p = loadImage("projectBackground.png");
  size(500, 700);
}

void draw() {
  // I don't have your background image.
  background(255);//p);
  
  // Update position.
  y+=5;
  if (y > 575) {
    y = 25;
    x = (int)random(25, 475);
  }
  
  // Draw ball.
  fill(#DFF218);  
  ellipse(x, y, 50, 50);

  // Draw info.
  fill(0);
  textSize(25);
  textAlign(CENTER);
  text("Score= " + score, 100, 650);
  text("Missed= " + missed, 250, 650);
  text("Hits= " + hits, 400, 650);
  
}

void mousePressed() {
  if( dist(mouseX, mouseY, x, y) < 25 ){
    hits++;
  }
}

void keyPressed() {
  if (key == 'r') {
    loop();
  }
  if (key == 's') {
    noLoop();
  }
}

```

I also had to remove your background image, because I don’t have it.

---

<div class="post-metadata">

**Author:** ![jaiy](https://avatars.discourse-cdn.com/v4/letter/j/919ad9/32.png) [@jaiy](https://discourse.processing.org/u/jaiy)\
**Post date:** [May 14, 2020, 1:10pm UTC](https://discourse.processing.org/t/how-to-click-on-a-moving-ellipse/20864/8 "2020-05-14T13:10:11Z")

</div>

I did that and its still not working

---

<div class="post-metadata">

**Author:** ![jaiy](https://avatars.discourse-cdn.com/v4/letter/j/919ad9/32.png) [@jaiy](https://discourse.processing.org/u/jaiy)\
**Post date:** [May 14, 2020, 1:11pm UTC](https://discourse.processing.org/t/how-to-click-on-a-moving-ellipse/20864/9 "2020-05-14T13:11:21Z")

</div>

Let me try your one first

---

<div class="post-metadata">

**Author:** ![jaiy](https://avatars.discourse-cdn.com/v4/letter/j/919ad9/32.png) [@jaiy](https://discourse.processing.org/u/jaiy)\
**Post date:** [May 14, 2020, 1:14pm UTC](https://discourse.processing.org/t/how-to-click-on-a-moving-ellipse/20864/10 "2020-05-14T13:14:21Z")

</div>

and also when the ellipse is clicked I trying to get it to disappear and start from the top again how would I do that

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [May 14, 2020, 1:25pm UTC](https://discourse.processing.org/t/how-to-click-on-a-moving-ellipse/20864/11 "2020-05-14T13:25:30Z")

</div>

Well, you’d have to adjust the circle’s position when it’s clicked… You know when a click occurs because you’re increasing the hits counter… Just give it a new position then.

---

<div class="post-metadata">

**Author:** ![jaiy](https://avatars.discourse-cdn.com/v4/letter/j/919ad9/32.png) [@jaiy](https://discourse.processing.org/u/jaiy)\
**Post date:** [May 14, 2020, 1:27pm UTC](https://discourse.processing.org/t/how-to-click-on-a-moving-ellipse/20864/12 "2020-05-14T13:27:06Z")

</div>

```auto
void mousePressed() {
  if( dist(mouseX, mouseY, x, y) < 25 ){
    hits++;
    score++;
    x = (int)random(25,475);

```

something like this

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [May 14, 2020, 1:28pm UTC](https://discourse.processing.org/t/how-to-click-on-a-moving-ellipse/20864/13 "2020-05-14T13:28:48Z")

</div>

Something like that. You might want to reset the y position too!

---

<div class="post-metadata">

**Author:** ![jaiy](https://avatars.discourse-cdn.com/v4/letter/j/919ad9/32.png) [@jaiy](https://discourse.processing.org/u/jaiy)\
**Post date:** [May 14, 2020, 1:29pm UTC](https://discourse.processing.org/t/how-to-click-on-a-moving-ellipse/20864/14 "2020-05-14T13:29:20Z")

</div>

could you show me how to do that

---

<div class="post-metadata">

**Author:** ![jaiy](https://avatars.discourse-cdn.com/v4/letter/j/919ad9/32.png) [@jaiy](https://discourse.processing.org/u/jaiy)\
**Post date:** [May 14, 2020, 1:31pm UTC](https://discourse.processing.org/t/how-to-click-on-a-moving-ellipse/20864/15 "2020-05-14T13:31:10Z")

</div>

nevermind I got it thanks man I really appreciate the help

---

<div class="post-metadata">

**Author:** ![virtuous1](https://avatars.discourse-cdn.com/v4/letter/v/b9bd4f/32.png) [@virtuous1](https://discourse.processing.org/u/virtuous1)\
**Post date:** [May 14, 2020, 3:00pm UTC](https://discourse.processing.org/t/how-to-click-on-a-moving-ellipse/20864/16 "2020-05-14T15:00:30Z")

</div>

@TfGuy44  
A more effective way of removing it, is to store in an array and then splice it (at least in p5js).