# Counter that increases with mouse click

**URL:** <https://discourse.processing.org/t/counter-that-increases-with-mouse-click/25342>\
**Category:** Coding Questions\
**Created:** [November 11, 2020, 2:07pm UTC](https://discourse.processing.org/t/counter-that-increases-with-mouse-click/25342 "2020-11-11T14:07:22Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![thedarklord](https://avatars.discourse-cdn.com/v4/letter/t/e47c2d/32.png) [@thedarklord](https://discourse.processing.org/u/thedarklord)\
**Post date:** [November 11, 2020, 2:07pm UTC](https://discourse.processing.org/t/counter-that-increases-with-mouse-click/25342/1 "2020-11-11T14:07:22Z")

</div>

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

---

<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:** [November 11, 2020, 3:29pm UTC](https://discourse.processing.org/t/counter-that-increases-with-mouse-click/25342/2 "2020-11-11T15:29:16Z")

</div>

Hello!

Before `setup()` say `int counter;`

You need setup() and draw()

see **Hello Mouse** here: [https://www.processing.org/tutorials/overview/](https://www.processing.org/tutorials/overview/)

And then, after the `draw()` function:

```auto

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

```

Chrisir

---

<div class="post-metadata">

**Author:** ![Vako](https://avatars.discourse-cdn.com/v4/letter/v/a9adbd/32.png) [@Vako](https://discourse.processing.org/u/Vako)\
**Post date:** [November 12, 2020, 3:49am UTC](https://discourse.processing.org/t/counter-that-increases-with-mouse-click/25342/3 "2020-11-12T03:49:17Z")

</div>

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:

```auto
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

---

<div class="post-metadata">

**Author:** ![thedarklord](https://avatars.discourse-cdn.com/v4/letter/t/e47c2d/32.png) [@thedarklord](https://discourse.processing.org/u/thedarklord)\
**Post date:** [November 12, 2020, 5:40am UTC](https://discourse.processing.org/t/counter-that-increases-with-mouse-click/25342/4 "2020-11-12T05:40:46Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Vako](https://avatars.discourse-cdn.com/v4/letter/v/a9adbd/32.png) [@Vako](https://discourse.processing.org/u/Vako)\
**Post date:** [November 12, 2020, 7:01am UTC](https://discourse.processing.org/t/counter-that-increases-with-mouse-click/25342/5 "2020-11-12T07:01:28Z")

</div>

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](https://developer.mozilla.org/en-US/docs/Games/Techniques/2D_collision_detection)

---

<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:** [November 12, 2020, 9:21am UTC](https://discourse.processing.org/t/counter-that-increases-with-mouse-click/25342/6 "2020-11-12T09:21:40Z")

</div>

> [@Vako](#):
>
> ```auto
> void mousePressed () {
> if((mouseX>x1&&mouseX<x2)&&(mouseY>y1&&mouseY<y2)){
> counter++;
> }
> println(counter); 
> }
> 
> ```

I always write it like this:

```auto

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

```

---

<div class="post-metadata">

**Author:** ![Vako](https://avatars.discourse-cdn.com/v4/letter/v/a9adbd/32.png) [@Vako](https://discourse.processing.org/u/Vako)\
**Post date:** [November 12, 2020, 4:04pm UTC](https://discourse.processing.org/t/counter-that-increases-with-mouse-click/25342/7 "2020-11-12T16:04:39Z")

</div>

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”

---

<div class="post-metadata">

**Author:** ![MiguelSanches](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/miguelsanches/32/11172_2.png) [@MiguelSanches](https://discourse.processing.org/u/MiguelSanches)\
**Post date:** [November 12, 2020, 4:28pm UTC](https://discourse.processing.org/t/counter-that-increases-with-mouse-click/25342/8 "2020-11-12T16:28:42Z")

</div>

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 😉

```auto
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 🙂  
Best regards,

---

<div class="post-metadata">

**Author:** ![nickirwin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/nickirwin/32/11191_2.png) [@nickirwin](https://discourse.processing.org/u/nickirwin)\
**Post date:** [November 25, 2020, 4:58am UTC](https://discourse.processing.org/t/counter-that-increases-with-mouse-click/25342/9 "2020-11-25T04:58:36Z")

</div>

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](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.

```auto
void resetCount() {
   counter=0;
}

```

---

<div class="post-metadata">

**Author:** ![MiguelSanches](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/miguelsanches/32/11172_2.png) [@MiguelSanches](https://discourse.processing.org/u/MiguelSanches)\
**Post date:** [November 25, 2020, 10:41am UTC](https://discourse.processing.org/t/counter-that-increases-with-mouse-click/25342/10 "2020-11-25T10:41:53Z")

</div>

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

```auto
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