hilbert-dots/script.js

/*
Duration: 52 seconds.0:52
Hilbert curve at its sixth iteration

    Alphabet : A, B
    Constants : F + −
    Axiom : A
    Production rules:
*/

console.clear();

const rules = {
  "A": "+BF-AFA-FB+",
  "B": "-AF+BFB+FA-",
};

let steps = 5;

let s = "A";
for(let i=0;i<steps;i++) {
  let ns = "";
  for(let c of s) {
    ns += rules[c] || c;
  }
  s = ns;
}

let [x,y] = [0,0];
const m = 2**(-steps);
let dir = [m,0];
let d = 'M 0 0 ';
const width = 1.5 * 2**-(steps+1);

const dots = [];

for(let c of s) {
  const [dx,dy] = dir;
  switch(c) {
    case '+':
      dir = [-dy,dx];
      break;
    case '-':
      dir = [dy,-dx];
      break;
    case 'F':
      x += dx;
      y += dy;
      d += `l ${dx} ${dy}`;
  }
}

const length = 2**steps - 1;

document.getElementById('curve').setAttribute('stroke-width',width);
document.getElementById('curve').setAttribute('d',d);
document.getElementById('dots').setAttribute('stroke-width',width*0.4);
document.getElementById('dots').setAttribute('d',d);
document.getElementById('dots').setAttribute('stroke-dasharray',`0.0000001 ${2*m}`);

function easeInOutSine(x) {
  return -(Math.cos(Math.PI * x) - 1) / 2;
}

function frame() {
  const period = 1000;
  const t = (new Date()-0)/period % 1000;
  document.getElementById('dots').setAttribute('stroke-dashoffset',(t)*m);
  requestAnimationFrame(frame);
}
frame();