​

function setup() {

  createCanvas(600, 600);

  ellipseMode(CENTER);

  angleMode(DEGREES);

}

​

function draw() {

  background(220);

  //center;

  if (mouseX <= 450 && mouseX >= 150) {

    fill (random(255), random(255), random(255));

    console.log('sos');

       }else if (mouseY >= 150 && mouseY <= 450){

         fill (random(255), random(255), random(255));

       }else{

       fill(255);

       }

  noStroke();

  ellipse(width/2, height/2, 300);

  //blue;

  let s = second();

  push();

  translate(width/2, height/2);

  blendMode(MULTIPLY);

  fill(73, 86, 158);

  arc(0, 0, 900, 900, 0, 180-s);

  pop();

  //red;

  let m = minute();

  push();

  translate(width/2, height/2);

  rotate(90);

  blendMode(MULTIPLY);

  fill(235, 70, 84);

  arc(0, 0, 900, 900, 0, 180-m);

  pop();

  //yellow;

  let h = hour();

  push();

  translate(width/2, height/2);

  rotate(180);

  blendMode(MULTIPLY);

  fill(247, 195, 72);

  arc(0, 0, 900, 900, 0, 180-h);

  pop();

  //ruler?

  let l = millis();

  strokeWeight(5);

  stroke(0);

  line(0, mouseY, l, 40);

  line(mouseX, 0, 450, l/2);

}

​