// arc clock 

​

function setup() {

  createCanvas(600, 600);

  angleMode(DEGREES);

}

​

function draw() {

  background(255);

  textSize(22);

  textStyle(BOLD);

  textStyle(ITALIC);

​

  let h = hour();

  let m = minute();

  let s = second();

  let x = 0;

​

​

  noStroke();

  fill(0, 0, 0, 50);

​

  rect(100, 250, 100, 100);

  rect(250, 250, 100, 100);

  rect(400, 250, 100, 100);

​

  text("second", 115, 380);

  text("minute", 270, 380);

  text("hour", 430, 380)

​

  fill(0, 0, 0, 40);

  text("second", 115, 400);

  fill(0, 0, 0, 30);

  text("second", 115, 420);

  fill(0, 0, 0, 20);

  text("second", 115, 440);

​

  fill(0, 0, 0, 40);

  text("minute", 270, 400);

  fill(0, 0, 0, 30);

  text("minute", 270, 420);

  fill(0, 0, 0, 20);

  text("minute", 270, 440);

​

  fill(0, 0, 0, 40);

  text("hour", 430, 400);

  fill(0, 0, 0, 30);

  text("hour", 430, 420);

  fill(0, 0, 0, 20);

  text("hour", 430, 440);

  arc(150, 300, 100, 100, s, 0);

  fill(252, 240, 149);

​

  //hour

  arc(450, 300, 100, 100, h, 0);

  fill(149, 190, 252);

​

  //minute

  arc(300, 300, 100, 100, m, 0);

  fill(255, 161, 150);

​

  //second

  arc(150, 300, 100, 100, s, 0);

  fill(252, 240, 149);

//grid

  if (s == 30) {

    fill(255, 255, 255);

  } else if (s == 60) {

    fill(0, 0, 0);

  }

​

  fill(0, 0, 0, 1);

​

  for (let x = 0; x < width; x += 20) {

​

​

    for (let y = 0; y < height; y += 20) {

​

      rect(x, y, x, 5);

    }

  }

​

}