let rings = [];

let rsize;

let rstep;

let rthick;

​

function setup () {

  setAttributes('antialias', true);

  createCanvas(windowWidth, windowHeight);

  rsize = min(width, height)*0.8;

  rstep = rsize*0.25;

  rthick = rstep*0.35;

  rings.push(new Ring(rsize-rstep*2, rthick, "#ffcc08", "seconds"));

  rings.push(new Ring(rsize-rstep, rthick, "#fb8500", "minutes"));

  rings.push(new Ring(rsize, rthick, "#d00000", "hours"));

}

​

​

function draw() {

  background(20);

  translate(width / 2, height / 2);

  for (let i = 0; i < rings.length; i++) {

    rings[i].update();

    rings[i].show();

  }

​

  basicTimeDisplay(-width/2+40, -height/2+20);

}

​

​

basicTimeDisplay = (x,y) => {

  let s = second();

  let m = minute();

  let h24 = hour();

  let h12 = (h24+11)%12+1;

​

  let tstring = `${nf(h12,2)}:${nf(m,2)}:${nf(s,2)}`;

  textSize(14);

  noStroke();

  fill(255);

  textAlign(CENTER, CENTER);

  text(tstring, x, y);

}

​

class Ring {

  constructor(r, t, c, unit) {

    this.unit = unit;

    this.radius = r;

    this.color = c;

    this.thickness = t;

    this.tvalue = 0;

    this.offset = -HALF_PI;

    this.divisions = {"seconds": 60, "minutes": 60, "hours": 12};

    this.angle = 0;

    this.ax = 0;

    this.ay = 0;

    this.rtime = 0;

  }

​

  updateAngle() {

    this.angle = ((this.rtime[this.unit]/this.divisions[this.unit])*2*PI)+this.offset;

​

    this.ax = cos(this.angle)*this.radius/2;

    this.ay = sin(this.angle)*this.radius/2;

  }

​

  update() {

    this.rtime = {"seconds": second(), "minutes": minute(), "hours": hour()};

    if(this.unit == 'seconds') {

      this.tvalue = (this.rtime[this.unit]/this.divisions[this.unit])*2*PI;

    }

    if(this.unit == 'minutes') {

      this.tvalue = (this.rtime[this.unit]/this.divisions[this.unit])*2*PI;

    }

    if(this.unit == 'hours') {

      this.tvalue = (this.rtime[this.unit]/this.divisions[this.unit])*2*PI;

    }

    this.updateAngle();

  }

​

  show() {

    push();

    rotate(this.offset);

    stroke(this.color);

    strokeWeight(this.thickness);

    noFill();

    arc(0, 0, this.radius, this.radius, 0, this.tvalue);

    pop();

    stroke(this.color);

    strokeWeight(this.thickness*0.125);

    line(0,0,this.ax,this.ay);

​

    push();

    noStroke();

    fill(255);

    textAlign(CENTER, CENTER);

    textSize(this.thickness*0.5);

    textStyle(BOLD);

    if(this.unit == 'hours') {

      text((this.rtime[this.unit]+11)%12+1, this.ax, this.ay);  

    } else {

      text(this.rtime[this.unit], this.ax, this.ay);  

    }

    pop();

  }

}

​