let bgColor;

​

let ellipseColor;

let def;

function setup() {

  createCanvas(400, 400);

  noStroke();

​

}

​

function draw() {

  let now = new Date();

  let hours = now.getHours();

  let minutes = now.getMinutes();

  let seconds = now.getSeconds();

  //change mood based on time if the user didn't select any

  if(mood == ""){

  if (hours < 6) {

    def = "Dreamy";

  } else if (hours < 12) {

    def = "Energetic";

  } else if (hours < 18) {

    def = "Calm";

  } else {

    def = "Reflective";

  }

    mood=def;

  }

​

  //Change background color based on the selected mood

  switch (mood) {

    case "Dreamy":

      bgColor = background(120, 113, 255);

      break;

    case "Energetic":

      bgColor = background(255, 213, 0);

      break;

    case "Calm":

      bgColor = background(0, 255, 183);

      break;

    case "Reflective":

      bgColor = background(255, 105, 180);

      break;

    default:

      bgColor = background(0); 

  }

​

  textAlign(CENTER);

​

  // Display the mood

  fill(255);

  textSize(32);

  text("Mood: " + mood, width / 2, height / 2 - 20);

​

  // Display the time

  textSize(24);

  text("Time: " + nf(hours, 2) + ":" + nf(minutes, 2) + ":" + nf(seconds, 2), width / 2, height / 2 + 20);

​

  // Instructions 

  textSize(16);

  text("Press numbers 1-4 to change mood", width / 2, height - 50);

  text("Press 0 to change mood based on time", width / 2, height - 30);

​

  // A circle that changes with seconds

  ellipseColor = map(seconds, 0, 59, 0, 255);

  fill(ellipseColor, 200, 255, 127);

  ellipse(width/2, height/2, seconds*9.5, seconds*9.5);

}

​

function keyPressed() {

  // Change the mood based on key pressed

  if (key === '1') {

    mood = "Dreamy";

  } else if (key === '2') {

    mood = "Energetic";

  } else if (key === '3') {

    mood = "Calm";

  } else if (key === '4') {

    mood = "Reflective";

  }

  else if(key === '0'){

    mood = def;

  }

}

​