The keyIsDown() function in p5.js checks the key’s current status that key is down, i.e. pressed. It can be used if you have a movable object, and you want several keys to be able to affect its behavior simultaneously, such as moving a sprite diagonally.
Syntax:
keyIsDown()
Below program illustrates the keyIsDown() function in p5.js:
Example-1:
let x = 100; let y = 100; function setup() { // create canvas of size 600*600 createCanvas(600, 600); } function draw() { // fill color fill(x, y, x - y); if (keyIsDown(LEFT_ARROW)) { x -= 5; } if (keyIsDown(RIGHT_ARROW)) { x += 5; } if (keyIsDown(UP_ARROW)) { y -= 5; } if (keyIsDown(DOWN_ARROW)) { y += 5; } clear(); ellipse(x, y, 50, 50); } |
Output:
Example-2:
let diameter = 30; function setup() { // Create canvas of size 600*600 createCanvas(600, 600); } function draw() { // 107 and 187 are keyCodes for "+" if (keyIsDown(107) || keyIsDown(187)) { diameter += 1; } // 109 and 189 are keyCodes for "-" if (keyIsDown(109) || keyIsDown(189)) { diameter -= 1; } clear(); fill(255, 0, 0); ellipse(width / 2, height / 2, diameter, diameter); } |
Output:
Reference: https://p5js.org/reference/#/p5/keyIsDown
