// arc clock 

​

function setup() {

  createCanvas(600, 600);

  angleMode(DEGREES);

  c1 = color(255, 255, 204);

  c2 = color(255, 204, 255);

  setGradient(c1, c2);

  x = 0

  y = 0

}

​

function draw() {

  // background(0);

  textSize(22);

  textStyle(BOLD);

  textStyle(ITALIC);

​

  let h = hour();

  let m = minute();

  let s = second();

  let x = 0;

  back(0, 300);

  back(50, 300);

  back(100, 300);

  back(150, 300);

  back(200, 300);

  back(250, 300);

  back(300, 300);

  back(350, 300);

  back(400, 300);

  back(450, 300);

  back(500, 300);

  back(550, 300);

​

  stroke(10);

  fill(0, 0, 0, 40);

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

  fill(255);

  //hour

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

  fill(255);

​

  //minute

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

​

  fill(255,255,255);

​

  //second

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

  back(0, 0);

  back(50, 0);

  back(100, 0);

  back(150, 0);

  back(200, 0);

  back(250, 0);

  back(300, 0);

  back(350, 0);

  back(400, 0);

  back(450, 0);

  back(500, 0);

  back(550, 0);

  back(600,0);

  back(0, 560);

  back(50, 560);

  back(100, 560);

  back(150, 560);

  back(200, 560);

  back(250, 560);

  back(300, 560);

  back(350, 560);

  back(400, 560);

  back(450, 560);

  back(500, 560);

  back(550, 560);

  front(0, 150);

  front(100,150);

  front(200, 150);

  front(300, 150);

  front(400, 150);

  front(500, 150);

  front(600, 150);

  front(0, 450);

  front(100, 450);

  front(200, 450);

  front(300, 450);

  front(400, 450);

  front(500, 450);

  front(600, 450);

​

​

      if (x < width) {

      x = x + 1;

    } else if (x == width) {

      x = 0;

    }

}

​

function setGradient(c1, c2) {

  noFill();

  for (var y = 0; y < height; y++) {

    var inter = map(y, 0, height, 0, 1);

    var c = lerpColor(c1, c2, inter);

    stroke(c);

    line(0, y, width, y);

  }

}

​

function back(backX, backY){

  fill(255, 153, 255);

  rect(backX, backY, 40, 40);

  fill(255);

  rect(backX+10, backY+10, 20, 20);

  fill(255, 255, 179);

  rect(backX+15, backY+15, 10, 10);

}

​

function front(frontX, frontY){

  fill(255, 255, 26);

  ellipse(frontX, frontY, 80, 80);

  fill(255, 204, 255);

  rect(frontX, frontY, 40, 40);

  fill(255, 0, 255);

  ellipse(frontX+10, frontY, 25, 25);

}

​