p5play : Input

Input Devices

Here are the input devices available in p5play:

kb / keyboard for the keyboard
mouse for the mouse
contros / controllers for game controllers
touches for touch screen inputs

These input devices all use the same simple functions for getting the state of an input: presses, pressing, and released.

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.

Keyboard

kb tracks nearly every key on the keyboard, including 'enter', 'backspace', and 'control'.

Note that letter input is not case sensitive. To check if a user is pressing shift use: kb.pressing('shift').

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

Using a non-QWERTY keyboard?

Mouse

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.x and 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'.

mouse.visible

let cur;
function setup() {
  new Canvas(500, 100);
  
  cur = new Sprite();
  cur.d = 20;
  cur.text = '🐭';
  cur.textSize = 30;
  mouse.visible = false;
}
function update() {
  clear();
  cur.moveTowards(mouse, 1);
}
 
 
הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Sprite Mouse

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.

hovers and 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.

Note that 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.

Game Controllers

The contros array (aka controllers) contains an object for each game controller detected by your web browser. Each controller object stores the input states of these buttons:

a, b, x, y, l (left bumper), r (right bumper), lt (left trigger), rt (right trigger), up, down, left, right (D-pad), lsb (left stick button), rsb (right stick button), start, and select

leftStick and 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 in leftTrigger and rightTrigger.

Just like with a standard JavaScript array, you can access connected controllers by index. For example, contros[0] and contros[1] are the first and second controllers. Remember to check if a controller exists in the array before checking its input.

For convenience, contro can be used to attempt to check the input states of contros[0] and won't throw errors if a controller isn't connected yet.

Try it! Connect a game controller and press any button on it for it to be detected by p5play.

➡️ full controller test demo

Touch

Every touch screen interaction generates a touch object that's added to the touches array.

Each touch has its own functions for detecting pressing and dragging input states.

touch.x and 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 array. touches[0] is mapped to the mouse.

In the touches demo, tap the screen to create boxes and drag to throw them around!