let guessOnes = 0;

let guessTens = 0;

let guessHundreds = 0;

let guessThousands = 0;

​

function setup() {

  createCanvas(400, 400);

  textAlign(CENTER);

  rectMode(CENTER);

  textSize(60);

}

​

function draw() {

  background(7, 59, 76, 5);

​

  noStroke();

  fill(255);

  textSize(12);

  text(`Click here and,`, width/2,height - 30);

  text(

    "Use your keyboard to change the numbers in the code (1 to 4)",

    width / 2,

    height - 15

  );

​

  guess = `${guessThousands}${guessHundreds}${guessTens}${guessOnes}`;

​

  // animated rectangles

  noFill();

  strokeWeight(3.5);

  stroke(17, 138, 178, random(255));

  rect(80, 200, guess[0] * 8);

  stroke(6, 214, 160, guess[1] * 40);

  rect(160, 200, guess[1] * 8);

  stroke(255, 209, 102, random(255));

  rect(240, 200, guess[2] * 8);

  stroke(239, 71, 111, random(255));

  rect(320, 200, guess[3] * 8);

​

  // current guess display

  fill(0);

  stroke(100);

  strokeWeight(2);

  rect(200, 330, 200, 60);

  stroke(255);

  fill(255);

  textSize(60);

  text(guess, 200, 350);

​

  // what to do when the code is found

  if (guess === code) {

    textSize(40);

    textWrap(WORD);

    let t = round(millis() / 6000, 2);

    text(`Found the code: ${guess} in ${t} seconds`, 200, 10, 190);

    noLoop();

  }

}

​

function keyPressed() {

  switch (key) {

    case "1":

      if (guessThousands < 9) {

        guessThousands++;

      } else {

        guessThousands = 0;

      }

      break;

    case "2":

      if (guessHundreds < 9) {

        guessHundreds++;

      } else {

        guessHundreds = 0;

      }

      break;

    case "3":

      if (guessTens < 9) {

        guessTens++;

      } else {

        guessTens = 0;

      }

      break;

    case "4":

      if (guessOnes < 9) {

        guessOnes++;

      } else {

        guessOnes = 0;

      }

      break;

  }

}

​