const tiles = [];

const grid = [];

const dim = 4;

​

const blank = 0;

const up = 1;

const right = 2;

const down = 3;

const left = 4;

​

​

​

​

​

​

​

function preload () {

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

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

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

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

tiles [4] = loadImage("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],

    }

  }

}

​

function draw() {

background(0);

const w = width/dim;

const h = height/dim;

for (let j =0; j< dim; j++)

  {

    for (let i =0; i< dim; i++)

      {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);

       }

       }

​

​

​

​

  }

​

​

​

}