// It makes me very sad we still have to do this in 2019
const AudioContext = window.AudioContext || window.webkitAudioContext;

let raf;
let audioContext;

if (raf) {
  cancelAnimationFrame(raf);
}

const perlin3 = new tumult.Perlin3("week2" + Date.now());

const piece = document.body.querySelector("#piece");
const canvas = document.createElement("canvas");
const context = canvas.getContext("2d");

let dpr;
let canvasSize;
let canvasSizeDpr;
let cells = 64;
let cellSize;
let cellSizeHalf;
let points;
let energyDivision = 10;

let loop;

piece.appendChild(canvas);

function setupValues() {
  dpr = window.devicePixelRatio;
  canvasSize = 500;
  canvasSizeDpr = canvasSize * dpr;
  cellSize = canvasSizeDpr / cells;
  cellSizeHalf = cellSize / 2;
  points = [];

  canvas.width = canvas.height = canvasSize * dpr;
  canvas.style.maxWidth = `${canvasSize}px`;
  canvas.style.maxHeight = `${canvasSize}px`;
  context.strokeStyle = "#fff";
  context.lineWidth = dpr;
  generatePoints();
}

function generatePoints() {
  let y = 0;
  let x = 0;

  for (let i = 0; i < cells * cells; ++i) {
    points[i] = [x, y];

    if (i % cells === cells - 1) {
      x = 0;
      y += cellSize;
    } else {
      x += cellSize;
    }
  }
}

(async function() {
  let stream = null;

  try {
    stream = await navigator.mediaDevices.getUserMedia({
      audio: {
        echoCancellation: false
      }
    });
  } catch (err) {
    throw new Error(err);
  }

  if (audioContext) audioContext.close();
  audioContext = new AudioContext({
    latencyHint: "interactive"
  });

  const source = audioContext.createMediaStreamSource(stream);

  const meyda = new Meyda.createMeydaAnalyzer({
    audioContext,
    source,
    bufferSize: 512,
    windowingFunction: "rect"
  });

  function drawGrid(delta) {
    const energy = meyda.get("energy");
    context.beginPath();
    for (let i = 0; i < points.length; ++i) {
      const mod1 = i % cells === 0;
      const mod2 = i % cells === cells - 1;

      if (mod1) {
        context.beginPath();
      }
      const x = points[i][0];
      const y = points[i][1];

      const noise = perlin3.gen(x / 255, y / 255, delta / 1000);
      const size = noise * (energy / energyDivision);

      let posX;
      let posY;

      if (mod1) {
        posX = x + cellSizeHalf;
        posY = y + cellSizeHalf;
      } else if (mod2) {
        posX = x + cellSizeHalf;
        posY = y + cellSizeHalf;
      } else {
        posX = x + cellSizeHalf + cellSizeHalf * size;
        posY = y + cellSizeHalf + cellSizeHalf * size;
      }
      
      // Adding 0.5 is a slight hack for Canvas2D.
      // Makes pixels render on "real" pixels,
      // rather than sub-pixel aliasing everything
      posX = Math.floor(posX) + 0.5;
      posY = Math.floor(posY) + 0.5;

      context.lineTo(posX, posY);
      if (mod2) {
        context.stroke();
      }
    }
  }

  setupValues();

  loop = delta => {
    raf = requestAnimationFrame(loop);
    context.fillRect(0, 0, canvasSizeDpr, canvasSizeDpr);
    drawGrid(delta);
  };
  raf = requestAnimationFrame(loop);
})();

const input = document.createElement("input");
input.type = "range";
input.min = 4;
input.max = 128;
input.value = cells;
input.step = 4;
input.addEventListener("input", e => {
  cells = parseFloat(e.target.value, 10);
  setupValues();
});

piece.appendChild(input);

const input2 = document.createElement("input");
input2.type = "range";
input2.min = 1;
input2.max = 20;
input2.value = 21 - energyDivision;
input2.step = 0.01;
input2.addEventListener("input", e => {
  energyDivision = 21 - parseFloat(e.target.value, 10);
  setupValues();
});

piece.appendChild(input2);