Counter that increases with mouse click

I’m making a simple game in which I want a counter which invreases every time an object is clicked.

Hello!

Before setup() say int counter;

You need setup() and draw()

see Hello Mouse here: https://www.processing.org/tutorials/overview/

And then, after the draw() function:


void mousePressed () {
   counter++; // increase the counter
   println(counter); 
}

Chrisir

1 Like

just like chrisir said, you’ll need to use the mousePressed() function, however if you want to do it everytime you click an object then you’ll need to do check if the mouse is inside such object
Let’s say you’ve got a rectagle which first point is (x1,y1) and second point is (x2,y2) then you’ll have to do:

void mousePressed () {
   if((mouseX>x1&&mouseX<x2)&&(mouseY>y1&&mouseY<y2)){
      counter++;
   }
   println(counter); 
}

Of course that’s just in case the object is a rectangle or a square (without an angle), the condition will depend on the geometry of the object you want to click

1 Like

Thanks! It worked. How would ist work with a Circle?

I’d recommend you to search for collision detection stuff, that’s basically what you want to do, you can start reading this: https://developer.mozilla.org/en-US/docs/Games/Techniques/2D_collision_detection

1 Like

I always write it like this:


void mousePressed () {
  if (mouseX>x1 &&
    mouseX<x2 && 
    mouseY>y1 && 
    mouseY<y2 ) {
    counter++;
  }
  println(counter);
}

1 Like

I mean is pretty much the same, but for me is easier to visualize it properly: “It must be between the bounds of x and the bounds of y”

1 Like

Hi @thedarklord,

For a circle I would suggest that you simply check if the distance of the mouse position to the center of the circle is lower or equal to the circle radius :wink:

int diameter = 50;
int center_x, center_y;

int counter = 0;
void setup(){
  size(100,100);
  center_x = width/2;
  center_y = height/2;
  
}

void draw(){
  background(123);
  fill(0);
  ellipseMode(CENTER);
  circle(center_x,center_y,diameter);
  textAlign(CENTER, CENTER);
  fill(255);
  text(counter,center_x,center_y);
  
}

void mousePressed(){
  float dist2center = sqrt(((center_x - mouseX) * (center_x - mouseX)) +
                           ((center_y - mouseY) * (center_y - mouseY)));
 /* println("CX = " + center_x + " CY = " + center_y);
  println("mouseX = " + mouseX + " mouseY = " + mouseY);
  println("DIST = " + dist2center + " RADIUS = " + diameter/2);*/
  if(dist2center <= diameter/2){
    counter++;
  }
}

Hope it helps :slight_smile:
Best regards,

2 Likes

Thanks @Vako for this. It is working just fine for me. I am trying to add a Reset option exactly like this one - https://www.clickspeedtester.com/click-counter … but don’t know why it’s not resetting the counter text to zero. Although when I start clicking the button after reset, the counting starts from zero only.

Following is the code I have used.

void resetCount() {
   counter=0;
}

Hi @nickirwin

Welcome to the forum!

Where have you called to resetCount() method?

Below is one of many examples on how to reset the counter (in this case press the key ‘r’ on the keyboard

int diameter = 50;
int center_x, center_y;

int counter = 0;
void setup(){
  size(100,100);
  center_x = width/2;
  center_y = height/2;
  
}

void draw(){
  background(123);
  fill(0);
  ellipseMode(CENTER);
  circle(center_x,center_y,diameter);
  textAlign(CENTER, CENTER);
  fill(255);
  text(counter,center_x,center_y);
  
}

void mousePressed(){
  float dist2center = sqrt(((center_x - mouseX) * (center_x - mouseX)) +
                           ((center_y - mouseY) * (center_y - mouseY)));
 /* println("CX = " + center_x + " CY = " + center_y);
  println("mouseX = " + mouseX + " mouseY = " + mouseY);
  println("DIST = " + dist2center + " RADIUS = " + diameter/2);*/
  if(dist2center <= diameter/2){
    counter++;
  }
}

void keyPressed(){
  if(key == 'r') resetCount(); //If the ley r is pressed that reset the counter
}

void resetCount() {
   counter=0;
}

Best regards