User Input

p5.js includes an event-driven system for responding to mouse and keyboard input, along with a number of global variables for querying the state of the mouse and keyboard.

Table of Contents

  1. Mouse Position
  2. Mouse Events
  3. Mapping Mouse Input
  4. Constraining Mouse Input
  5. Map and Constrain Example
  6. Keyboard Variables
  7. Keyboard Events

Mouse Position

The current x/y location of the mouse can be retrieved using the special 📜 mouseX and 📜 mouseY variables:

circle(mouseX, mouseY, 50, 50);

The state of the mouse button is available via 📜 mouseIsPressed and 📜 mouseButton:

 if (mouseIsPressed) {
    if (mouseButton === LEFT) { // RIGHT and CENTER are available too.
      ellipse(50, 50, 50, 50);
    }
 }

There are also:

Mouse Events

There are a number of function you can define that will be called for particular mouse events:

  • 📜 mouseMoved() - Called anytime the mouse moves.
  • 📜 mouseDragged() - Called anytime the mouse moves while a button is pressed.
  • 📜 mousePressed() - Called when any mouse button is pressed.
  • 📜 mouseReleased() - Called when any mouse button is released.
  • 📜 mouseClicked() - Called after a mouse button has been pressed and then released.

Resources

Mapping Mouse Input

When using positional mouse values, we often wish to map the screen positions to a range of values that are more useful for our sketch. For example, imagine a sketch where the mouse position controls the background color, with the red component of the color controlled by mouseX and the blue component of the color controlled by mouseY.

A naive approach would be:

function draw() {
  background(mouseX, 0, mouseY);
}

Because the color components need to be in the range of 0 to 255, this would only work for a sketch with a 255x255 canvas size. This is where the 📜 map() function comes into play. With map() we can re-map a number from one range of values to another:

let redValue = map(mouseX, 0, width, 0, 255);

The first argument is the value being remap, the next two arguments are the initial range (in our case mouseX goes from 0 to the width of the canvas), and the final two arguments are the range we want to map to (in our case 0 to 255).

Resources

Constraining Mouse Input

In some environments (like the p5 Web Editor) mouseX and mouseY can return values larger than the screen dimensions, so we can use the 📜 constrain function to set minimum and maximum limits:

let xPos = constrain(mouseX, 0, width); // Constrain xPos to 0 to 200.
let redValue = map(xPos, 0, width, 0, 255); // Map xPos to 0 to 255 range.

Resources

Map and Constrain Example

The map() and constrain() functions are useful beyond just mouse position, but here’s a full demo of using them with the mouse:

function setup() {
  createCanvas(200, 300);
  textSize(32);
  fill(255);
}

function draw() {
  let xPos = constrain(mouseX, 0, width); // Constrain xPos to 0 to 200.
  let redValue = map(xPos, 0, width, 0, 255); // Map xPos to 0 to 255 range.
  
  let yPos = constrain(mouseY, 0, height); // Constrain yPos to 0 to 300.
  let blueValue = map(yPos, 0, height, 0, 255); // Map xPos to 0 to 255 range.
  
  background(redValue, 0, blueValue);
  text(`red: ${redValue}\nblue: ${blueValue}`, 10, 40);
}

Edit Using p5.js Web Editor

The Result:

Keyboard Variables

There are three variables related to the state of keys pressed on the keyboard:

  • 📜 keyIsPressed - Boolean to test if any key is pressed.
  • 📜 key - Which key is pressed case insensitive. (Only for printable keyboard characters.)
  • 📜 keyCode - Integer code for the key being pressed.

To determine which key related to a specific keyCode see: 📚 keycode.info

There are also constants for special keys: BACKSPACE, DELETE, ENTER, RETURN, TAB, ESCAPE, SHIFT, CONTROL, OPTION, ALT, UP_ARROW, DOWN_ARROW, LEFT_ARROW, and RIGHT_ARROW

Keyboard Events

Like with the mouse, there are special functions you can define to respond to keyboard events:

  • 📜 keyPressed() - Called when any key is pressed.
  • 📜 keyReleased() - Called when any key is released.
  • 📜 keyTyped() - Like keyPressed() but only for printable characters.
  • 📜 keyIsDown() - Tests if a particular key is pressed.

Resources