let myColor = ["#C50802", "#12046F", "#F6C519"]

let rectH = 1;

let rectM = 2;

let rectS = 0;

​

​

function setup() {

  createCanvas(600, 600);

  rectMode(CORNER);

  strokeWeight(6);

}

​

function draw() {

  background(200);

  let h = hour();

  let m = minute();

  let s = second();

// De stijl drawing frame

  push();

  rectMode(CENTER);

  noStroke();

  fill(160);//shadow

  rect(width/2+5, height/2+5, 550);

  fill(235);//paper color

  rect(width/2, height/2, 540);

​

  pop();

​

//BLACK CORNER

  push();

if(   mouseX>s*3+270 

   && mouseX<570

   && mouseY>30

   && mouseY<90

  ){

  fill(235);

} else{

    fill(0);

}

  noStroke();

  rect(s*3+270, 30, 300-s*3, 60);

  pop();

  //REAL TIME

  push();

  textSize(25);

  textAlign(CENTER);

  if(s<10){

    s = '0'+s  

  }

  if(m<10){

    m = '0'+m  

  }

  if(h<10){

    h = '0'+h  

  }

  text(h+':'+m+':'+s, ((s*3+270)+570)/2, 70);

  pop();

//BlUE for Hour  

  fill(myColor[rectH]);

  rect(90, 90, 120, 10*h+60);

  //Blue motion line

    line(30, 10*h+150, 210, 10*h+150);

//YELLOW for Minute  

  push();

  rectMode(CORNERS);

  fill(myColor[rectM]);

  rect(450, 570, 330-m*2, 510-m*2);

  pop();

  //Yellow motion line

  line(90, 510-m*2, 570, 510-m*2);

  line(330-m*2, s*4+150, 330-m*2, 570); //vertical

//RED for Second

  fill(myColor[rectS]);

  rect(210, 90, s*3+60, s*4+60);  

  //Red motion line with red

  line(s*3+270, 30, s*3+270, 570);//vertical line

  line(90, s*4+150, width-30, s*4+150);//parallel line

  line(210, (s*4+60)/5+90, width-30, (s*4+60)/5+90);//inserting line

//motionless lines

  //line(210, 90, 210, height-30);//vertical along with red & yellow

  line(30, 90, width-30, 90); //parallel above red

  line(90, 30, 90, height-30);//vertical left of blue

​

//AM PM

  textStyle(BOLD);

  fill(0);

  textSize(30);

  if(h<12){

    text('AM', 485, 550-m);

  } else{

    text('PM', 485, 550-m);

  }  

//ML BLUE increase with YELLOW

  push();

  rectMode(CORNERS);

  if(  mouseX > 450 && mouseY > 510-m*2 && mouseX < 570 && mouseY < 570

    ){

    noFill();

  } else{

    fill(18, 4, 111);

  }

  rect(570, 570, 450, 510-m*2);

  pop();

  //frame

    push();

    rectMode(CENTER);

    noFill();

    rect(width/2, height/2, 540);

    pop();

​

 //console.log(`Now is ${h}:${m}:${s}`);

}

​

function mousePressed(){

  let h = hour();

  let s = second();

  let m = minute();

  if(mouseX<210 && mouseX>90 && mouseY>90 && mouseY< 10*h+150){

    rectH++;

  if(rectH == 3){

    rectH=0;

  }

}

​

  if(mouseX>210 && mouseX<s*3+270 && mouseY>90 && mouseY<s*4+150){

      rectS++;

  if(rectS == 3){

    rectS=0;

  }

}

    rect(450, 570, 330-m*2, 510-m*2);

    if(mouseX>330-m*2 && mouseX<450 && mouseY>510-m*2 && mouseY<570){

      rectM++;

  if(rectM == 3){

    rectM=0;

  }

}

​

​

}