​

Javascript 24 Hour Clock with 7 Segment Display

Made by Oon Han 😊

​

Remix of The Coding Train's

Coding Challenge #117

Seven-Segment Display

​

Hope you like it

​

*/

​

let nums = [0x7E, 0x30, 0x6D, 0x79, 0x33, 0x5B, 0x5F, 0x70, 0x7F, 0x7B];

​

function setup() {

  createCanvas(1000, 300);

}

​

function draw() {

  background(0);

  let hr = hour();

  let mn = minute();

  let sc = second();

  sevenSegment(-30, nums[format(hr, 0)]);

  sevenSegment(130, nums[format(hr, 1)]);

  fill(0, 255, 0);

  ellipse(325, 100, 20, 20);

  ellipse(325, 200, 20, 20);

  sevenSegment(320, nums[format(mn, 0)]);

  sevenSegment(480, nums[format(mn, 1)]);

  fill(0, 255, 0);

  ellipse(675, 100, 20, 20);

  ellipse(675, 200, 20, 20);

  sevenSegment(670, nums[format(sc, 0)]);

  sevenSegment(830, nums[format(sc, 1)]);

}

​

function format(num, pos) {

  let formatted = str(num);

  if (num < 10) {

    formatted = "0" + str(num);

  }

  formatted = formatted.charAt(pos);

  return formatted;

}

​

function getColour(val, shift) {

  let r = 0;

  let g = map((val >> shift) & 1, 0, 1, 28, 255);

  let b = 0;

  let a = 255;

  return color(r, g, b, a);

}

​

function sevenSegment(pos, val) {

  push();

  stroke(0);

  noFill();

  // A

  fill(getColour(val, 6));

  rect(pos + 60, 20, 78, 18, 10);

  // B

  fill(getColour(val, 5));

  rect(pos + 140, 40, 18, 98, 10);

  // C

  fill(getColour(val, 4));

  rect(pos + 140, 160, 18, 98, 10);

  // D

  fill(getColour(val, 3));

  rect(pos + 60, 260, 78, 18, 10);

  // E

  fill(getColour(val, 2));

  rect(pos + 40, 160, 18, 98, 10);

  // F

  fill(getColour(val, 1));

  rect(pos + 40, 40, 18, 98, 10);

  // G

  fill(getColour(val, 0));

  rect(pos + 60, 140, 78, 18, 10);

  pop();

}