Skip to content

Add Mouse and Keyboard Interaction

In this chapter, you will be able to create programs that work interactively with the mouse and keyboard. You will first learn about the special functions for it, and also review the related system variables.

Handling Events

It is impossible to know in advance when input from hardware such as a mouse button or keyboard will be made. Such actions that are not done by the program itself are called events. In order to implement a program that changes its behavior associated with an event, such as "perform xx processing when the mouse button is pressed," p5.js provides several special functions called event handler. These functions are hidden and managed by p5.js separately from the draw functions you define, and are automatically executed when an event occurs.

Event handlers are usually defined as functions with no arguments and no return value. Also, since event handling is done separately from the draw block, you should declare variables outside the block to exchange information, just as you do for animations. In most cases, event handlers are used with system variables.

Mouse Events

The process written in mousePressed() is executed the moment one of the mouse buttons is pressed. The following program draws a red circle at the clicked location. The system variables mouseX, mouseY are used to know the mouse position in the function.

function setup(){
    createCanvas(windowWidth, windowHeight);
    colorMode(RGB);
    noFill();
    strokeWeight(1);
    background(255);
}

function draw(){
}

function mousePressed(){
    stroke(255,0,0);
    circle(mouseX, mouseY,100);
}

You can also check if a button is pressed using the system variable mouseIsPressed. The difference is the program using it will continue running as long as the button is pressed. Let's move the cursor with the mouse button held down in the following program.

function setup(){
    createCanvas(windowWidth, windowHeight);
    colorMode(RGB);
    noFill();
    strokeWeight(1);
    background(255);
}

function draw(){
    if(mouseIsPressed){
        stroke(255,0,0);
        circle(mouseX, mouseY,100);
    }
}

Similarly, there is an event handler mouseReleased() that is executed at the moment the mouse button is released, and a handler mouseClicked() that is executed upon a click (not only pressed, but released in a short period).

mouseMoved() is an event handler that is executed while the cursor is moving without the mouse button being pressed. The following program lightens the rectangle only while the mouse cursor is moved. The grayscale brightness is placed in a variable value, which is updated in mouseMoved(), and read in draw() to determine the rectangle's color.

let value = 0; // Variables to store brightness

function draw() {
  fill(value);
  rect(25, 25, 50, 50);
}

function mouseMoved() {
  value = value + 5; // Brighten colors slightly
  if (value > 255) { // Reset when brightness is maximum
    value = 0;
  }
}

Similarly, if you want to detect cursor movement while the mouse button is pressed, define mouseDragged(). The following program can draw a picture by dragging. The system variables pmouseX, pmouseY are used to get the x,y coordinates of the previous cursor position and draw a straight line.

function setup() {
    createCanvas(windowWidth, windowHeight);
    background(255);
}

function draw() {
}

function mouseDragged(){
    stroke(200, 20, 20); // red

    line(pmouseX, pmouseY, mouseX, mouseY);
}

Keyboard Events

keyPressed() is executed when some key is pressed. The keyReleased() is executed the moment a key is released. The following program draws the character of the pressed key in a random position, size and color. The character of the key can be obtained from the key system variable. You can also use random(a, b) to create a random integer from a to b. With random(a), the interval is 0 to a.

Try pressing any key.

function setup(){
    createCanvas(windowWidth, windowHeight);
    colorMode(RGB);
    background(255);
    smooth();
}

function draw(){
}

function keyPressed(){
    fill(random(100, 255), 60, 60); // red with different brightness
    textSize(random(50, 200)); // set a random text size within 50 - 200
    text(key, 50 + random(width-100), 50 + random(height-100)); // put (string, x-coordinate, y-coordinate) as arguments
}

smooth() makes the outlines of the shapes drawn afterwards smooth, i.e. no jagged pixels!

Like the mouse events, keyPressed() is executed only once at the moment a key is pressed, but the system variable keyIsPressed can be used to check whether a key is pressed and held.

Try holding down some key.

function setup(){
    createCanvas(windowWidth, windowHeight);
    colorMode(RGB);
    background(255);
    smooth();
}

function draw(){
    if (keyIsPressed==true){
        fill(random(100, 255), 60, 60); // red with different brightness
        textSize(random(50, 200)); // set a random text size within 50 - 200
        text(key, 50 + random(width-100), 50 + random(height-100)); // put (string, x-coordinate, y-coordinate) as arguments
    }
}

Character keys can be directly compared to a string to know which key is pressed. Other special ones, such as arrows, can be distinguished by using keyCode. Commonly used keys are BACKSPACE, DELETE, ENTER, RETURN, TAB, ESCAPE, SHIFT, CONTROL, OPTION, ALT, UP_ARROW, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW. Other keys can be found at https://keycode.info/.

The following example uses the arrow keys to move a circle.

// First, declare variables that will change during the animation
let location_x = 100;
let location_y = 100;

function setup() {
    createCanvas(windowWidth, windowHeight);
    noStroke();
}

function draw() {
    background(255);

    if(keyIsPressed){
        if(keyCode == UP_ARROW){
            location_y -= 10;
        }
        else if(keyCode == DOWN_ARROW){
            location_y += 10;
        }
        else if(keyCode == LEFT_ARROW){
            location_x -= 10;
        }
        else if(keyCode == RIGHT_ARROW){
            location_x += 10;
        }
    }

    fill(60, 200, 240);
    circle(location_x, location_y, 40);
}

Exercise

In Exercise 3 of Chapter 2 you created an animation of a moving ball. Modify that animation so you can control the ball with the mouse or keyboard. Please choose one of the following 1-4 operation methods and submit your implementation. (It is not required to do all of them.)

  1. toggle move/stop by mouse click

    • Declare a variable that represents move/stop and create a conditional branch.
    • Rewrite the variable on the mouse click.

  2. Move only while the mouse button is held down.

    • Get the state of the mouse button from a system variable and make a conditional branch.

  3. Change the direction according to the key pressed.

    • Declare a variable that represents the direction and create conditional branching.
    • Rewrite the variable when the keys are pressed.

  4. make the ball follow the mouse cursor slowly

    • Get the cursor position from system variables.
    • Compare the current ball position with the cursor and change the direction of travel.