clock001

let colWidth, rowHeight, seconds;

let secondsPerRow, secondsPerColumn;

const border = 32;

const secondsInHour = 60 * 60;

let hp = 0.0,

  dp = 0.0;

let hu, sat, bhu, bright;

let yearPeriod, hf;

​

function setup() {

  const w = (secondsInHour / 5);

  const h = (24 * 20);

  createCanvas(w + border * 2, h + border * 2);

  colorMode(HSB, 360, 100, 100);

  frameRate(20);

  iterationLength = random([15, 30, 45, 60]);

  secondsPerColumn = secondsInHour / iterationLength;

  colWidth = w / secondsPerColumn;

  rowHeight = h / 24;

  yearPeriod = 6;

  hf = 360 / yearPeriod;

  updateClock();

}

​

function easeInOutQuad(x) {

  return x < 0.5 ? 2 * x * x : 1 - pow(-2 * x + 2, 2) / 2;

}

const notes = {

  'C4': (t, period) => note(261.63, t, period),

  'C#4': (t, period) => note(277.18, t, period),

  'Eb4': (t, period) => note(311.13, t, period),

  'E4': (t, period) => note(329.63, t, period),

  'G4': (t, period) => note(392.00, t, period),

  'G#4': (t, period) => note(415.30, t, period),

  'B4': (t, period) => note(493.88, t, period),

}

function note(freq, t, period) {

  return sin((freq * PI * t) / period);

}

function cSharpMinor(t, period) {

  return notes["C#4"](t, period) +

    notes["E4"](t, period) +

    notes["G#4"](t, period);

}

function cSharpMinorSeventh(t, period) {

  return cSharpMinor(t, period) +

    notes["B4"](t, period);

}

​

function updateClock() {

  const d = new Date();

  seconds = d.getHours() * secondsInHour + d.getMinutes() * 60 + d.getSeconds();

  let y = d.getFullYear() % yearPeriod;

  hu = [(y * hf), (y * hf) + hf];

  bhu = lerp(hu[0],hu[1],0.5);

  dp = d.getHours() / 24;

  hp = d.getMinutes() / 60;

  sat = map(d.getMonth(), 0, 11, 50, 90);

  bright = easeInOutQuad(dp * 2) * 15 + 70;

}

​

function drawTicks(tickList, a) {

  const x1 = width / 2;

  const y1 = height / 2;

​

  strokeWeight(border/6);

  const tb = (dp > 0.9) ? 100 : 0;

  let px, py;

  for (var i = 0; i < tickList.length; i++) {

    const {

      x,

      y

    } = tickList[i];

    if (x1 && y1) {

      push();

      blendMode(OVERLAY);

      translate(x1, y1);

      rotate(createVector(x - x1, y - y1).heading());

      beginShape()

      for (let s = 0; s < width; s++) {

        const p = (dist(x1, y1, x, y) / 2);

        const vy = (i % 2 === 0 ? -1 : 1) * 10 * cSharpMinorSeventh(s, p*500);

​

        curveVertex(s, vy);

      }

      noFill();

      const ip = ((i + 1) / tickList.length);

      stroke(bhu, sat, tb, a * ip);

      endShape();

      pop();

    }

​

    px = x;

    py = y;

  }

​

  push();

  stroke(bhu, sat, tb, 0.8);

  strokeWeight(border/3);

  blendMode(OVERLAY)

  noFill();

  const es = min(width,height) - border*4;

  ellipse(x1, y1, es, es);

  pop();

}

​

let pticks = [];

let ticks = [];

let pt, t;

​

​

function draw() {

  t = millis();

  if (pt === undefined) {

    pt = t;

  }

  background(bhu, sat/2, bright/3);

  noFill();

  stroke(bhu, sat, bright/5, 1);

  strokeWeight(border * 2);

  rect(0, 0, width, height);

  // draw time grid

  const bbright = map(dp, 0, 1, 85, 25);

  stroke(bhu, 85, 5, 0.5);

  strokeWeight(1);

  for (let r = 0; r < 24; r++) {

    const rowSeconds = r * secondsInHour;

    for (let c = 0; c < secondsPerColumn; c++) {

      const x = c * colWidth;

      const y = height - border - ((r + 1) * rowHeight);

      const blockSeconds = rowSeconds + ((c + 1) * iterationLength);

      if (seconds > blockSeconds) {

        fill(hu[0] + (c / secondsPerColumn) * hu[1], sat, bright);

        rect(border + x, y, colWidth, rowHeight);

      }

    }

  }

​

  // draw iteration clock

  if ((t - pt) >= 1000) {

    const buffer = 0.09;

    const a = map(random(0, 1), 0, 1, (-PI / 2 + TAU * (hp + buffer)), (-PI / 2 + TAU * (hp - buffer)));

    const b = min(width, height);

    const r = random(b / 8, b / 2);

    const x = width / 2 + r * cos(a);

    const y = height / 2 + r * sin(a);

    ticks.push({

      x,

      y

    });

    pt = t;

  }

​

  // draw previous ticks and current ticks

  drawTicks(pticks, map(ticks.length, 0, iterationLength * 0.2, 0.2, 0.0));

  drawTicks(ticks, 1);

​

  // change if at iteration length

  if (ticks.length === iterationLength) {

    pticks = [...ticks];

    ticks = [];

    updateClock();

  }

}