hilbert snail clock

draw hilbert curve once per hour

by asteriskman

HTML

<canvas id='canvas_main' width=800 height=800></canvas>

CSS

body {
  background: hsl(0,0%,10%);
}

canvas {
  background: hsl(0,0%,10%);
  /*background: black;*/
}

JavaScript

const canvas = document.getElementById('canvas_main');
const ctx = canvas.getContext('2d');
const w = canvas.width;
const h = canvas.height;

let nowTime;
let startTime;
let endTime;
function initTimes() {
  nowTime = new Date();
  startTime = new Date(nowTime.getFullYear(), nowTime.getMonth(), nowTime.getDate(), nowTime.getHours())
  endTime = new Date(startTime.getTime() + 1000 * 60 * 60);
}




function timeLeft(startTime, endTime) {
  //let startTime = new Date(); //now
  //let endTime = new Date(2018, 6, 27, 18);
  let duration = endTime - startTime;
  let curTime = new Date();
  let timeLeft = endTime - curTime;
  let timeSplit = {};
  let timeUnsplit = timeLeft;
  timeSplit.days = Math.floor(timeUnsplit/1000/60/60/24);
  timeUnsplit -= timeSplit.days * 1000 * 60 * 60 * 24;
  timeSplit.hours = Math.floor(timeUnsplit/1000/60/60);
  timeUnsplit -= timeSplit.hours * 1000 * 60 * 60;
  timeSplit.minutes = Math.floor(timeUnsplit/1000/60);
  timeUnsplit -= timeSplit.minutes * 1000 * 60;
  timeSplit.seconds = Math.floor(timeUnsplit/1000);
  timeUnsplit -= timeSplit.seconds * 1000;
  timeSplit.milliseconds = timeUnsplit;
  return {totalTime: duration, timeLeft: timeLeft, timeSplit: timeSplit};
}

function textAtPointAndAngle(context, x, y, angle, text) {
  context.save();
  context.translate(x, y);
  context.rotate(-angle);
  context.fillText(text, 0, 0);
  context.restore();
}

function rndRange(min, max) {
  return Math.random() * (max - min) + min;
}

ctx.clearRect(0, 0, w, h);

let cmd = 'A'.split``;



let deltaAngle = Math.PI / 2;

let iterations = 6;
let edgeCount;
for (let i = 0; i < iterations; i++) {
  edgeCount = 0;
  let newCmd = [];
  cmd.forEach(v => {
    switch (v) {
      case 'A':
        newCmd = newCmd.concat('-BF+AFA+FB-'.split``);
        edgeCount += 3;
        break;
      case 'B':
        newCmd = newCmd.concat('+AF-BFB-FA+'.split``);
        edgeCount += 3;
        break;
      case 'F':
        edgeCount++;
        newCmd.push(v);
       ...