let secondShift = 0;

let m = 90;

let mshift = 0;

let angle = 0;

​

function setup() {

  createCanvas(800, 600);

  noStroke();

  angleMode(DEGREES);

}

​

function draw() {  let hours = hour();

  let minutes = minute();

  let seconds = second();

  var initialSecond = second();

  background(220,235,235*seconds/60,120*seconds/30);

  push();

  translate(width/2,height/2);  

  rotate(-90);

  arc(0,0,360,360,0,(hours/12*360+ (minutes/60)*30));

  fill(255,255,255,20);

  pop();

  push();

  translate(width/2,height/2);

  rotate(-90);

  stroke(255 * (seconds / 60), 0, 255, 100 * (seconds / 60) + 20);

  noFill();

  strokeWeight(5);  a

  arc(0,0,400,400,0,(hours/12*360 + (minutes/60)*30)-3.5);

  pop();

  fill(255,255,255,100);

  push();

  angle = hours/12*360 + 180

  angle += 3/180

  translate(width/2, height/2);

  rotate(angle);

  ellipse(0,200,15,15);

  pop();  

​

  //seconds display

  push();

  fill(0,0,0,160);

  //text(hours % 12 + ":" + minutes + ":" + seconds, width / 2, 100);

  //textSize(50);

  //text(seconds, width/4, 3.3*height/4);

  //movement for the black ellipse that alternates

  a = a + 3

  secondShift = cos(a) * 2;

  translate(width / 2, height / 2);

  scale(secondShift);

  fill(255, (255 * (seconds / 60)), 0); //

  ellipse(0, 0, 70, 70);

​

//ellipse around the circle

  push();

  translate(60, 0);

  fill(50);

  scale(2);

  ellipse(0, 0, 15, 15);

  pop();

​

  // mini ellipse

  push();

  m = m + 2 * (minutes / 60);

  mshift = sin(m) * 2

  rotate(seconds * 6);

  for (i = 0; i <= minutes; i++) {

    translate(minutes, minutes);

    fill(255 * (seconds / 60), 0, 255, 100 * (seconds / 60) + 20);

    scale(mshift);

    ellipse(5 * i, 5 * i, minutes % 10 + 5, minutes % 10 + 5);

    rotate(30);

  }

  pop();

  //outside push pop

  pop();

​

}