Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

p5.js | Keyboard | key

  • Last Updated : 16 Apr, 2019

The key variable in p5.js always contains the value of the key which is recently pressed. To get the proper capitalisation, it is best to use it within keyTyped(). Use the keyCode variable For non-ASCII keys.

Syntax:

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

key

Below program illustrates the key variable in p5.js:
Example-1:




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 Any Key to change the text within circle'
      , 30, 30);
    
    // use of keyIsPressed Variable
    if (keyIsPressed) {
        // draw ellipse  
        ellipse(mouseX, mouseY, 115, 115);
        fill('red');
        text("Key Is Pressed", 100, 300);
        textSize(100);
        text(key, mouseX, mouseY);
    
    
    else {
        rect(mouseX / 2, mouseY / 2, 300, 200);
        text(key, mouseX, mouseY);
    }
  
}

Output:



Example-2:




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(100);
    
    text(key, height / 2, width / 2);
    if (keyIsPressed) {
        textSize(40);
        text("is pressed", height / 7, width - 50);
    }
  
}

Output:

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




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!