Here are the input devices available in p5play:
keyboardfor the keyboard
mousefor the mouse
controllersfor game controllers
touchesfor touch screen inputs
These input devices all use the same simple functions for getting the state of an input:
Input devices also store the state of all their inputs as properties. For example,
kb.space stores how many frames the user has been pressing the space key. It gets reset
when the user releases the input.
p5play makes it easy to trigger the same action via different input devices using boolean logic.
In the mini-example, the sprite turns green if you press the space key or click the mouse.
kb tracks nearly every key on the keyboard, including 'enter', 'backspace', and
Note that letter input is not case sensitive. To check if a user is pressing shift use:
Since the WASD keys are commonly used to control the player character's movement, you can use the direction names 'up', 'down', 'left', and 'right' to detect WASD and arrow key presses.
Arrow keys can also be detected separately using 'arrowUp', 'arrowDown', 'arrowLeft', and 'arrowRight'.
In local two player games it's common for the second player to use the IJKL keys for movement. These keys can be referenced using 'up2', 'down2', 'left2', and 'right2'.
The default mouse input is the 'left' button, a one finger click on trackpads. You can also use 'right' (two finger click) and 'center'.
mouse.y store the position of the mouse in the world, based on
the camera's position.
mouse.canvasPos stores the absolute position of the mouse on the canvas.
mouse.visible is a boolean that determines whether the mouse is visible or not.
mouse.cursor can be set to a cursor style.
The default is 'default', other options include 'grab', 'move', 'pointer', and 'wait'.
Sprites with physics colliders have their own mouse object for detecting mouse inputs on the sprite.
sprite.mouse objects are just like the
mouse input object, except they
have additional functions.
hovering detect when the user moves the mouse over a sprite.
dragging detects when the user clicks and holds a mouse button on the sprite while
moving the mouse.
mouse.x is the x position of the mouse on the canvas and
sprite.mouse.x is the x position of the mouse relative to the sprite.
contro object provides the input state of game controller buttons:
l (left bumper),
r (right bumper),
lt (left trigger),
rt (right trigger),
(left stick button),
rsb (right stick button),
contro.rightStick represent the positions of the
analog sticks as objects with x and y properties. These values range from -1 to 1, with 0 indicating
the center position.
Some controllers have analog triggers, and their positions are stored as numbers ranging from 0 to 1
contro object (aka
controllers) is an array that contains all the
connected game controllers detected by your web browser. Access connected controllers by index. For
contro are the first and second controllers.
Through JS magic,
contro can be used to get the input states of
Try it out! Connect a game controller and press any button on it for it to be detected by p5play.
➡️ full demo
Every touch screen interaction generates a touch object that's added to the
Each touch has its own functions for detecting pressing and dragging input states.
touch.y store the position of the touch in the world, based on
the camera's position.
touch.canvasPos stores the absolute position of the touch on the canvas.
touch.id is a unique number that identifies the touch.
touch.duration stores how many frames the touch has been active.
The frame after a touch ends, its touch object is removed from the
touches is mapped to the
In the touches demo, tap the screen to create boxes and drag to throw them around!