html,
body {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  margin: 0;
}

canvas {
  margin: auto;
  display: block;
  box-shadow: 0px 2px 12px -2px rgb(0 0 0 / 15%);
}

const simplex = new SimplexNoise();

const settings = {
  animate: true,
  duration: 8,
  scaleToView: true,
  scaleToFit: true
};

// const glyphs = ['↑', '↗', '→', '↘', '↓', '↙', '←', '↖', '✳'];
// const glyphs = ['◧', '◨', '◩', '◪', '■', '□', '⬒', '⬓', '⬕'];
const glyphs = ["¤", "✳", "●", "◔", "○", "◕", "◐", "◑", "◒"];

canvasSketch(() => {
  const gridSize = 20;
  const frequency = 1 / (gridSize * 2);

  return ({ context, width, height, playhead }) => {
    context.clearRect(0, 0, width, height);
    context.fillStyle = "#001";
    context.fillRect(0, 0, width, height);

    const time = Math.sin(playhead * 2 * Math.PI);
    const padding = height * 0.15;
    const tileSize = (height - padding * 2) / gridSize;

    for (let x = 0; x <= gridSize; x++) {
      for (let y = 0; y <= gridSize; y++) {
        // Get the noise value
        const n = simplex.noise3D(x * frequency, y * frequency, time);
        // Map the noise to glyphs array
        const glyph = Math.floor(mapRange(n, -1, 1, 0, glyphs.length - 1));

        const position = [
          mapRange(x, 0, gridSize, padding, width - padding),
          mapRange(y, 0, gridSize, padding, height - padding)
        ];

        // Visualize the grid
        context.font = `400 ${tileSize * 0.75}px 'monospace'`;
        context.textAlign = "center";
        context.textBaseline = "middle";
        context.fillStyle = "#fff";
        context.fillText(glyphs[glyph], position[0], position[1]);
      }
    }
  };
}, settings);

function mapRange(value, inputMin, inputMax, outputMin, outputMax) {
  if (Math.abs(inputMin - inputMax) < Number.EPSILON) {
    return outputMin;
  } else {
    var outVal =
      ((value - inputMin) / (inputMax - inputMin)) * (outputMax - outputMin) +
      outputMin;

    return outVal;
  }
}