const grid = [];

const DIM = 2;

​

const BLANK = 0;

const UP = 1;

const RIGHT = 2;

const DOWN = 3;

const LEFT = 4;

​

function preload() {

  tiles[0] = loadImage("tiles/blank.png");

  tiles[1] = loadImage("tiles/up.png");

  tiles[2] = loadImage("tiles/right.png");

  tiles[3] = loadImage("tiles/down.png");

  tiles[4] = loadImage("tiles/left.png");

}

​

function setup() {

  createCanvas(400, 400);

  for (let i = 0; i < DIM * DIM; i++) {

    grid[i] = { collapsed: false, options: [BLANK, UP, RIGHT, DOWN, LEFT] };

  }

​

  //grid[0].options = [BLANK, UP];

}

​

function draw() {

  background(0);

  let gridCopy = grid.slice();

  gridCopy.sort((a, b) => {

    return a.options.length - b.options.length;

  });

  gridCopy = gridCopy.filter((a) => a.collapsed === false);

  if (gridCopy.length > 0) {

    console.log(gridCopy);

    const cell = random(gridCopy);

    cell.collapsed = true;

    const pick = random(cell.options);

    cell.options[pick];

  }

​

  const w = width / DIM;

  const h = height / DIM;

  for (let i = 0; i < DIM; i++) {

    for (let j = 0; j < DIM; j++) {

      let cell = grid[i + j * DIM];

      if (cell.collapsed) {

        let index = cell.options[0];

        image(tiles[index], i * w, j * h, w, h);

      } else {

        fill(0);

        stroke(255);

        rect(i * w, j * h, w, h);

      }

    }

  }

​

  // image(tiles[0], 0, 0);

  // image(tiles[1], 50, 0);

  // image(tiles[2], 100, 0);

  // image(tiles[3], 150, 0);

  // image(tiles[4], 200, 0);

}

​