Seven segment display clock

sketch.js

let digitHour0, digitHour1, digitMinute0, digitMinute1, digitSecond0, digitSecond1;
let colon1, colon2;

function setup() {
  createCanvas(395, 110);
}

function draw() {
  background(51);
  
  const time = new Date();
  
  // Each segment of the clock should be 2 digits long.
  let hours = time.getHours();
  let hour0 = Number(hours.toString()[0]);
  let hour1 = Number(hours.toString()[1]);
  // For 1 - 9 hour0 will be the hour and hour1 will be undefined.
  // So in this scenario check if hour1 is NaN and if so set hour0 to 0 and
  // set hour1 to be what hour0 was.
  if(isNaN(hour1)){
    const temp = hour0;
    hour0 = 0;
    hour1 = temp;
  }
  let minutes = time.getMinutes();
  let minute0 = Number(minutes.toString()[0]);
  let minute1 = Number(minutes.toString()[1]);
  // For 1 - 9 minute0 will be the minute and minute1 will be undefined.
  // So in this scenario check if minute1 is NaN and if so set minute0 to 0 and
  // set minute1 to be what minute0 was.
  if(isNaN(minute1)){
    const temp = minute0;
    minute0 = 0;
    minute1 = temp;
  }
  let seconds = time.getSeconds();
  let second0 = Number(seconds.toString()[0]);
  let second1 = Number(seconds.toString()[1]);
  // For 1 - 9 second0 will be the second and second1 will be undefined.
  // So in this scenario check if second1 is NaN and if so set second0 to 0 and
  // set second1 to be what second0 was.
  if(isNaN(second1)){
    const temp = second0;
    second0 = 0;
    second1 = temp;
  }

  // Create digits for hours
  digitHour0 = new Digit(hour0, new Position(5,5));
  digitHour1 = new Digit(hour1, new Position(60,5));
  colon1 = new Colon(new Position(115, 5));
  // Create digits for minutes
  digitMinute0 = new Digit(minute0, new Position(145,5));
  digitMinute1 = new Digit(minute1, new Position(200,5));
  colon2 = new Colon(new Position(255, 5));
  // Create digits for seconds
  digitSecond0 = new Digit(second0, new Position(285,5));
  digitSecond1 = new Digit(second1, new Position(340,5));
  
  // Show Hours
  digitHour0.show();
  digitHour1.show();
  colon1.show();
  // Show Minutes
  digitMinute0.show();
  digitMinute1.show();
  colon2.show();
  // Show Seconds
  digitSecond0.show();
  digitSecond1.show();
}

class Digit{
  // seven segments
  constructor(number, position, options){
    options = options || {};
    this.number = number;
    this.position = position;
    this.width = options.width || 50;
    this.height = options.height || 100;
    this.segmentHeight = options.segmentHeight || 10;

    const horizontalSegmentWidth = floor(this.width - (2 * this.segmentHeight));
    const verticalSegmentHeight = floor((this.height - (3 * this.segmentHeight)) / 2);

    // The segments are placed in a particular layout with each segment being called a different letter.
    // The segment layout and names is below:
    //     AAAAAAAA
    //     AAAAAAAA
    // FFFF        BBBB
    // FFFF        BBBB
    // FFFF        BBBB
    // FFFF        BBBB
    // FFFF        BBBB
    //     GGGGGGGG
    //     GGGGGGGG
    // EEEE        CCCC
    // EEEE        CCCC
    // EEEE        CCCC
    // EEEE        CCCC
    // EEEE        CCCC
    //     DDDDDDDD
    //     DDDDDDDD


    // Some common positions used to place segments
    const centerSideX = this.position.x + this.segmentHeight;
    const rightSideX = (this.position.x + this.width) - this.segmentHeight;
    const upperSideY = this.position.y + this.segmentHeight;
    const lowerSideY = this.position.y + (2 * this.segmentHeight);

    // Detemine the position for each segment and create a new segment for each side
    const aPosition = new Position(centerSideX, this.position.y);
    // bitwise shift the hexadecimal number to determine if the specific segment should be illiminated
    const aIlluminate = (this.num >> 6) & 1;
    this.aSegment = new Segment(aPosition, horizontalSegmentWidth, this.segmentHeight, aIlluminate);

    const bPosition = new Position(rightSideX, upperSideY);
    const bIlluminate = (this.num >> 5) & 1;
    this.bSegment = new Segment(bPosition, this.segmentHeight, verticalSegmentHeight, bIlluminate);

    const cPosition = new Position(rightSideX, lowerSideY + verticalSegmentHeight);
    const cIlluminate = (this.num >> 4) & 1;
    this.cSegment = new Segment(cPosition, this.segmentHeight, verticalSegmentHeight, cIlluminate);

    const dPosition = new Position(centerSideX, lowerSideY + (2 * verticalSegmentHeight));
    const dIlluminate = (this.num >> 3) & 1;
    this.dSegment = new Segment(dPosition, horizontalSegmentWidth, this.segmentHeight, dIlluminate);

    const ePosition = new Position(this.position.x, lowerSideY + verticalSegmentHeight);
    const eIlluminate = (this.num >> 2) & 1;
    this.eSegment = new Segment(ePosition, this.segmentHeight, verticalSegmentHeight, eIlluminate);

    const fPosition = new Position(this.position.x, upperSideY);
    const fIlluminate = (this.num >> 1) & 1;
    this.fSegment = new Segment(fPosition, this.segmentHeight, verticalSegmentHeight, fIlluminate);

    const gPosition = new Position(centerSideX, upperSideY + verticalSegmentHeight);
    const gIlluminate = (this.num >> 0) & 1;
    this.gSegment = new Segment(gPosition, horizontalSegmentWidth, this.segmentHeight, gIlluminate);
  }

  show(){
    // Call show on each of the named segments.
    this.aSegment.show();
    this.bSegment.show();
    this.cSegment.show();
    this.dSegment.show();
    this.eSegment.show();
    this.fSegment.show();
    this.gSegment.show();
  }

  // Get the hexadimal encoding associated with the supplied number
  get num(){
    return this.nums[this.number];
  }

  // Array of hexadecimal encodings for displaying digits 0 - 9 (gotten from https://en.wikipedia.org/wiki/Seven-segment_display)
  get nums(){
    return [0x7e, 0x30, 0x6d, 0x79, 0x33, 0x5b, 0x5f, 0x70, 0x7f, 0x7b];
  }
}

// Basic class to store x, y coordinates of a position
class Position{
  constructor(x, y){
    this.x = x;
    this.y = y;
  }
}

// Class that represents a display segment.
class Segment{
  constructor(position, width, height, illuminate = false){
    this.position = position;
    this.width = width;
    this.height = height;
    this.illuminate = illuminate;
  }
  
  show(){
    fill(255, 0, 0, this.illuminate ? 255 : 40);
    rect(this.position.x, this.position.y, this.width, this.height);
  }
}

// Class to define a colon between the digit sets
class Colon{
  constructor(position, options){
    options = options || {};
    this.position = position;
    this.width = options.width || 25;
    this.height = options.height || 100;
    this.circleWidth = options.circleWidth || 15;
    this.illuminate = true;
    
    // get the center point of the colon boundary
    const colonCenter = new Position(this.position.x + floor(this.width/2), this.position.y + floor(this.height/2));
    // space each circle evenly above and below the center point
    this.topCirclePosition = new Position(colonCenter.x, colonCenter.y - 2*floor(this.circleWidth / 2));
    this.bottomCirclePosition = new Position(colonCenter.x, colonCenter.y + 2*floor(this.circleWidth / 2));
  }
  
  show(){
    fill(255, 0, 0, this.illuminate ? 255 : 40);
    circle(this.topCirclePosition.x, this.topCirclePosition.y, this.circleWidth);
    circle(this.bottomCirclePosition.x, this.bottomCirclePosition.y, this.circleWidth);
  }
}