How to click on a moving ellipse

Processing Coding Questions
1

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.

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();
  }
}
1 Like
2

Oh wait, hang on. …

3

I’m confused as I am only a beginner

4

doing this last minute stressin right now

5

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(???,???,???,???) < ??? ){

1 Like
6

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

7

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

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.

1 Like
8

I did that and its still not working

9

Let me try your one first

10

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

11

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.

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

something like this

1 Like
13

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

14

could you show me how to do that

15

nevermind I got it thanks man I really appreciate the help

16

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