Mouse frustration!

Processing Beginners
1

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:

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:

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!

1 Like
2

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

3

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

4

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



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;
  }
}
5

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

6

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

A very simple online example using mousePressed:
Studio.ProcessingTogether.com/sp/pad/export/ro.9Iaf6privOouM

7

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)

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));
}
8

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!

9

Hello,

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):

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:

Take a look at this:

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

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

mousePressed 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.

:)

1 Like
10

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.

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!

1 Like
11

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

1 Like
12

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 :slight_smile:

1 Like
13

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

1 Like