# Mouse frustration!

**URL:** <https://discourse.processing.org/t/mouse-frustration/33789>\
**Category:** Beginners\
**Created:** [November 27, 2021, 8:34pm UTC](https://discourse.processing.org/t/mouse-frustration/33789 "2021-11-27T20:34:14Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![AudioBabble](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/audiobabble/32/15092_2.png) [@AudioBabble](https://discourse.processing.org/u/AudioBabble)\
**Post date:** [November 27, 2021, 8:34pm UTC](https://discourse.processing.org/t/mouse-frustration/33789/1 "2021-11-27T20:34:14Z")

</div>

I’m sure this has been asked a million times, so sorry for the repetition.

I’m having a hell of a time with mousePressed, mouseClicked, etc

To confuse me further I’ve just seen an example in the guidance for beginners that says “if(mouseHasBeenClicked)” - is that for real?! if so, why is it not recognized by 3.5.4 ?

Anyway… I’m trying to do what seems to me at least a very simple thing:

```auto
float xCircle = (256);
float yCircle = (256);
float hCircle = (0);
float wCircle = (0);

void setup(){
size (512,512);
}

void draw(){
background(0);
  
}

void mouseClicked (){

  Circle();

}
               // println(wCircle);}

//if ((wCircle > 127.99999) && (xCircle > 256 - 64))
//{ xCircle = xCircle-1;}

    
    void Circle(){
    noFill();
stroke(128);
strokeWeight(5);
ellipse (xCircle,yCircle,hCircle,wCircle);
  if (hCircle < 128)
  {hCircle = hCircle+1;
    wCircle = wCircle +1;
  }
    }    
            

```

the idea being, when I click the mouse, the Circle function is called. But nothing happens.

so, how about not calling a function but rather just drawing a circle:

```auto
float xCircle = (256);
float yCircle = (256);
float hCircle = (0);
float wCircle = (0);

void setup(){
size (512,512);
}

void draw(){
background(0);
  
}

void mouseClicked (){

  noFill();
  stroke(128);
  strokeWeight(8);
  ellipse(256,256,128,128);

}
               // println(wCircle);}

//if ((wCircle > 127.99999) && (xCircle > 256 - 64))
//{ xCircle = xCircle-1;}

    
    void Circle(){
    noFill();
stroke(128);
strokeWeight(5);
ellipse (xCircle,yCircle,hCircle,wCircle);
  if (hCircle < 128)
  {hCircle = hCircle+1;
    wCircle = wCircle +1;
  }
    }    
            

```

so now the circle appears for a brief moment - not when I press the mouse but rather on relase.

OK so here’s the silly question which I feel incredibly dumb for asking but searching the various mouse functions in reference has not helped me answer…

actually it might be a two-part question…

1. How do I get the circle to be drawn ON mouse click and STAY there?

2. How to I call the function Circle(); and get it not to disappear when I release the mouse?

Somebody please end my misery!

---

<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 27, 2021, 9:02pm UTC](https://discourse.processing.org/t/mouse-frustration/33789/2 "2021-11-27T21:02:02Z")

</div>

> [@AudioBabble](#):
>
> mouseHasBeenClicked

I think that’s not a function or an inbuilt variable of processing but rather a variable that is declared in the Sketch.

---

<div class="post-metadata">

**Author:** ![AudioBabble](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/audiobabble/32/15092_2.png) [@AudioBabble](https://discourse.processing.org/u/AudioBabble)\
**Post date:** [November 27, 2021, 9:05pm UTC](https://discourse.processing.org/t/mouse-frustration/33789/3 "2021-11-27T21:05:05Z")

</div>

well that’s interesting in itself… maybe i need my own “mouseHasBeenClicked”… hmmm food for thought 🙂

---

<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 27, 2021, 9:08pm UTC](https://discourse.processing.org/t/mouse-frustration/33789/4 "2021-11-27T21:08:50Z")

</div>

here is the first Sketch working

idea here is to remove background(0); from draw() [draw() runs 60 times per second so it deletes everything]

changed 128 to 12

```auto

float xCircle = 256;
float yCircle = 256;
float hCircle = 0;
float wCircle = 0;

void setup() {
  size (512, 512);
  background(0);
}

void draw() {
  // background(0);
}

void mouseClicked () {

  Circle();
}
// println(wCircle);}

//if ((wCircle > 127.99999) && (xCircle > 256 - 64))
//{ xCircle = xCircle-1;}

void Circle() {
  noFill();
  stroke(128);
  strokeWeight(5);
  ellipse (xCircle, yCircle, hCircle, wCircle);
  if (hCircle < 12) // OR 128 
  {
    hCircle = hCircle +1;
    wCircle = wCircle +1;
  }
}

```

---

<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 27, 2021, 9:11pm UTC](https://discourse.processing.org/t/mouse-frustration/33789/5 "2021-11-27T21:11:58Z")

</div>

in general roughly

- the function mouseClicked() is called when clicking and immediately releasing mouse
- the function mousePressed() is called (once!) when clicking and holding mouse. To start drag and drop for example or to get a fast reaction to mouse input.
- the function mouseReleased() is called to end drag and drop
- the variable(!!!) mousePressed is an inbuilt variable. It is true while mouse is down. That’s good when you use it in draw() to draw continuuesly.

Please check reference for these.

For a cool example : [Help with dragging images! - #2 by Chrisir](https://discourse.processing.org/t/help-with-dragging-images/33661/2)

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [November 27, 2021, 9:18pm UTC](https://discourse.processing.org/t/mouse-frustration/33789/6 "2021-11-27T21:18:13Z")

</div>

> [@Chrisir](#):
>
> the variable(!!!) _mousePressed_ is an inbuilt variable. It is `true` while mouse is down.

Pretty much checking for inbuilt variable _mousePressed_ within **draw()** is all @AudioBabble needs:

> **[mousePressed / Reference](https://processing.org/reference/mousePressed.html)**
>
> The mousePressed variable stores whether a mouse button has been pressed. The mouseButton variable (see the related reference entry) can be used to determine which button has been presse…

A very simple online example using _mousePressed_:  
[Studio.ProcessingTogether.com/sp/pad/export/ro.9Iaf6privOouM](http://Studio.ProcessingTogether.com/sp/pad/export/ro.9Iaf6privOouM)

---

<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 27, 2021, 9:18pm UTC](https://discourse.processing.org/t/mouse-frustration/33789/7 "2021-11-27T21:18:41Z")

</div>

here is an example where the circle data are stored !!!

then you can use background and redraw every circle every time

**Hint:**

- here mousePressed() is used, circle comes immediately

- try mouseClicked() instead, circle comes only when releasing the mouse (try holding mouse longer)

```auto
ArrayList<PVector> list = new ArrayList(); 

// --------------------------------------------------------------------

void setup() {
  size(700, 700);
}

void draw() {
  background(0, 0, 100);

  for (PVector pv : list) {
    ellipse(pv.x, pv.y, 
      8, 8);
  }
}

// --------------------------------------------------------------------

void mousePressed() // OR mouseClicked() --- test it   
{
  list.add(new PVector(mouseX, mouseY));
}

```

---

<div class="post-metadata">

**Author:** ![AudioBabble](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/audiobabble/32/15092_2.png) [@AudioBabble](https://discourse.processing.org/u/AudioBabble)\
**Post date:** [November 27, 2021, 10:17pm UTC](https://discourse.processing.org/t/mouse-frustration/33789/8 "2021-11-27T22:17:33Z")

</div>

Fantastic… I understand a bit more now…

So I need background(0); in setup [if I want to start out with a black screen]

And then I need it in void mouseClicked() or mousePressed() so it keeps redrawing a background.

background (0); in void draw means it will always draw the background OVER the circle.

- that much makes sense.

What I don’t quite understand is why the size of the circle only increments with EACH mouse click. I expected the mouse click would initiate the Circle() function as if it were a loop, i.e. one mouse click starts the circle drawing and increasing in size until the conditional limit is reached.

Thank you for the other code example… which will make more sense to me once I learn a bit about arrays… been following youtube tutorials… haven’t got that far yet!

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [November 27, 2021, 10:47pm UTC](https://discourse.processing.org/t/mouse-frustration/33789/9 "2021-11-27T22:47:19Z")

</div>

Hello,

> [@AudioBabble](#):
>
> background (0); in void draw means it will always draw the background OVER the circle.
> 
> - that much makes sense.

That is not correct.

If you slow things down you get a better understanding of the flow.

Try this code to understand what is happening with a slow frameRate(1):

```auto
void setup()
  {
  size (200, 200);
  frameRate(1);
  }

void draw()
  {
  background(0);
  fill(0, 255, 0);
  circle(width/2, height/2, 100);
  }

void mouseClicked()
  {
  fill(255, 0, 0);
  circle(width/2, height/2, 50);
  }

```

There are resources here:

> **[Welcome to Processing!](https://processing.org)**
>
> Processing is a flexible software sketchbook and a language for learning how to code. Since 2001, Processing has promoted software literacy within the visual arts and visual literacy within technology…

Take a look at this:

> **[Processing Overview](https://processing.org/tutorials/overview/)**
>
> A little more detailed introduction to the different features of Processing than the Getting Started tutorial.

You should also look up the references for all the elements of your code:

- setup()
- draw()
- background()
- frameRate()
- And so on…

[mousePressed](https://processing.org/reference/mousePressed.html) on the new website has an incorrect definition.  
This is the definition available in the references locally with the Processing IDE:

> The **mousePressed** variable stores whether or not a mouse button is currently being pressed. The value is true when _any_ mouse button is pressed, and false if no button is pressed. The **mouseButton** variable (see the related reference entry) can be used to determine which button has been pressed.

`:)`

---

<div class="post-metadata">

**Author:** ![AudioBabble](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/audiobabble/32/15092_2.png) [@AudioBabble](https://discourse.processing.org/u/AudioBabble)\
**Post date:** [November 27, 2021, 11:57pm UTC](https://discourse.processing.org/t/mouse-frustration/33789/10 "2021-11-27T23:57:10Z")

</div>

Thanks for the info…

Well that was fairly easy in the end, using if(mousepressed) I made a boolean variable called singleClick, when this is true, Circle(); function is drawn.

```auto
float xCircle = (256);
float yCircle = (256);
float hCircle = (0);
float wCircle = (0);
boolean singleClick = false;
void setup(){
size (512,512);
background(0);
frameRate(60); }

void draw(){
  if (mousePressed)
  singleClick = true;
//println (singleClick);
if (singleClick == true){
Circle();
}
}
    void Circle(){
    background(0);
      noFill();
stroke(128);
strokeWeight(5);
ellipse (xCircle,yCircle,hCircle,wCircle);
  if (hCircle < 128)
  {hCircle = hCircle+1;
    wCircle = wCircle +1;
}
    } `Preformatted text`

```

That’s today’s headache solved!

---

<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 28, 2021, 12:15pm UTC](https://discourse.processing.org/t/mouse-frustration/33789/11 "2021-11-28T12:15:32Z")

</div>

Yeah, well except that it never goes back to false

By the way singleClick is now very similar to the variable mouseHasBeenClicked we spoke about initially

---

<div class="post-metadata">

**Author:** ![AudioBabble](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/audiobabble/32/15092_2.png) [@AudioBabble](https://discourse.processing.org/u/AudioBabble)\
**Post date:** [November 28, 2021, 1:34pm UTC](https://discourse.processing.org/t/mouse-frustration/33789/12 "2021-11-28T13:34:52Z")

</div>

> [@Chrisir](#):
>
> Yeah, well except that it never goes back to false

that did occur to me, it was mainly just for sake of the exercise though.

In actuality your code with the array where the dots appear wherever you click would be more suited to what I have in mind, so am waiting until I understand more of that before I continue designing my pointless circle-drawing exercise!

well, maybe not that pointless, I might draw a pretty pattern someday 🙂

---

<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 28, 2021, 1:52pm UTC](https://discourse.processing.org/t/mouse-frustration/33789/13 "2021-11-28T13:52:03Z")

</div>

Mine uses ArrayList not array

It’s actually very simple really

You can just define a PVector (see reference) and add it into the ArrayList

See reference