​

function setup() {

  createCanvas(600, 600);

  background(197, 205, 224);

  frameRate(fr);

  rectMode(CENTER);

}

​

function draw() {

  //  background(220);

  let r = random(40, 255);

  let g = random(40, 255);

  let b = random(40, 255);

  let h = hour();

  let m = minute();

  let s = second();

​

 //m=m+4;

  push();

  block(m, h);

  pop();

  //m=m+35;

  Redraw(m, s);

​

  //seconds tile

  push();

  stroke(0);

  fill(r, g, b);

  rect(s * 10, m * 10, 10, 10, 3, 3, 3, 3);

  pop();

}

​

//generate Hour and Minute using sun and square resp

function block(m, h) {

  let sun1 = 0;

  let sun2 = 0;

  let sun3 = 0;

  // h=h-5;

  if (h >= 0 && h < 6) {

    sun1 = 24;

    sun2 = 32;

    sun3 = 56;

  } else if (h >= 6 && h < 9) {

    sun1 = 25;

    sun2 = 25;

    sun3 = 112;

  } else if (h >= 9 && h < 15) {

    sun1 = 255;

    sun2 = 228;

    sun3 = 51;

  } else if (h >= 15 && h < 19) {

    sun1 = 255;

    sun2 = 69;

    sun3 = 38;

  } else if (h >= 19 && h < 0) {

    sun1 = 14;

    sun2 = 26;

    sun3 = 64;

  }

  fill(sun1, sun2, sun3);

  stroke(255, 240, 33);

  ellipse(60, 60, h * 10, h * 10);

  noStroke();

}

​

//minute square

function Redraw(m, s) {

  m = m % 60;

  noStroke();

  fill(70, 160, 160, 50);

  rect(width / 2, height / 2, m * 10, m * 10, 3, 3, 3, 3);

  if (m == 0) {

    fill(197, 205, 224, 255);

    rect(width / 2, height / 2, m * 10, m * 10, 3, 3, 3, 3);

  }

}

​