let g = 0;

​

function setup() {

  createCanvas(600, 600);

  // let g = 50;

}

​

function draw() {

  background(220);

  fill(0)

  var s = second();

  var m = minute();

  var h = hour();

  textSize(20);

  text('Current Time is: ' + h +': '+ m +': '+ s, 600/2-60, 50);

  //First Clock---------------------------------

  noFill();

  stroke(0);

  rect(240-50,180,240,240);

  //Seconds Timer

  fill(0 + second()*2,120 + second()*2,0);

  noStroke(0);

  rect(600/2-second()*2+10,600/2-    second()*2,second()*4,second()*4);

  //Minute Timer

  fill(240,120,120,160);

  noStroke(0);

  ellipse(600/2+10,600/2, minute()*4,minute()*4);

  //Hour Timer

  fill(255,150)

  rect(600/2-hour()*2+10,600/2-hour()*2,hour()*4,hour()*4);

  //Second Clock--------------------------------------

  textSize(12);

  //Seconds Timer

  fill(0);

  text('second: '+ s, 10,20) 

  fill(255)

  for (let x = 0; x < 545; x += 9)

  {rect(10,30+x,50,5);}

  fill(0 + second()*2,120 + second()*2,0);

  noStroke(0);

  rect(10,30+second()*9,50,5);

  //Minutes Timer

  fill(0);

  text(' minute: '+ m, 70,20) 

  fill(255)

  for (let x = 0; x < 545; x += 9)

  {rect(70,30+x,50,5);}

  fill(240,0,0);

  noStroke(0);

  rect(70,30+minute()*9,50,5);

  //Hours Timer

  fill(0);

  text('  hour: '+ h, 130,20)

  fill(255)

  for (let x = 0; x < 545; x += 23)

  {rect(130,30 + x,50,17);}

  fill(240,240,120);

  noStroke(0);

  rect(130,30+ hour()*23 ,50,17);

  //Third Timer

  // if (second()>0){

  //   g=g+10/100

  // rect(190,60,g,20);}

  // if (second()==59){

  //    g=0;}

}