* @name Keyboard

 * @arialabel Each letter on the keyboard draws a different color rectangle on the grey screen when pressed

 * @description Click on the image to give it focus and

 * press the letter keys to create forms in time and space.

 * Each key has a unique identifying number. These numbers

 * can be used to position shapes in space.

 */

​

let bad = "Press the right arrow key: 🤡";

let good = "Press the left arrow key: ❤️";

let medium = "Press the up arrow key: 🫣";

let hBox = 150;

​

function preload() {

  myFont = loadFont("assets/Halyard Display.ttf");

  myemoji = loadFont("assets/Halyard Display.ttf");

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  //textFont(myFont);

  noStroke();

}

​

function draw() {

  // keep draw() here to continue looping while waiting for keys

  textSize(40);

  textFont(myFont);

  background(255);

  text(

    "Which emoji best describes your relationship with technology?",

    30,

    80,

    width - 30

  );

​

  textSize(20);

  textFont("sans-serif");

​

  text(good, 30, 180, width - 30, hBox);

​

  text(medium, 30, 180 + hBox, width - 30, hBox);

​

  text(bad, 30, 180 + hBox * 2, width - 30, hBox);

}

​

function keyPressed() {

  if (keyCode === LEFT_ARROW) {

    //fill(random(avenuesColor));

    good = good + " ❤️";

  } else if (keyCode === RIGHT_ARROW) {

    bad = bad + " 🤡";

  } else if (keyCode === UP_ARROW) {

    medium = medium + " 🫣";

  }

}

​