Parallax Snail Clock

Clock showing parallax and "perlin" noise

by asteriskman

HTML

<canvas id='cmain' width='800' height='250'></canvas>
    <img...

CSS

body {
  background: black;
}

canvas {
  background: white;
}

#cmain {
}

#img_snail {
  display: none;
}

JavaScript

const canvas = document.getElementById('cmain');
const ctx = canvas.getContext('2d', {alpha: false});
const imgSnail = document.getElementById('img_snail');

/////////////// begin noise code
//I don't really remember if this is more like perlin noise or simplex noise
function rnd(seed) {
    var x = Math.sin(seed) * 10000;
    return x - Math.floor(x);
}

function pnoise(x, offset) {
    offset = offset|0;
    var x0 = Math.floor(x);
    var x1 = x0 + 1;
    var r0 = rnd(x0+offset);
    var r1 = rnd(x1+offset);
    var dx = x - x0;
    var rx = (r1 - r0) * dx + r0;
    return rx;
}

function fnoise(x,config) {
    var r=0;
    for (var i = 0; i < config.length; i++) {
        var c = config[i];
        var ri = c.a * pnoise(x * c.s, c.s);
        r += ri;
    }
    return r;
}
///////////////// end noise code

function getTimeString(t) {
  let [h,m] = t.toLocaleTimeString().split` `[0].split`:`;
  let baseString = `${h}:${m}`;
  let displayString = baseString;
  return displayString;
}

function drawSky() {
  ctx.fillStyle = '#3998af';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
}

function drawGrass() {
  ctx.fillStyle = 'green';
  ctx.fillRect(0, canvas.height * 0.8, canvas.width, canvas.height * 0.2);

  let noiseConfig = [
    {a: 128, s: 1/8},
    {a: 64,  s: 1/4},
    {a: 16,  s: 1/2},
    {a: 8,  s: 1},
    {a: 4,   s: 2},
    {a: 2,  s: 4},
  ];

  const rate = 1.0;
  const seed = 0;
  const xscale = 10;
  const yscale = 0.6;

  for (let i = 0; i < canvas.width; i++) {
    let c = yscale * fnoise((xpos*rate + i)/xscale, noiseConfig) - 20;

    ctx.strokeStyle = `hsl(123, ${c}%, 33%)`;
    ctx.beginPath();
    ctx.moveTo(i, canvas.height * 0.8);
    ctx.lineTo(i, canvas.height);
    ctx.stroke();
  }
}

let minuteMarkers = [];
let lastMarkerMinute = -1;
function drawMinuteMarkers() {
  let curTime = new Date();
  if (curTime.getMinutes() !== lastMarkerMinute) {
    lastMarkerMinute = curTime.getMinutes();
    minuteMarkers.push({t:...