console.clear();
gsap.registerPlugin(ScrollTrigger);
const svgNS = 'http://www.w3.org/2000/svg';
const $ = document.querySelector.bind(document);
const svg = $('svg');
const hilbertPath = $('#hilbertPath');
const rand = (min, max) => (min + Math.floor(Math.random() * (max - min + 1)));
const tag = (tagName, attrs = {}) => {
  const el = document.createElementNS(svgNS, tagName);  
  Object.entries(attrs).map(([key, val]) => {
    el.setAttribute(key, val);    
  });
  return el;
}
const W = 512;
const H = 512;
svg.setAttribute('viewBox', [
  0,0,
  W, H
].join(' '));

// Hilbert algorithm from 
// https://github.com/marcin-chwedczuk/hilbert_curve

/**
 * Returns offsets of the hilbert curve
 * @param {number} index number between 0..(2^depth^2)-1
 * @param {number} depth
 * @returns [x, y]
 */
function hilbert(index, depth) {
  const N = 2 ** depth;
  const positions = [
    [0, 0],
    [0, 1],
    [1, 1],
    [1, 0]
  ];
  let tmp = positions[index & 3];
  index = index >>> 2;
  let x = tmp[0];
  let y = tmp[1];
  for (let n = 4; n <= N; n *= 2) {
    const n2 = n / 2;
    const bits = index & 3;
    switch (bits) {
      case 0 /* left-bottom */:
        tmp = x;
        x = y;
        y = tmp;
        break;

      case 1 /* left-upper */:
        x = x;
        y = y + n2;
        break;

      case 2 /* right-upper */:
        x = x + n2;
        y = y + n2;
        break;

      case 3 /* right-bottom */:
        tmp = y;
        y = n2 - 1 - x;
        x = n2 - 1 - tmp;
        x = x + n2;
        break;
    }
    index = index >>> 2;
  }
  return [x, y];
}

function getHilbertData(depth) {
  return Array((2 ** (depth)) ** 2)
    .fill(0)
    .map((_, i) => hilbert(i, depth));
}

function getHilbertCoords(data) {
  const depth = Math.log2(data.length) / 2;
  if (depth <= 0) {
    return;
  }
  const N = 2 ** depth;
  const spacing = W / (N + 1);
  const margin = spacing / 2;
  return data.map(([x,y]) => [
    spacing * (x+1), spacing * (y + 1) 
  ]);
}

function pathDef(points) {
  return 'M' + (
    points.map(p => p.join(' ')).join('L'));
}

const paths = Array(6).fill(0).map(
  (_, i) => {
    return getHilbertData(i+1)
  }
);

paths.map((data, i) => {
  const svgPath = tag('path', {
    id: 'path_' + (i + 1),
    d: pathDef(getHilbertCoords(data)),
    class: 'hidden'
  });
  svg.appendChild(svgPath);
});

hilbertPath.setAttribute('d', 
  pathDef(getHilbertCoords(paths[0]))
                        );

const tl = gsap.timeline({
  scrollTrigger: {
    trigger: "#hilbertCurve",
    pin: true,  
    start: "top top",
    end: "+=2000",
    scrub: 1, 
    snap: {
      snapTo: "labels", 
      duration: {min: 0.2, max: 3},
      delay: 0.1, 
      ease: "power1.inOut"
    }
  }

});

tl.addLabel('start')  
  .to('#hilbertPath', { morphSVG: '#path_2'})
  .addLabel('p3')
  .to('#hilbertPath', { morphSVG: '#path_3'})
  .addLabel('p4')
  .to('#hilbertPath', { morphSVG: '#path_4'})
  .addLabel('p5')
  .to('#hilbertPath', { morphSVG: '#path_5'})
  .addLabel('p6')
  .to('#hilbertPath', { morphSVG: '#path_6'})
  .addLabel('end')