​

let w = 800, 

    h = 800,

    d = 0.8*w,

    r = d/2,

    smallSecondOffset = -0.4*r;

    t = new Date(); /*https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date*/

​

let faceColor = 0,

    faceColorDark = 0,

    highlight = 0; //set in setup

function setup() {

  createCanvas(w, h);

  frameRate(8);

  print(t);

  faceColor = color(42, 56, 73);

  faceColorDark = color(4, 12, 20);

  highlight = color(62, 225, 77);

}

​

function draw() {

  t = new Date(); //update to now

​

  background(60);

  translate(w/2, h/2);

  rotate(PI); //put 0 degrees at 12-o-clock

  //draw face

  strokeWeight(20);

  stroke(200);

  fill(faceColor)

  ellipse(0,0,d,d);

  stroke(27, 40, 57);

  strokeWeight(1);

  ellipse(0, smallSecondOffset, 0.6*r, 0.6*r); //small seconds dial, maybe a chronometer

  //date numbers:

  stroke(255);

  fill(255);

  textFont('Helvetica');

  textSize(12);

  textAlign(CENTER, CENTER);

  for (let i=0; i<31; i++) {

    push();

    rotate((i+1) * TWO_PI/31); //angle on dial

    translate(0, 0.9*r) //translate to rim

    if (i<8 || i>21)rotate(PI) //rotate upper half numbers to radiate out

    text(i+1, 0, 0);

    pop();

  }

  //date marks:

  var dt = t.getDate();

  //dt = 31; //testing rollover

  stroke(faceColorDark);

  fill(faceColorDark);

  strokeWeight(10);

  for (let i=0; i<31; i++) {

    push();

    rotate((i+0.5) * TWO_PI/31); //angle on dial

    translate(0, 0.91*r) //translate to rim

    if (dt == i || dt == i+1) {

      stroke(highlight);

    } else {

      stroke(faceColorDark);

    }

    //special case: first and last marks are green at 31:

    if (dt==31 && i==0) stroke(highlight);

    line(-10, 0, 10, 0); //should probably be an arc segment?

    pop();

  }

  //outer ticks and special long ticks

  stroke(255);

  for (let i=0; i<60; i++) {

    push();

    rotate(i * TWO_PI/60);

    translate(0, 0.83*r);

    if (i%5==0) strokeWeight(4);

    else strokeWeight(1);

    line(0, 0, 0, 0.038*r);

    if (i==5 || i==15 || i==25 || i==35 || i==45 || i==55) {

      line(0, -20, 0, -80);

    }

    pop();

  }

  //second ticks

  push();

  stroke(255);

  strokeWeight(2);

  translate(0, smallSecondOffset);

  for (let i=0; i<12; i++) {

    push();

    rotate(i*TWO_PI/12);

    translate(0, 0.21*r)

    line(0, 0, 0, 20);

    pop();

  }

  pop();

  //big numbers:

  strokeWeight(1);

  stroke(220);

  fill(220);

  textSize(80);

  textFont("Courier New");

  for (let i=2; i<=12; i+=2) {

    push();

    rotate(i*TWO_PI/12);

    translate(0, 0.6*r);

    if (i==10 | i==12 | i==2)rotate(PI); //upper half numbers rotate for alignment

    if (i!=6) text(i, 0, 0);    

    pop();

  }

  //Title:

  push();

  translate(0, 0.38*r);

  rotate(PI);

  stroke(200);

  fill(200);

  textFont("Helvetica");

  textSize(20);

  text("F   E   D   O   S", 0, 0);

  textSize(10);

  text("G  L  A  S  H  Ü  T  T  E", 0, 15);

  stroke(highlight);

  fill(highlight);

  text("n  e  o  m  a  t  i  k", 0, 45);

  pop();

  //HANDS

  var hr = t.getHours() % 12;

  var mn = t.getMinutes();

  var sec = t.getSeconds();

  var ms = t.getMilliseconds(); //guessing has 3- or 4-beat movement, so sub-1 second refresh

  //draw seconds:

  push();

  translate(0, smallSecondOffset); //from small seconds dial location in drawing face

  rotate((sec/60 + ms/1000/60) * TWO_PI);

  stroke(250);

  fill(250);

  ellipse(0, 0, 0.05*r, 0.05*r);

  strokeWeight(3);

  line(0,-0.09*r,0,0.25*r);

  pop();

  //draw hour hand:

  push();

  rotate((hr/12.0 * TWO_PI) + (mn/60.0) * TWO_PI/12.0);

  stroke(100, 60);

  strokeWeight(20);

  line(0,0,0,0.6*r);

  strokeWeight(8);

  stroke(220);

  fill(220);

  ellipse(0, 0, 0.1*r, 0.1*r);

  line(0,0,0,0.6*r);

  pop();

  //draw minutes:

  push();

  rotate((mn/60 * TWO_PI) + (sec/60.0 * TWO_PI/60.0));

  strokeWeight(16);

  stroke(100, 60);

  strokeWeight(20);

  line(0,0,0,0.8*r);

  strokeWeight(8);

  stroke(240);

  fill(240);

  ellipse(0, 0, 0.05*r, 0.05*r);

  line(0,0,0,0.8*r);

  pop();

}