SpaceIndex

by evgkch

HTML

<canvas id='canvas'></canvas>

JavaScript

function main() {
  const canvasId = 'canvas';
  const canvas = document.getElementById(canvasId);
  const patternCanvas = document.createElement('canvas');

  const gridDim = 3;
  const tileSize = 30;

  canvas.width = (1 << gridDim) * tileSize;
  canvas.height = canvas.width;

  const originX = canvas.width / 2;
  const originY = canvas.height / 2;

  patternCanvas.width = tileSize;
  patternCanvas.height = patternCanvas.width;

  const ctx = canvas.getContext('2d');
  const patternCtx = patternCanvas.getContext('2d');

  // Give the pattern a background color and draw an arc
  patternCtx.strokeStyle = 'gray';
  patternCtx.strokeRect(0, 0, patternCanvas.width, patternCanvas.height);
  patternCtx.stroke();

  const pattern = ctx.createPattern(patternCanvas, 'repeat');
  ctx.fillStyle = pattern;
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  const padLength = (4 ** gridDim - 1).toString(4).length
  for (let i = 0; i < 4 ** gridDim; i++) {
    const path = i
      .toString(4)
      .padStart(padLength, '0')
      .split('')
      .map(Number)

    console.log(path)
  }
}