How to register a click to a moving object.

ColdRissen012

Hi, I am trying to make a game where you have to click on a moving ball, with each click the speed of the ball increases. I am unable to make the mouse clicks hit the ball to register a speed change and hit the ball. I have attached the code below and would like it if someone could help me try to figure it out.

Thanks!

int rad = 20;        // Width of the shape
float xpos, ypos;    // Starting position of shape    
float xspeed = 2.0;  // Speed of the shape
float yspeed = 2.0;  // Speed of the shape    
int xdirection = 1;  // Left or Right
int ydirection = 1;  // Top to Bottom
int score=0;         //Inital score
int lives=5;         //Number of lives you start with
boolean lost=false;  //Have you lost yet?                  
int speed=1; 

void setup() 
{
  size(640, 360);
  noStroke();
  frameRate(30);
  ellipse(xpos, height/10,100,100);
  xpos = width/2;      // Set the starting position of the shape
  ypos = height/2;
}

void draw() 
{
  background(102);


  xpos = xpos + ( xspeed * xdirection );   // Update the position of the shape
  ypos = ypos + ( yspeed * ydirection );


  if (xpos > width-rad || xpos < rad) {    // Test to see if the shape exceeds the boundaries of the screen
                                          // If it does, reverse its direction by multiplying by -1
    xdirection *= -1; 
  }
  if (ypos > height-rad || ypos < rad) {
    ydirection *= -1;
  }


  ellipse(xpos, ypos, rad, rad);                 // Draw the shape
  text("score = "+score,10,10);                  //Print the score on the screen
  text("lives = "+lives,width-80,10);            //Print remaining lives
  if (lives<=0)                                  //Check to see if you lost
  {
    textSize(20);
    text("Click to Restart", 125,100);
    noLoop();                                    //Stop looping at the end of the draw function
    lost=true;
    textSize(13);
  }
}
void mousePressed()                              //Runs whenever the mouse is pressed
{
  if (dist(mouseX, mouseY, xpos, 100)<=20)       //Did we hit the target?
  {
    score=score+speed;                           //Increase the speed
    speed=speed+1;                               //Increase the Score
  }
  else                                           //We missed
  {
    if (speed<1)                                 //If speed is greater than 1 decrease the speed
    {
    speed=speed-1;
    }
    lives=lives-1;                               //Take away one life
  }
  if (lost==true)                                //If we lost the game, reset now and start over 
  {
    speed=1;                                     //Reset all variables to initial conditions
    lives=5;
    score=0;
    xpos=width/2;
    xdirection=1;
    lost=false;
    loop();                                      //Begin looping draw function again
  }
}

koogs

Edit post, highlight code, press Ctrl-o to format code

koogs

Why are you using 100 in your distance calculations?

ColdRissen012

@koogs what should it be around? thanks.

ColdRissen012

Also could you test the code and tell me what is wrong because I am new to processing. @koogs

jeremydouglass

@koogs asked:

Why are you using 100 in your distance calculations?

@ColdRissen012 -- look up the dist() reference page. Then look carefully at the arguments you are using on your line 54, where you check whether the mouse clicked the ball (your problem). Where on the screen are you checking for the ball? Try manually drawing it. Where should you be checking?

ColdRissen012

@jeremydouglass thanks for the help so far, I'm not used to the distance function yet, do you think you can help me to figure out how to use it? Thanks once again

kfrajer

Here is an example code. Using classes is the way to go. Usage: Click on the circles to select them. Change n to increase the number of circles in your sketch. any selected circle will be reset when they reach the boundary.

ArrayList<Particle> p;
int n;

void setup() 
{
  size(600, 400);
  n=10;
  p = new ArrayList<Particle>();
  for (int i=0; i<n; i++)
    p.add(new Particle(random(width), random(height), random(1, 3)));
}

void draw() { 
  background(92);
  for (Particle ap : p)
    ap.update();
} 

void mouseReleased() {
  for (Particle ap : p) {
    if(dist(mouseX,mouseY,ap.x,ap.y)<ap.getRadius())
      ap.setSelectedField();
  }
}

class Particle { 
  float x, y, speed;
  private boolean sel;
  private int radius;

  Particle (float _x, float _y, float _s) {  
    x=_x;
    y = _y; 
    speed = _s; 
    sel=false;
    radius=20;
  } 

  void update() { 
    y += speed; 
    x += speed; 
    if (y > height) { 
      y = 0;
      sel=false;
    } 
    if (x > width) { 
      x = 0;
      sel=false;
    }



    if (sel==true)
      fill(255, 255, 0);
    else
      fill(255);
    ellipse(x, y, radius,radius);
  }

  void setSelectedField() {
    sel=true;
  }

  int getRadius(){
    return radius;
  }
} 

Kf

ColdRissen012

@kfrajer this code helped but our aim is to have one ball that bounces around on the screen and everytime you click it the ball will speed up. But if you could also make the ball change colour like it does in your code. Thx in advance.

koogs

Fixing the code is always preferable to replacing the code, kf - they are struggling with dist() and you're throwing particle systems at them.

Rissen, dist measures the distance between two objects, the mouse and the ball here. The mouse is at mouseX, mouseY, the ball is at xpos, ypos.

You are using

if (dist(mouseX, mouseY, xpos, 100) <= 20)       //Did we hit the target?

Can you see what might be wrong?

koogs

(That 20 should be rad BTW, you define a radius at the top of the code, why not use it?)

kfrajer

@koogs

I could fix the code, but sometimes it is easier to build it from scratch. My code is a demonstration and not a full solution. Setting n=1 will reduce it to its original code. I have seen ppl asking for help before. For this problems, heading right into classes is the way to go. For example, changing the speed (as requested in a follow up post by @ColdRissen012) would be easily implemented using the class.

@ColdRissen012

To make the ball bounce all over the place, you need to implement the solution in line 39 - in the update() function to take into account speed reversal and checking the other two boundaries of the problem.

To change the speed of the ball, you need to implement something similar to line 60, setSelectedField() function but that changes the speed of the object. Then you would add this function in your mouseReleased() function.

I could do the changes myself. I encourage you to do this part yourself and come back with your new code if you run into any probelms.

Kf

ColdRissen012

hi guys thanks to everyone that has helped us we have all the code working. the only thing left is to speed the ball up, so that everytime we click it, the ball speeds goes faster.

kfrajer

Partial code with requested changes:

void mouseReleased() {
  for (Particle ap : p) {
    if(dist(mouseX,mouseY,ap.x,ap.y)<ap.getRadius()){
      ap.setSelectedField();
      ap.increaseSpeed();
    }
  }
}

(... now within the particle class)

  void increaseSpeed(){
     speed++;
  }

Notice introducing the changes is straight forward because I am using classes. Everything is encapsulated. Although this is not an ideal design, it shows the concept.

Kf