koch walking snail clock

draw koch snowflake with text instead of lines

by asteriskman

HTML

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

CSS

body {
  background: #36393f;
}

canvas {
  background: #36393f;
}

JavaScript

const canvas = document.getElementById('canvas_main');
const ctx = canvas.getContext('2d');
const w = canvas.width;
const h = canvas.height;
//let speedTimeout;
let offset = 0;
let offsetSpeed = 0;
document.getElementsByTagName('body').item(0).onkeypress = speedUp;
document.getElementsByTagName('body').item(0).onclick = speedUp;

function speedUp() {
  if (offsetSpeed === 0) {
    offset = 0;
  }
  offsetSpeed = 0.0005;
  //clearTimeout(speedTimeout);
  //speedTimeout = setTimeout(() => {offset = 0; offsetSpeed = 0}, 10000);
}

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

function getDayFraction() {
  let curDate = new Date();
  let startOfDay = new Date(curDate.getFullYear(), curDate.getMonth(), curDate.getDate())
  offset += offsetSpeed;
  let snailFraction = 2 * (curDate - startOfDay) / 86400000;
  while  (snailFraction > 1) {snailFraction -= 1;}
  return snailFraction;
}

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

let cmd = 'L--L--L'.split``;



let deltaAngle = Math.PI / 3;

let iterations = 2;
let edgeCount;
for (let i = 0; i < iterations; i++) {
  edgeCount = 0;
  let newCmd = [];
  cmd.forEach(v => {
    switch (v) {
      case 'L':
        newCmd = newCmd.concat('L+L--L+L'.split``);
        edgeCount += 4;
        break;
      case '-':
      case '+':
        newCmd.push(v);
        break;
    }
  });
  cmd = newCmd;
}
let scale = 30;
ctx.font = '8px Courier';
let lineText = 'asterisk_snail';
var text = ctx.measureText(lineText);
let snail = '🐌';
scale = text.width;
ctx.textAlign = 'center';
//ctx.textBaseline = 'middle';
ctx.textBaseline = 'bottom';
let snailFraction = 0;
let snailStep = 0.0001;
let snailAngle = 0;
function draw() {
	let x = 330;
	let y = 20;

  offset += offsetSpeed;
  let dayFraction = getDayFraction();
  let snailFraction = dayFraction + offset; 
  while (snailFraction > 1) {snailFraction -= 1;}
  let diff =...