p5.js Web Editor | Dashing vacation

xxxxxxxxxx
//It is a light drop on the floor through a window. 
function setup() {
  createCanvas(600, 600);
}
​
function draw() {
  let h = hour();
  let m = minute();
  let s = second();
  noStroke();
  background(40);
​
​
  //sun shadow 7am-9am
  fill(255, 63, 27);
  rect(70, 170, 5, 50);
  rect(70, 170, 50, 5);
  rect(70, 380, 5, 50);
  rect(70, 430, 50, 5);
​
  //sun shadow 10am-12pm
  fill(255, 217, 49);
  rect(130, 100, 5, 50);
  rect(130, 100, 50, 5);
  rect(130, 450, 5, 50);
  rect(130, 500, 50, 5);
​
​
  //sun shadow 13pm-15pm
  fill(86, 154, 247);
  rect(180, 200, 5, 50);
  rect(180, 200, 50, 5);
  rect(180, 350, 5, 50);
  rect(180, 400, 50, 5);
​
  //sun shadow 16pm-18pm
  fill(52, 196, 91);
  rect(250, 150, 5, 50);
  rect(250, 150, 50, 5);
  rect(250, 405, 5, 50);
  rect(250, 455, 50, 5);
  
  
  //light shift from day to night 
  //sunlight drop 6am-18pm
  let suncolor = color(255, 202, 92);
  suncolor.setAlpha(150);
  let nightcolor = color(146, 39, 205);
  nightcolor.setAlpha(150);
  if (h >= 6 && h < 18) {
    fill(suncolor);
  push();
  textSize(10);
  fill(255, 202, 92);
  text("06am", 275, 148);
  text("09am", 95, 168);
  text("12pm", 155, 98);
  text("15pm", 200, 198);
  fill(146, 252, 255);
  text("18pm", 275, 164);
  pop();
  } else {
    fill(nightcolor);
      push();
  textSize(10);
  fill(255, 202, 92);
  text("06am", 275, 148);
  fill(146, 252, 255);
  text("00am", 155, 114);
  text("03am", 95, 184);
  text("18pm", 275, 164);
  text("21pm", 200, 214);
  pop();
  }
​
  //18pm
  //rect(255, 155, 345, 300);
  //15pm
  //rect(185, 205, 415, 195);
  //12pm
  //rect(135, 105, 465, 395);
  //9am
  //rect(75, 175, 525, 255);
​
  if (h == 6 && m == 0) {
    // 6am-9am=18pm-9am location
    rect(255, 155, 345, 300);
  } else if (h == 6 && m != 0) {
    rect(255 - m, 155 + m / 9, 600 - (255 - m), 300 - m / 4);
  } else if (h == 7 && m == 0) {
    rect(195, 155 + 20 / 3, 405, 285);
  } else if (h == 7 && m != 0) {
    rect(195 - m, 155 + 20 / 3 + m / 9, 600 - (195 - m), 285 - m / 4);
  } else if (h == 8 && m == 0) {
    rect(135, 155 + 40 / 3, 465, 270);
  } else if (h == 8 && m != 0) {
    rect(135 - m, 155 + 40 / 3 + m / 9, 600 - (135 - m), 270 - m / 4);
  } else if (h == 9 && m == 0) {
    rect(75, 175, 525, 255);
  } else if (h == 9 && m != 0) { //9am-12pm
    rect(75 + m / 3, 175 - 7 * m / 18, 600 - (75 + m / 3), 255 + 7 * m / 9);
  } else if (h == 10 && m == 0) {
    rect(95, 175 - 70 / 3, 505, 255 + 140 / 3);
  } else if (h == 10 && m != 0) {
    rect(95 + m / 3, 175 - 70 / 3 - 7 * m / 18, 600 - (95 + m / 3), 255 + 140 / 3 + 7 * m / 9);
  } else if (h == 11 && m == 0) {
    rect(115, 175 - 140 / 3, 485, 255 + 280 / 3);
  } else if (h == 11 && m != 0) {
    rect(115 + m / 3, 175 - 140 / 3 - 7 * m / 18, 600 - (115 + m / 3), 255 + 280 / 3 + 7 * m / 9);
  } else if (h == 12 && m == 0) {
    rect(135, 105, 465, 395);
  } else if (h == 12 && m != 0) { //12pm-15pm
    rect(135 + 5 * m / 18, 105 + 5 * m / 9, 600 - (135 + 5 * m / 18), 395 - 10 * m / 9);
  } else if (h == 13 && m == 0) {
    rect(135 + 50 / 3, 105 + 100 / 3, 600 - (135 + 50 / 3), 395 - 200 / 3);
  } else if (h == 13 && m != 0) {
    rect(135 + 5 * m / 18 + 50 / 3, 105 + 5 * m / 9 + 100 / 3, 600 - (135 + 50 / 3 + 5 * m / 18), 395 - 10 * m / 9 - 200 / 3);
  } else if (h == 14 && m == 0) {
    rect(135 + 100 / 3, 105 + 200 / 3, 600 - (135 + 100 / 3), 395 - 400 / 3);
  } else if (h == 14 && m != 0) {
    rect(135 + 5 * m / 18 + 100 / 3, 105 + 5 * m / 9 + 200 / 3, 600 - (135 + 100 / 3 + 5 * m / 18), 395 - 10 * m / 9 - 400 / 3);
  } else if (h == 15 && m == 0) {
    rect(185, 205, 415, 195);
  } else if (h == 15 && m != 0) { //15pm-18pm
    rect(185 + 70 * m / 180, 205 - 5 * m / 18, 600 - (185 + 7 * m / 18), 195 + 7 * m / 12);
  } else if (h == 16 && m == 0) {
    rect(185 + 70 / 3, 205 - 50 / 3, 600 - (185 + 70 / 3), 195 + 35);
  } else if (h == 16 && m != 0) {
    rect(185 + 70 / 3 + 7 * m / 18, 205 - 50 / 3 - 5 * m / 18, 600 - (185 + 70 / 3 + 7 * m / 18), 195 + 35 + 7 * m / 12);
  } else if (h == 17 && m == 0) {
    rect(185 + 140 / 3, 205 - 100 / 3, 600 - (185 + 140 / 3), 195 + 70);
  } else if (h == 17 && m != 0) {
    rect(185 + 140 / 3 + 7 * m / 18, 205 - 100 / 3 - 5 * m / 18, 600 - (185 + 140 / 3 + 7 * m / 18), 195 + 70 + 7 * m / 12);
  } else if (h == 18 && m == 0) {
    rect(255, 155, 345, 300);
  }
​
​
​
  //night mode 18pm-6am
​
  if (h == 5 && m != 0) {
    rect(195 + m, 155 + 20 / 3 - m / 9, 600 - (195 + m), 285 + m / 4);
  } else if (h == 5 && m == 0) {
    rect(195, 155 + 20 / 3, 405, 285);
  } else if (h == 4 && m != 0) {
    rect(135 + m, 155 + 40 / 3 - m / 9, 600 - (135 + m), 270 + m / 4);
  } else if (h == 4 && m == 0) {
    rect(135, 155 + 40 / 3, 465, 270);
  } else if (h == 3 && m != 0) {
    rect(75 + m, 175 - m / 9, 600 - (75 + m), 255 + m / 4);
  } else if (h == 3 && m == 0) {
    rect(75, 175, 525, 255);
  } else if (h == 2 && m != 0) {
    rect(95 - m / 3, 175 - 70 / 3 + 7 * m / 18, 600 - (95 - m / 3), 255 + 140 / 3 - 7 * m / 9);
  } else if (h == 2 && m == 0) {
    rect(95, 175 - 70 / 3, 505, 255 + 140 / 3);
  } else if (h == 1 && m != 0) {
    rect(115 - m / 3, 175 - 140 / 3 + 7 * m / 18, 600 - (115 - m / 3), 255 + 280 / 3 - 7 * m / 9);
  } else if (h == 1 && m == 0) {
    rect(115, 175 - 140 / 3, 485, 255 + 280 / 3);
  } else if (h == 0 && m != 0) {
    rect(135 - m / 3, 105 + 7 * m / 18, 600 - (135 - m / 3), 395 - 7 * m / 9);
  } else if (h == 0 && m == 0) {
    rect(135, 105, 465, 395);
  } else if (h == 23 && m != 0) {
    rect(135 + 50 / 3 - 5 * m / 18, 105 - 5 * m / 9 + 100 / 3, 600 - (135 + 50 / 3 - 5 * m / 18), 395 - 200 / 3 + 10 * m / 9);
  } else if (h == 23 && m == 0) {
    rect(135 + 50 / 3, 105 + 100 / 3, 600 - (135 + 50 / 3), 395 - 200 / 3);
  } else if (h == 22 && m != 0) {
    rect(135 + 100 / 3 - 5 * m / 18, 105 + 200 / 3 - 5 * m / 9, 600 - (135 + 100 / 3 - 5 * m / 18), 395 + 10 * m / 9 - 400 / 3);
  } else if (h == 22 && m == 0) {
    rect(135 + 100 / 3, 105 + 200 / 3, 600 - (135 + 100 / 3), 395 - 400 / 3);
  } else if (h == 21 && m != 0) {
    rect(185 - 5 * m / 18, 205 - 5 * m / 9, 600 - (185 - 5 * m / 18), 195 + 10 * m / 9);
  } else if (h == 21 && m == 0) {
    rect(185, 205, 415, 195);
  } else if (h == 20 && m != 0) {
    rect(185 + 70 / 3 - 70 * m / 180, 205 - 50 / 3 + 5 * m / 18, 600 - (185 + 70 / 3 - 70 * m / 180), 195 + 35 - 7 * m / 12);
  } else if (h == 20 && m == 0) {
    rect(185 + 70 / 3, 205 - 50 / 3, 600 - (185 + 70 / 3), 195 + 35);
  } else if (h == 19 && m != 0) {
    rect(185 + 140 / 3 - 7 * m / 18, 205 - 100 / 3 + 5 * m / 18, 600 - (185 + 140 / 3 - 7 * m / 18), 195 + 70 - 7 * m / 12);
  } else if (h == 19 && m == 0) {
    rect(185 + 140 / 3, 205 - 100 / 3, 600 - (185 + 140 / 3), 195 + 70);
  } else if (h == 18 && m != 0) {
    rect(255 - 7 * m / 18, 155 + 5 * m / 18, 600 - (255 - 7 * m / 18), 300 - 7 * m / 12);
  }
​
  // text show
  let t = millis();
  if (t <= 4000) {
    textSize(20);
    fill(255);
    text("This is a SHADOW CLOCK reflecting real time", 30, 30);
  } else if (t > 4000 && t <= 9000) {
    textSize(20);
    fill(255);
    text("the sunlight box will move slowly while time past by", 30, 30);
  } else if (t > 9000) {
    textSize(20);
    fill(255);
    text("CLICK to see the exact time", 30, 30);
  }
  //console.log(millis());
​
  if (mouseIsPressed) {
    push();
    textSize(32);
    fill(255);
    textAlign(CENTER);
    text(hour() + " : " + minute() + " : " + second(), 300, 300);
    pop();
  }
}
Cookies

Sketch Files

Console

Preview
