​

function setup() {

  createCanvas(450, 450);

  angleMode(DEGREES);

  textAlign(CENTER, CENTER);

}

​

function draw() {

  textSize(55);

  textFont('Impact');

  background(0);

  translate(225, 225);

  let m = 6*minute();

  let s = 6*second();

  let h = 30*hour()  + m/12 ;

  fill(255);

  stroke(255);

  // line(18.4, -135, 0, 0);

  noStroke();

  rotate(s);

  translate(0, -135);

  rotate(-s);

  text('B', 0, 0);

  translate(225, 225);

  resetMatrix();

​

  translate(225, 225);

  fill(255);

  noStroke();

  rotate(m);

  translate(0, -135);

  rotate(-m);

  text('M', 5, 0);

  resetMatrix();

  translate(225, 225);

  fill(255);

  noStroke();

  rotate(h);

  translate(0, -135);

  rotate(-h);

  text('W', -5, 0);

  rotate(-45);

  resetMatrix();

​

​

  stroke(255);

  strokeWeight(10);

  noFill();

//   //B

//   rotate(-45);

//   line(-20,-155,-20,-120);

//   curve(-650, -100,  -20,-137.5,-20,-155, 0, -100);

//   curve(-650, -100,  -20,-120,-20,-137.5, 0, -100);

//   resetMatrix();

//   translate(200, 200);

//   stroke(255);

//   strokeWeight(10);

//   noFill();

//   // M

//   line(-20, -155, -20 , -120);

//   line(-20, -155, 0, -125);

//   line(20, -155, 0, -125);

//   line(20, -155, 20, -120);

​

//   // W

//   rotate(45);

//   line(-20, -155, -20 , -120);

//   line(-20, -120, 0, -150);

//   line(20, -120, 0, -150);

//   line(20, -155, 20, -120);

​

​

  resetMatrix();

  // line(200, 45, 317, 93);

  // line(180, 45, 283,293);

​

// 

​

  fill(255);

  noStroke();

  // text(h + ':' + m + ':' + s, 5, 200);

  strokeWeight(5);

  stroke(255);

  noFill()

  ellipse(225, 225, 380, 380);

  ellipse(225, 225, 345, 345);

  fill(255);

  ellipse(225, 225, 210, 210); 

  fill('#0059b3');

  arc(225, 225, 205, 205, 0, 90);

  arc(225, 225, 205, 205, -180, -90);

  noStroke();

  textSize(13);

  textFont('Normal');

  translate(225, 225);

  fill(225);

  var x = 0;

  for (var i = 1; i <= 12; i++, x += 30) {

    rotate(x);

    translate(92, -155.9);

    rotate(-x);

    text(i, 0, 0);

    resetMatrix();

    translate(225, 225);

​

​

​

  }

  // PIE(200,200,200);

​

}

​

​

​

// // let a = atan2(mouseY - height / 2, mouseX - width / 2);

//   // translate(width / 2, height / 2);

//   var a = 'B';

//   console.log(typeof a);

//   // rotate(a);