let mailNo = 0; //Notification

let alphaEmail = 0;

let alphaChat1 = 0;

let alphaChat2 = 0;

let alphaList = 0;

let alphaTD = 0;

let d1 = 0;

let d2 = 0;

let d3 = 0;

let d4 = 0;

let noti = "!";

let x1 = 225;

let x2 = 375;

let y = 300;

let alphaN = 0;

​

function setup() {

  createCanvas(600, 600);

  rectMode(CENTER);

  ellipseMode(CENTER);

  noStroke();

}

​

function draw() {

  background(249, 248, 245); //Off White

  /*----------------------------------------------------------------------*/

  /* Face */

  //Eyes

  fill(0); //Black

  rect(225,300,50,100); //Left Eye

  fill(249, 248, 245); //Off White

  rect(x1,y,20,50); //Left Pupil

  fill(0); //Black

  rect(225,250,65,7); //Left Eyelid

  fill(0); //Black

  rect(375,300,50,100); //Left Eye

  fill(249, 248, 245); //Off White

  rect(x2,y,20,50); //Left Pupil

  fill(0); //Black

  rect(375,250,65,7); //Left Eyelid

  //Move pupils

  if (millis()>3000 && millis()<=6000 && x1>220) { 

    x1--;

    x2--;

    y--;

  } else if (millis()>6000 && millis()<8000 && x1<240) {

    x1++;

    x2++;

  } else if (millis()>8000 && millis()<10000 && x1>220) {

    x1--;

    x2--;

  } else if (millis()>10000 && millis()<12000 && y<330) {

    y++;

  } else if (millis()>12000 && x1<240) {

    x1++;

    x2++;

  }

  //Mouth

  rect(300,375,50,5); 

  /*----------------------------------------------------------------------*/

  /* Thought */

  if (millis()<3000) {

    myThought = "It's showtime, folks!";

    fill(0);

    textAlign(CENTER);

    textSize(16);

    textFont('Courier');

    text(myThought,300,190);

  } else if (millis()>3000 && millis()<=6000) {

    myThought = "So many emails!!!";

    fill(0);

    textAlign(CENTER);

    textSize(16);

    textFont('Courier');

    text(myThought,300,190);

  } else if (millis()>6000 && millis()<8000) {

    myThought = "Oh, new message from PM!";

    fill(0);

    textAlign(CENTER);

    textSize(16);

    textFont('Courier');

    text(myThought,300,190);

  } else if (millis()>8000 && millis()<10000) {

    myThought = "OMG Freaking Emails!!!";

    fill(0);

    textAlign(CENTER);

    textSize(16);

    textFont('Courier');

    text(myThought,300,190);

  } else if (millis()>10000 && millis()<12000) {

    myThought = "Urgent Meeting Now!?";

    fill(0);

    textAlign(CENTER);

    textSize(16);

    textFont('Courier');

    text(myThought,300,190);

  } else if (millis()>12000) {

    myThought = "Last-minute project? Urghh";

    fill(0);

    textAlign(CENTER);

    textSize(16);

    textFont('Courier');

    text(myThought,300,190);

  }

  rect(300,200,250,1); //Text Line

  /*----------------------------------------------------------------------*/

  /* Email */

  push(); //Start Stroke

  stroke(0,alphaEmail);

  strokeWeight(1);

  fill(249, 248, 245); //Off White

  rect(125,100,150,100);

  pop(); //Stop Stroke

  fill(0,alphaEmail);

  triangle(50,50,200,50,125,100);

  if (millis() > 800 && alphaEmail<255) {

    alphaEmail = alphaEmail + 10;

  }

  /* Email Notification */

  //Circle

  push(); //Start Stroke

  stroke(249, 248, 245); //Off White

  strokeWeight(5);

  fill(0);

  ellipse(200,50,d1);

  pop(); //Stop Stroke

  fill(249, 248, 245); //Off White

  if (millis() > 1000 && d1 < 55) { //Make notification appear

    d1 = d1 + 10;

  }

  //Email Number

  if (millis() > 1200) { //Make the number of new emails increase

    mailNo++;

    fill(249, 248, 245); //Off White

    textAlign(CENTER);

    textSize(16);

    textFont('Courier');

    text(mailNo,200,55);

  }

​

  /*----------------------------------------------------------------------*/

  /* Chat Bubble 1 */

  //Chat Bubble

  fill(0,alphaChat1);

  beginShape(); 

  vertex(450,100);

  vertex(550,100);

  vertex(550,195);

  vertex(530,180);

  vertex(450,180);

  endShape(CLOSE);

  //Chat

  fill(249, 248, 245); //Off White

  rect(500,125,45,5); //Line of chat

  rect(500,140,45,5); //Line of chat

  rect(500,155,45,5); //Line of chat

  if (millis() > 6000) { //Chat bubble appears

    alphaChat1 = alphaChat1 + 10;

  }

  /* Chat Notification */

  push(); //Start Stroke

  stroke(249, 248, 245); //Off White

  strokeWeight(5);

  fill(0);

  ellipse(550,100,d2);

  pop(); //Stop Stroke

  fill(249, 248, 245); //Off White

  rect(550,95,5,20); //! - |

  rect(550,110,5,5); //! - .

  if (millis() > 6000 && d2 < 50) { //Make notification appear

    d2 = d2 + 10;

  }

​

  /*----------------------------------------------------------------------*/  

  /* Chat Bubble 2 */

  //Chat Bubble

  fill(0,alphaChat2);

  beginShape(); 

  vertex(50,350);

  vertex(150,350);

  vertex(150,440);

  vertex(130,425);

  vertex(50,425);

  endShape(CLOSE);

  fill(249, 248, 245); //Off White

  fill(249, 248, 245); //Off White

  //Chat

  textAlign(CENTER);

  textSize(12);

  textFont('Courier');

  textStyle(BOLD);

  text('URGENT!!!',100,390);

  if (millis() > 10000) { //Chat bubble appears

    alphaChat2 = alphaChat2 + 10;

  }

  /* Chat Notification */

  push(); //Start Stroke

  stroke(249, 248, 245); //Off White

  strokeWeight(5);

  fill(0);

  ellipse(50,350,d3);

  pop(); //Stop Stroke

  fill(249, 248, 245); //Off White

  rect(50,345,5,20); //! - |

  rect(50,360,5,5); //! - .

  if (millis() > 10000 && d3 < 50) { //Make notification appear

    d3 = d3 + 10;

  }

  /*----------------------------------------------------------------------*/

  /* To-do List */

  push(); //Start Stroke

  stroke(0,alphaList);

  strokeWeight(1);

  fill(249, 248, 245); //Off White

  rect(500,425,100,150);

  pop(); //Stop Stroke

  fill(0,alphaList);

  //To-Do Text

  if (millis() > 12000) {

    fill(0,alphaList);

    textAlign(CENTER);

    textSize(12);

    textFont('Courier');

    textStyle(BOLD);

    text('TO-DO',500,380);

    //Text Lines

    rect(500,395,50,5);

    rect(500,405,50,5);

    rect(500,415,50,5);

    rect(500,425,50,5);

    rect(500,435,50,5);

    rect(500,445,50,5);

    rect(500,455,50,5);

    rect(500,465,50,5);

    rect(500,475,50,5);

    rect(500,485,50,5);

  }

  /* To-do Notification */

  push(); //Start Stroke

  stroke(249, 248, 245); //Off White

  strokeWeight(5);

  fill(0,alphaList);

  ellipse(550,350,d4);

  pop(); //Stop Stroke

  fill(249, 248, 245); //Off White

  rect(550,345,5,20); //! - |

  rect(550,360,5,5); //! - .

  if (millis() > 12000 && alphaList<255) {

    alphaList = alphaList + 10;

  }

  if (millis() > 12000 && d4<50) {

    d4 = d4 + 10;

  }

  /* Night */

  fill(0,alphaN)

  rect(300,300,600,600);

  if (millis()>16000) { 

    alphaN = alphaN+10;

  }

}