Open In App

p5.js Keyboard keyIsDown()

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


Article Tags :