Nonlinear clock

const gui = new dat.GUI();

let settings = {

  isAuto: true,

  hr: 0,

  min: 0

}

let auto = gui.add(settings, 'isAuto');

let setHr = gui.add(settings, 'hr', 0, 23);

let setMin = gui.add(settings, 'min', 0, 59);

​

const timeLengths = 

      [2, 2, 1, 1, 1, 1, 1, 1, 1, 2, 3, 4, 4, 5, 5, 5, 6, 5, 4, 3, 4, 5, 4, 3]

    // 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

const timeSpeeds = timeLengths.map(speed => 1 / speed);

const daySum = timeLengths.reduce(function(accumulator, hourLength) {

  return accumulator + hourLength;

}, 0);

​

const TotalSecondInADay = timeLengths.reduce(function(accumulator, hourLength) {

  // get total time elapse in seconds

  return accumulator + hourLength * 60 * 60;

}, 0)

​

// calculate speed ratio in second to convert between real time

const realTimeRatio = TotalSecondInADay / 24 * 60 * 60;

​

function getHourPercentage(hour) {

  let hourSum = timeLengths.reduce(function(accumulator, hourLength, index) {

    return index < hour ? accumulator + hourLength : accumulator;

  }, 0);

​

  return hourSum / daySum;

}

​

let ws;

​

function setup() {

  ws = min(windowWidth, windowHeight) * 0.8;

  createCanvas(ws, ws);

  background(100);

  stroke(255);

  textSize(18);

  // getDisplayHourDeg()

  // setInterval(() => {

  //  drawHourHand()

  // }, 1000)

}

​

function draw() {

  background(0);

  ellipse(width / 2, height / 2, 5);

  drawHours();

  drawHourHand();

}

​

function getDisplayHourDeg() {

  // console.log(getSecSinceMidNight())

  // return TWO_PI * (getSecSinceMidNight() / (60 * 60 * 24));

  let now = new Date();

  let hourNow

  let minNow

  if (settings.isAuto) {

    hourNow = now.getHours();

    minNow = now.getMinutes();

  } else {

    let setNow = new Date(

      now.getFullYear(),

      now.getMonth(),

      now.getDate(),

      settings.hr, settings.min, 0)

    hourNow = setNow.getHours();

    minNow = setNow.getMinutes();

  }

​

​

  let secondsPassed = timeLengths.reduce(function(accumulator, hourSpeed, index) {

    // get total time elapse in seconds

    return index < hourNow ? accumulator + hourSpeed * 60 * 60 : accumulator;

  }, 0) + timeLengths[hourNow] * minNow * 60;

  return TWO_PI * (secondsPassed / TotalSecondInADay);

}

​

function drawHourHand() {

  push();

  translate(width / 2, height / 2);

  rotate(-PI / 2);

  // console.log(getDisplayHourDeg())

  rotate(getDisplayHourDeg())

  stroke(255);

  strokeWeight(5);

  line(0, 0, ws * 0.3, 0);

  pop();

}

​

​

function getSecSinceMidNight() {

  let now = new Date();

  let then = new Date(

    now.getFullYear(),

    now.getMonth(),

    now.getDate(),

    0, 0, 0)

  return Math.round((now.getTime() - then.getTime()) / 1000); // difference in milliseconds

}

​

function drawHours() {

  for (const [index, hr] of timeLengths.entries()) {

    push()

    translate(width / 2, height / 2);

    rotate(-PI / 2);

    rotate(TWO_PI * getHourPercentage(index));

    translate(ws * 0.4, 0);

    rotate(-TWO_PI * getHourPercentage(index) + PI / 2);

    fill(255);

    strokeWeight(1);

    noStroke();

    // ellipse(0, 0, 5)

    textAlign(CENTER, CENTER);

    text(index, 0, 0)

    pop()

  }

}