if (t > 1) return b

  if (t <= 0) return a

  return (t * parseFloat(b)) + ((1 - t) * parseFloat(a))

}

​

const wrap = (n) => n - Math.floor(n)

​

const addMinute = (time) => new Date(time.getTime() + 60000)

​

function setup() {

  createCanvas(600, 200); 

}

​

function decToBinaryFloats(dec) {

  let bin = (dec).toString(2);

  bin = bin.padStart(6, "0")

  const arr = bin.split("").map( c => parseFloat(c));

  return arr;

}

​

​

​

function drawBlocks(x, y, now, future, theta) {

  const size = Math.floor(width / (now.length * 2))

  for (let i = 0; i < now.length; i++) {

    const f = lerp_(now[i], future[i], theta)

    const brightness = 255 * f**2

    stroke(0)

    fill(brightness)

    rect(x, 0, size, height)

    rect(x, 0 + height - 2, size, 2)

    x += size

  }

}

​

function drawTime(now_h, future_h, now_m, future_m, theta) {

  let x = 0

  drawBlocks(x, 0, now_h, future_h, theta)

  x += width/(now_h.length * 2)

  drawBlocks(x, 0, now_m, future_m, theta)

}

​

let draw_width = 0

​

function draw() {

  background(0)

  const now = new Date()

  const future = addMinute(now)

  const fractional = now.getMilliseconds() / 1000

  const seconds    = now.getSeconds() + fractional

  const theta      = seconds / 60

  const now_minutes    = decToBinaryFloats(now.getMinutes())

  const now_hours      = decToBinaryFloats(now.getHours())

  const future_minutes = decToBinaryFloats(future.getMinutes())

  const future_hours   = decToBinaryFloats(future.getHours())

  const size = width/12

  drawTime(now_hours, future_hours, now_minutes, future_minutes, theta)

  fill(120)

  text( future.getHours().toString(2).padStart(6, "0"), 20, 20 )

  text( future.getMinutes().toString(2).padStart(6, "0"), 120, 20 )

}