Mouse Input

Processing comes with a few facilities for interaction out of the box. Let's look at two in particular: The mouse and the keyboard. While these methods here are specific to Processing, most other environments (Unity, your Browser, …) will have very similar things.

Position

Your mouse is one kind of pointing device, and on your screen, it has 2-dimensional coordinates. Processing has special variables that it keeps updated for you to use: mouseX and mouseY. They use the same origin as the window you are painting in, so you can just use these coordinates and draw stuff under your cursor like this:

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

void draw() {
    circle(mouseX, mouseY, 5);
}

Processing also keeps track of "previous frame's" position - where your mouse was just a fraction of a second ago in pmouseX and pmouseY, those can be interesting in some cases. One example is, when you're trying to find out how fast your mouse pointer is going:

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

void draw() {
    float distance = dist(mouseX, mouseY, pmouseX, pmouseY); // (1)
    circle(mouseX, mouseY, distance);
}

1. dist() is a function that calculates the distance between two points.

Buttons - As a Variable

Another variable that processing keeps updated for you is mousePressed which will be true ✅ whenever a button is pressed. It does not distinguish which button is pressed, though. For that, you can combine it with mouseButton, which will contain information about the button in question.

Buttons - As a Function

Instead of checking variables on every single frame in your draw() function, you can also have these three functions. They will get run by processing exactly when a mouse button is pressed (mousePressed()), released (mouseReleased()) or clicked (mouseClicked()).

Pressed, Released, Clicked

You probably think of a mouseclick an instantaneous thing. But it consists of the pressing down part and the releasing part. Sometimes you will need to handle them separately, for example when you are doing a drag and drop operation. But most times you will just need to handle the whole thing - a click.

How do the two following code examples differ?

Here are two different examples, please run both and see how they differ

Hint

Try pressing your mouse button for a few seconds

mousePressed variablemousePressed() function

int counter = 0;

void setup() {
    size(300, 300);
    fill(255, 255, 255);
    textSize(30);
}

void draw() {
    if (mousePressed) {
        counter = counter + 1;
    }

    background(0, 0, 0);
    text(counter, 20, 50);
}

We're using an if statement here, don't worry, we'll explain this in the next article!

int counter = 0;

void setup() {
    size(300, 300);
    fill(255, 255, 255);
    textSize(30);
}

void mousePressed() {
    counter = counter + 1;
}

void draw() {
    background(0, 0, 0);
    text(counter, 20, 50);
}

Neither of these are "wrong", they are even exactly the same amount of code. They just behave slightly differently and sometimes you need one and sometimes you might prefer the other.

Optional: Mouse Wheel

Optional Content

This one uses programming syntax that we didn't cover, yet. I still think it is interesting to include here. If you don't intend to use the mouse wheel, it is OK to skip this one.

The mouse wheel is also available, it is slightly more complicated, though: You have a similar function form like the mousePressed() above, but in that block of code you then get the direction from a thing called an "event object". Here's a working piece of code that you should copy and paste to your own Processing IDE. Also please take a look at the reference for mouseWheel().

int size = 10;

void setup() {
    size(600, 400);
}

void draw() {
    circle(mouseX, mouseY, size);
}

void mouseWheel(MouseEvent event) {
    size += event.getCount();
}

Relevant excerpt from Learning Processing

(the section starts at 1:13:27 and runs through 1:29:30, the video should start and stop on these automatically.)