Skip to content
Related Articles

Related Articles

p5.js | keyPressed() Function

Improve Article
Save Article
Like Article
  • Last Updated : 14 Jan, 2022

The keyPressed() function is invoked whenever a key is pressed. The most recently typed ASCII key is stored into the ‘key’ variable, however it does not distinguish between uppercase and lowercase characters. The non-ASCII character codes can be accessed in the ‘keyCode’ variable with their respective names.
Holding down a key may cause multiple keyPressed() calls. This is due to how the Operating System handles keypressed and depends on how the computer is configured. A browser may have its own default behavior attached to various keys. This can be prevented by adding “return false” to the end of the method.
Syntax: 
 

keyPressed()

Parameters: This method does not accept any parameters.
Below examples illustrate the keyPressed() function in p5.js:
Example 1: 
 

javascript




function setup() {
  createCanvas(600, 200);
  textSize(20);
  text("Press any key to display it "
          + "on the screen", 10, 20);
}
 
function keyPressed() {
  clear();
  textSize(20);
  text("Press any key to display it "
          + "on the screen", 10, 20);
  textSize(100);
  text(key, 100, 150);
}

Output: 
 

display-pressed

Example 2: 
 

javascript




let opac = 128;
 
function setup() {
  createCanvas(700, 200);
  background(0, 128, 0, opac);
  textSize(22);
  text("Press the left and right arrow"
        + " keys to change the opacity"
        + " of the color.", 10, 20);
}
 
function keyPressed() {
  clear();
 
  textSize(50);
  text("Pressing: " + key, 100, 150);
 
  // Reduce opacity if the left arrow is pressed
  if (key == "ArrowLeft" && opac > 0)
    opac -= 20;
  // Increase opacity if the left arrow is pressed
  else if (key == "ArrowRight" && opac < 255)
    opac += 20;
 
  // Set the new background color
  background(0, 128, 0, opac);
 
  textSize(22);
  text("Press the left and right arrow"
        + " keys to change the opacity"
        + " of the color.", 10, 20);
}

Output: 
 

change-opacity

Online editor: https://editor.p5js.org/
Environment Setup: https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/
Reference: https://p5js.org/reference/#/p5/keyPressed
 


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!