let col_size = 20;

​

DIGIT_COL = 4;

DIGIT_ROW = 6;

​

class watchFace {

  constructor(posX, posY, diameter, angle1, angle2, dark = false) {

    this.posX = posX + diameter / 2;

    this.posY = posY + diameter / 2;

    this.diameter = diameter;

    this.angle1 = angle1;

    this.angle2 = angle2;

    this.newAngle1 = angle1;

    this.newAngle2 = angle2;

    this.easing = 0.05;

    this.opacity = 0;

    this.newOpacity = angle1 == angle2 ? 0 : 1;

    this.dark = dark;

  }

​

  set_angles(new_angle1, new_angle2) {

    if (new_angle1 != this.newAngle1) {

      this.newAngle1 = new_angle1;

      this.newOpacity = 1;

    }

    if (new_angle2 != this.newAngle2) {

      this.newAngle2 = new_angle2;

      this.newOpacity = 1;

    }

    if (new_angle1 == new_angle2) {

      this.newOpacity = 0;

    }

  }

​

  draw() {

    if (this.angle1 != this.newAngle1) {

      let d1 = this.newAngle1 - this.angle1;

      this.angle1 += d1 * this.easing;

    }

    if (this.angle2 != this.newAngle2) {

      let d2 = this.newAngle2 - this.angle2;

      this.angle2 += d2 * this.easing;

    }

    if (this.opacity != this.newOpacity) {

      let od = this.newOpacity - this.opacity;

      this.opacity += od * this.easing;

    }

    stroke(40, 40, 40, 100);

    strokeWeight(2);

    this.dark ? fill(0, 0, 0) : noFill();

    circle(this.posX, this.posY, this.diameter);

    stroke(0, 0, 0, this.opacity * 255);

    strokeWeight(3);

    line(

      this.posX,

      this.posY,

      this.posX + (sin(-this.angle1 - TWO_PI / 2) * this.diameter) / 2,

      this.posY + (cos(-this.angle1 - TWO_PI / 2) * this.diameter) / 2

    );

    line(

      this.posX,

      this.posY,

      this.posX + (sin(-this.angle2 - TWO_PI / 2) * this.diameter) / 2,

      this.posY + (cos(-this.angle2 - TWO_PI / 2) * this.diameter) / 2

    );

  }

}

​

class Digit {

  constructor(posX, posY, digit) {

    this.posX = posX;

    this.posY = posY;

    this.digit = digit;

    this.watch_faces = [];

​

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

      this.watch_faces.push([]);

      for (let j = 0; j < DIGIT_COL; j++) {

        this.watch_faces[i].push(

          new watchFace(

            this.posX + j * row_size,

            this.posY + i * col_size,

            row_size,

            DIGIT_ANGLES[digit][i][j][0],

            DIGIT_ANGLES[digit][i][j][1]

          )

        );

      }

    }

  }

​

  set_digit(new_digit) {

    if (new_digit != this.digit) {

      this.digit = new_digit;

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

        for (let j = 0; j < DIGIT_COL; j++) {

          this.watch_faces[i][j].set_angles(

            DIGIT_ANGLES[this.digit][i][j][0],

            DIGIT_ANGLES[this.digit][i][j][1]

          );

        }

      }

    }

  }

​

  draw() {

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

      for (let j = 0; j < DIGIT_COL; j++) {

        this.watch_faces[i][j].draw();

      }

    }

  }

}

​

let hour_digit_1;

let hour_digit_2;

let minute_digit_1;

let minute_digit_2;

let second_digit_1;

let second_digit_2;

​

let sep1 = [];

let sep2 = [];

​

function setup() {

  createCanvas(

    windowWidth > 580 ? windowWidth : 580,

    180

  );

  row_size = width / 30

  col_size = row_size

  resizeCanvas(width, row_size*7)

​

  hour_digit_1 = new Digit(0.6*row_size, 10, 0);

  hour_digit_2 = new Digit(4.8 * row_size, 10, 8);

  minute_digit_1 = new Digit(11 * row_size, 10, 8);

  minute_digit_2 = new Digit(15.2 * row_size, 10, 0);

  second_digit_1 = new Digit(21* row_size, 10, 8);

  second_digit_2 = new Digit(25.2*row_size, 10, 0);

​

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

    sep1.push(new watchFace(9.4*row_size, i * row_size + 10, row_size, 0, 0, i == 1 || i == 4));

    sep2.push(new watchFace(19.6*row_size, i * row_size + 10, row_size, 0, 0, i == 1 || i == 4));

  }

}

​

function draw() {

  background(255);

  date = new Date();

  _hour = date.getHours();

  _minutes = date.getMinutes();

  _seconds = date.getSeconds();

  hd1 = _hour < 10 ? 0 : int(_hour / 10);

  hd2 = _hour % 10;

  md1 = _minutes < 10 ? 0 : int(_minutes / 10);

  md2 = _minutes % 10;

  sd1 = _seconds < 10 ? 0 : int(_seconds / 10);

  sd2 = _seconds % 10;

​

  hour_digit_1.set_digit(hd1);

  hour_digit_2.set_digit(hd2);

  minute_digit_1.set_digit(md1);

  minute_digit_2.set_digit(md2);

  second_digit_1.set_digit(sd1);

  second_digit_2.set_digit(sd2);

​

  hour_digit_1.draw();

  hour_digit_2.draw();

  minute_digit_1.draw();

  minute_digit_2.draw();

  second_digit_1.draw();

  second_digit_2.draw();

​

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

    sep1[i].draw();

    sep2[i].draw();

  }

}

​

​