# mousePressed() function

**URL:** <https://discourse.processing.org/t/mousepressed-function/9714>\
**Category:** Beginners\
**Created:** [March 28, 2019, 6:34am UTC](https://discourse.processing.org/t/mousepressed-function/9714 "2019-03-28T06:34:46Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![Neo\_Wang](https://avatars.discourse-cdn.com/v4/letter/n/ac91a4/32.png) [@Neo\_Wang](https://discourse.processing.org/u/Neo_Wang)\
**Post date:** [March 28, 2019, 6:34am UTC](https://discourse.processing.org/t/mousepressed-function/9714/1 "2019-03-28T06:34:46Z")

</div>

Hi there, from my understanding is that code within the mousePressed() function will be triggered when mouse is pressed down.however, what I was trying to do was draw a circle at a point on canvas when mouse is being pressed. but nothing happened. if i put the background(100). the background color would be re-painted as intended. can someone tell me why?

```auto
function mousePressed(){  
  circle(500,500,20);
}

```

---

<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:** [March 28, 2019, 8:16am UTC](https://discourse.processing.org/t/mousepressed-function/9714/2 "2019-03-28T08:16:00Z")

</div>

When you use `background()` at the beginning of `draw()` - which runs 60 times per second - the circle drawn in mousePressed() gets deleted immediately

There are several different ways to solve this :

- You could delete the `background` line

- You could set a global boolean variable `mouseHasBeenPressed` to `true` in `mousePressed()` and then check it with `if()` in draw() and paint the circle there if the condition is met. Using the variable makes the decision in `mousePressed()` permanent.

Chrisir

---

<div class="post-metadata">

**Author:** ![Neo\_Wang](https://avatars.discourse-cdn.com/v4/letter/n/ac91a4/32.png) [@Neo\_Wang](https://discourse.processing.org/u/Neo_Wang)\
**Post date:** [March 28, 2019, 11:51am UTC](https://discourse.processing.org/t/mousepressed-function/9714/3 "2019-03-28T11:51:33Z")

</div>

thank you very much. it worked.

---

<div class="post-metadata">

**Author:** ![david\_marc](https://avatars.discourse-cdn.com/v4/letter/d/dbc845/32.png) [@david\_marc](https://discourse.processing.org/u/david_marc)\
**Post date:** [March 29, 2019, 7:41am UTC](https://discourse.processing.org/t/mousepressed-function/9714/4 "2019-03-29T07:41:34Z")

</div>

when dealing with p5.js, note that everything on the canvas is redraw every intended milliseconds or seconds. for example. you can call frame rate(or frame draw or setTimeout) every time you want a new frame to be drawn. that determines the rate at which your program is displayed to the end user.

now for your problem you are having,the background simply redraws itself so don’t expect it to work. the best thing is to add a counter or a boolean instance.

eg.

let us use the less glitchy way of approaching your problem. that is the counter.

```auto
int showCirle = 0;

if(mousePressed){
 showCircle=1;
//nested loop
if(showCircle>1){
 showCircle=0;}
}
//now the above function is to make sure this falls back to zero when showCircle has past one
//now for the real deal
if(showCircle==1){
fill(255,0,0);//red
eclipse(500,500,20);//or use ur own circle(500,500,20); assuming its an object you made.
}

```

this should work just fine. why don’t you check it out and see for yourself.

---

<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:** [March 29, 2019, 9:21am UTC](https://discourse.processing.org/t/mousepressed-function/9714/5 "2019-03-29T09:21:16Z")

</div>

> [@david\_marc](#):
>
> showCircle=1;

Did you maybe mean

+=

?

---

<div class="post-metadata">

**Author:** ![david\_marc](https://avatars.discourse-cdn.com/v4/letter/d/dbc845/32.png) [@david\_marc](https://discourse.processing.org/u/david_marc)\
**Post date:** [April 2, 2019, 8:00am UTC](https://discourse.processing.org/t/mousepressed-function/9714/6 "2019-04-02T08:00:06Z")

</div>

no,i mean 1. it is like an on and off switch

---

<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:** [April 2, 2019, 8:26am UTC](https://discourse.processing.org/t/mousepressed-function/9714/7 "2019-04-02T08:26:03Z")

</div>

You wrote:

```auto
 showCircle=1; // OR +=1; ???
//nested loop
if(showCircle>1){

```

But without the `+` sign the `if` clause with `>` will never become true.

Or am I missing something?

Regards, Chrisir

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [April 2, 2019, 4:50pm UTC](https://discourse.processing.org/t/mousepressed-function/9714/8 "2019-04-02T16:50:40Z")

</div>

Thanks for suggesting a counter approach.

> [@david\_marc](#):
>
> this should work just fine

If you want to suggest untested code, please mark it “untested!” when you post it. You declare `showCirle` and then reference `showCircle`, so it seems clear that this code was never run…

I’d recommend posting _actual_ working short sketches, rather than a series of code fragments that need to be assembled in a particular way in order to work. If you must post code fragments, please break them into separate blocks so that is clear, like

this goes in setup:

```auto
// foo

```

this goes in draw:

```auto
// bar

```

---

<div class="post-metadata">

**Author:** ![david\_marc](https://avatars.discourse-cdn.com/v4/letter/d/dbc845/32.png) [@david\_marc](https://discourse.processing.org/u/david_marc)\
**Post date:** [April 2, 2019, 7:05am UTC](https://discourse.processing.org/t/mousepressed-function/9714/9 "2019-04-02T07:05:18Z")

</div>

🤔😐😐😐😑😑😑🤐🤐🤐🤐🤐🤐🤐🤐🤐🤐🤐🤐🤐

---

<div class="post-metadata">

**Author:** ![david\_marc](https://avatars.discourse-cdn.com/v4/letter/d/dbc845/32.png) [@david\_marc](https://discourse.processing.org/u/david_marc)\
**Post date:** [April 3, 2019, 10:00am UTC](https://discourse.processing.org/t/mousepressed-function/9714/10 "2019-04-03T10:00:48Z")

</div>

omg.  
my program doesnt need the + sign. its up to you. what i did was,if you press the mouse.the circle will show. else it will not. but if you want it to show “onclick” here.

```auto
int showCirle = 0;
//draw
if(mousePressed){
 showCircle=showCirle+1;
//nested loop
if(showCircle>1){
 showCircle=0;}
}
//now the above function is to make sure this falls back to zero when showCircle has past one
//now for the real deal
//draw
if(showCircle==1){
fill(255,0,0);//red
ellipse(500,500,20);//or use ur own circle(500,500,20); assuming its an object you made.
}

```

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [April 4, 2019, 11:53am UTC](https://discourse.processing.org/t/mousepressed-function/9714/11 "2019-04-04T11:53:56Z")

</div>

> [@david\_marc](#):
>
> ```auto
> int showCirle = 0;
> //draw
> if(mousePressed){
> showCircle=showCirle+1;
> 
> ```

> showCircle cannot be resolved to a variable

As I said above, **please** don’t post broken code like this – especially in Beginners threads.

You are also posting p5 Java answers on a p5.js question thread – you can do that, but again please mark it to not confuse people.

---

<div class="post-metadata">

**Author:** ![david\_marc](https://avatars.discourse-cdn.com/v4/letter/d/dbc845/32.png) [@david\_marc](https://discourse.processing.org/u/david_marc)\
**Post date:** [April 9, 2019, 10:45am UTC](https://discourse.processing.org/t/mousepressed-function/9714/12 "2019-04-09T10:45:11Z")

</div>

i give up. hope you have gotten your answer. bye