p5: Keyboard Input

When using keyboard inputs you first need to know what you want to detect:
Do something when a key is pressed
Do something when a key is released
Do something as long as a key is pressed

And how to detect which key has been pressed:
if it’s an alphanumeric key use the variable “key”
if it’s a special key use keyCode variable and check the ASCII value here (note: the same key might be different on different keyboards)

If you are using a comparison like
if(key == "b")
make sure the letter is lower case.

/*
p5 keyCode constants 
BACKSPACE, DELETE, ENTER, RETURN, TAB, ESCAPE, 
SHIFT, CONTROL, OPTION, ALT, 
UP_ARROW, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW. 

To find a specific code check this
http://keycode.info/
*/


var fillCol;

function setup() {
  createCanvas(600, 600);
  noStroke();
  rectMode(CENTER);
  textSize(30);
  textAlign(CENTER);

  fillCol = color(0, 255, 255);
}

function draw() {

  if (key == "b" && keyIsPressed) {
    background(0);
  } else {
    background(255);
  }

  fill(fillCol);
  rect(300, 300, 300, 300);
  fill(255);
  text("last key: " + key, 300, 300);
  text("last code: " + keyCode, 300, 300 + 30);
}

function keyPressed() {
  if (keyCode == UP_ARROW) {
    fillCol = color(255, 0, 255);
  } else if (keyCode == 40)  {
//another way to detect Down
    fillCol = color(0, 255, 255);
  }
  return false; // prevent default
}