Open In App

p5.js Keyboard keyIsPressed

Improve
Improve
Like Article
Like
Save
Share
Report

The keyIsPressed variable in p5.js is true if any key is pressed and false if no keys are pressed

Syntax:

keyIsPressed

The below program illustrates the key is pressed variable in p5.js.

Example-1: 

javascript




let valueX;
let valueY;
  
function setup() {
    // Create Canvas of size 500*500
    createCanvas(1000, 500);
}
  
function draw() {
    
    // set background color
    background(200);
    fill('green');
    
    // set text and text size
    textSize(25);
    
    text('Press Key to change the figure '+
         'from Circle To Keyboard', 30, 30);
    
    // use of keyIsPressed Variable
    if (keyIsPressed) {
        // draw ellipse  
        ellipse(mouseX, mouseY, 115, 115);
        fill('red');
        text("Key Is Pressed", 100, 300);
    } else {
        rect(mouseX / 2, mouseY / 2, 300, 200);
    }
  
};


Output: 

Before: 

After: 

 Example-2: 

javascript




let valueX;
let valueY;
  
function setup() {
    
    // Create Canvas of size 500*500
    createCanvas(500, 500);
}
  
function draw() {
    
    // set background color
    background(200);
    
    fill('green');
    
    // set text and text size
    textSize(25);
    text('Click to flip the figure', 30, 30);
    
    // use of KeyIsPressed
    if (keyIsPressed) {
        fill(valueX, 255 - valueY, 255 - valueX);
        
        // draw rectangle 
        rect(mouseX, mouseY, 115, 115);
        fill(valueY, 255 - valueX, 255 - valueX);
  
        rect(mouseX, mouseY + 115, 115, 115);
        fill(255 - valueY, 255 - valueX, 255 - valueY);
    } else {
        rect(mouseX - 115, mouseY, 115, 115);
        fill(255 - valueY, 255 - valueY, 255 - valueY);
  
        rect(mouseX - 115, mouseY + 115, 115, 115);
    }
};


Output: Before: 

 After: 

Reference: https://p5js.org/reference/#/p5/keyIsPressed



Last Updated : 18 Aug, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads