---- Dozenal 7 Segment Clock ----

This is a concept of a 7 segment clock that displays dozenal time. Dozenal means that numbers are written with a number system with a base of 12, instead of 10 we use everyday. So instead only having the digits 0 to 9, we additionally have A for 10, and B for 11. The number 10 in the dozenal number system has a value of 12 in the decimal system. You can find more information on https://en.wikipedia.org/wiki/Duodecimal

​

However, instead of only converting the hours, minutes and seconds into dozenal numbers, we can also make a new time measurement system that's constructed with dozenal numbers in mind.

​

We start off with the hours. Now the day has already 24 hours which is "20" in the dozenal system. That's very handy and has another advantage: If we start at 0, all am. hours will be single digits and all pm. hours will have a leading 1. Therefore there is no extra space to include the am or pm text needed, and it is easier readable than the 24 hour system.

​

Instead of dividing an hour into 60 parts, let's use 144, or 12 * 12. We call this time unit a parva (from latin "parvus" - small, short) and it is 25 seconds long. We do the same thing again with a parva and get a chrona (from greek "chronos" - time), which is around 0.1736 seconds long.

​

The clock layout is kept, except different time units of course: hh:pp:cc

Notice that increasing time is now just counting up, and the number of chronas passed in the day is just the (dozenal) number with the digits hhppcc.

​

There are no agreed upon digits for 10 and 11 in the dozenal system. However many were proposed. Different proposals can be found at http://www.dozenalsociety.org.uk/basicstuff/hammond.html, http://www.dozenalsociety.org.uk/basicstuff/digits.htm, https://dozenal.org/drupal/content/dsa-symbology-synopsis.html

​

I will use Don Hammond's proposed digits, since they look the most natural:

​

10:         11:

             ___

  \         /   \

   \        \

   /         \

  |    |     /

   \__/     /____|

*/

​

let clock;

let dateClock;

​

let digits = [

  0x3f,

  0x06,

  0x5b,

  0x4f,

  0x66,

  0x6d,

  0x7d,

  0x07,

  0x7f,

  0x6f,

  0x5a,

  0x79,

  0x40,

];

​

let date, hour1, hour2, minute1, minute2, second1, second2;

let calendar, day1, day2, month1, month2, year1, year2, year3, year4;

​

let clockColor, colorPicker;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  stroke(255);

  colorMode(HSB, 100);

  angleMode(DEGREES);

  date = new Date();

  clockColor = color(

    95,

    100,

    100,

    100

  );

​

  apply_glow(clockColor, 40);

  colorPicker = createColorPicker(clockColor);

  colorPicker.position(0, 0);

  clock = new Clock(0, 50, 100, 10, clockColor);

  dateClock = new DateDisplay(0, 120, 50, 10, clockColor);

}

​

function draw() {

  clear();

​

  translate(width / 2, height / 2);

​

  // Calculate time

  date = new Date();

  hour1 = int(date.getHours() / 12);

  hour2 = date.getHours() % 12;

​

  minute1 = int(date.getMinutes() / 5);

  minute2 = int(((date.getMinutes() * 60 + date.getSeconds()) % 300) / 25);

​

  second1 = int(

    (((date.getMinutes() * 60000 +

      date.getSeconds() * 1000 +

      date.getMilliseconds()) %

      25000) *

      12) /

      25000

  );

  second2 = int(

    (((date.getMinutes() * 60000 +

      date.getSeconds() * 1000 +

      date.getMilliseconds()) %

      (25000 / 12)) *

      144) /

      25000

  );

  // Date conversion

  day1 = int(date.getDate()/12);

  day2 = date.getDate() % 12;

  month1 = int((date.getMonth()+1)/12);

  month2 = (date.getMonth() +1) % 12;

  year1 = int((date.getYear()+1900)/1728);

  year2 = int((date.getYear()+1900)/144) % 12;

  year3 = int((date.getYear()+1900)/12) % 12;

  year4 = (date.getYear()+1900) % 12;

  clockColor = colorPicker.color();

​

  // Draw everything

  clock.set_color(clockColor);

  dateClock.set_color(clockColor);

  apply_glow(clockColor, 40);

  clock.draw([

    digits[hour1],

    digits[hour2],

    digits[minute1],

    digits[minute2],

    digits[second1],

    digits[second2],

  ]);

  dateClock.draw([

    digits[day1],

    digits[day2],

    digits[month1],

    digits[month2],

    digits[year1],

    digits[year2],

    digits[year3],

    digits[year4],

  ]);

}

​

function apply_glow(glowColor, glowSpread) {

  drawingContext.shadowBlur = glowSpread;

  drawingContext.shadowColor = glowColor;

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

}

​