const TILESIZE = 32;

const NUMCELLS = 25;

let CSIZE;

​

let spriteImgs = [];

​

function preload() {

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

    spriteImgs[i] = loadImage(`tiles/${i}.png`);

}

​

function setup() {

  CSIZE = TILESIZE * NUMCELLS;

  createCanvas(CSIZE, CSIZE);

  background(0);

  // pixelDensity(1);

​

  // sprites = [];

  tiles = [];

  grid = [];

  // setupSprites();

​

  const initNumTiles = spriteImgs.length;// sprites.length;

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

    tiles[i] = new Tile(spriteImgs[i]);//sprites[i]);

    tiles[i].index = i;

  }

//   tiles[0] = new Tile(sprites[0]); //, ["AAA", "ABA", "AAA", "ABA"]);

//   tiles[1] = new Tile(sprites[1]); //, ["ABA", "ABA", "ABA", "ABA"]);

//   tiles[2] = new Tile(sprites[2]); //, ["AAA", "AAA", "ABA", "ABA"]);

​

//   for (let i = 0; i < initNumTiles; i++) tiles[i].index = i;

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

    let tempTiles = [];

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

      tempTiles.push(tiles[i].rotate(j));

    }

    tempTiles = removeDuplicatedTiles(tempTiles);

    tiles = tiles.concat(tempTiles);

  }

​

  // Generate the adjacency rules based on edges

  for (let i = 0; i < tiles.length; i++) {

    const tile = tiles[i];

    tile.analyze(tiles);

  }

​

  startOver();

}

​

function startOver() {

  // Create cell for each spot on the grid

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

    grid[i] = new Cell(tiles.length);

  }

}

​

function checkValid(arr, valid) {

  //console.log(arr, valid);

  for (let i = arr.length - 1; i >= 0; i--) {

    // VALID: [BLANK, RIGHT]

    // ARR: [BLANK, UP, RIGHT, DOWN, LEFT]

    // result in removing UP, DOWN, LEFT

    let element = arr[i];

    // console.log(element, valid.includes(element));

    if (!valid.includes(element)) {

      arr.splice(i, 1);

    }

  }

  // console.log(arr);

  // console.log("----------");

}

​

function mousePressed() {

  redraw();

}

​

function draw() {

  background(0);

​

  const w = width / NUMCELLS;

  const h = height / NUMCELLS;

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

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

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

      if (cell.collapsed) {

        let index = cell.options[0];

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

      } else {

        noFill();

        stroke(51);

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

      }

    }

  }

​

  // Pick cell with least entropy

  let gridCopy = grid.slice();

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

  // console.table(grid);

  // console.table(gridCopy);

​

  if (gridCopy.length == 0) {

    return;

  }

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

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

  });

​

  let len = gridCopy[0].options.length;

  let stopIndex = 0;

  for (let i = 1; i < gridCopy.length; i++) {

    if (gridCopy[i].options.length > len) {

      stopIndex = i;

      break;

    }

  }

​

  if (stopIndex > 0) gridCopy.splice(stopIndex);

  const cell = random(gridCopy);

  cell.collapsed = true;

  const pick = random(cell.options);

  if (pick === undefined) {

    startOver();

    return;

  }

  cell.options = [pick];

​

  const nextGrid = [];

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

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

      let index = i + j * NUMCELLS;

      if (grid[index].collapsed) {

        nextGrid[index] = grid[index];

      } else {

        let options = new Array(tiles.length).fill(0).map((x, i) => i);

        // Look up

        if (j > 0) {

          let up = grid[i + (j - 1) * NUMCELLS];

          let validOptions = [];

          for (let option of up.options) {

            let valid = tiles[option].down;

            validOptions = validOptions.concat(valid);

          }

          checkValid(options, validOptions);

        }

        // Look right

        if (i < NUMCELLS - 1) {

          let right = grid[i + 1 + j * NUMCELLS];

          let validOptions = [];

          for (let option of right.options) {

            let valid = tiles[option].left;

            validOptions = validOptions.concat(valid);

          }

          checkValid(options, validOptions);

        }

        // Look down

        if (j < NUMCELLS - 1) {

          let down = grid[i + (j + 1) * NUMCELLS];

          let validOptions = [];

          for (let option of down.options) {

            let valid = tiles[option].up;

            validOptions = validOptions.concat(valid);

          }

          checkValid(options, validOptions);

        }

        // Look left

        if (i > 0) {

          let left = grid[i - 1 + j * NUMCELLS];

          let validOptions = [];

          for (let option of left.options) {

            let valid = tiles[option].right;

            validOptions = validOptions.concat(valid);

          }

          checkValid(options, validOptions);

        }

​

        // I could immediately collapse if only one option left?

        nextGrid[index] = new Cell(options);

      }

    }

  }

​

  grid = nextGrid;

}

​

function removeDuplicatedTiles(tiles) {

  const uniqueTilesMap = {};

  for (const tile of tiles) {

    const key = tile.edges.join(","); // ex: "ABB,BCB,BBA,AAA"

    uniqueTilesMap[key] = tile;

  }

  return Object.values(uniqueTilesMap);

}

​

function setupSprites() {

  let g = createGraphics(TILESIZE, TILESIZE);

  g.background(20);

  g.strokeWeight(1);

  g.stroke(255);

  g.line(0, 16, g.width, 16);

  g.line(0, 15, g.width, 15);

  g.line(0, 17, g.width, 17);

  sprites.push(g);

​

  let g2 = createGraphics(TILESIZE, TILESIZE);

  g2.background(20);

  g2.strokeWeight(1);

  g2.stroke(255);

  g2.line(0, 16, g.width, 16);

  g2.line(0, 15, g.width, 15);

  g2.line(0, 17, g.width, 17);

​

  g2.line(16, 0, 16, g.height);

  g2.line(15, 0, 15, g.height);

  g2.line(17, 0, 17, g.height);

  sprites.push(g2);

​

  let g3 = createGraphics(TILESIZE, TILESIZE);

  g3.background(20);

  g3.strokeWeight(1);

  g3.stroke(255);

  g3.line(0, 16, g3.width / 2, 16);

  g3.line(0, 15, g3.width / 2, 15);

  g3.line(0, 17, g3.width / 2, 17);

​

  g3.line(g3.width / 2 - 1, g3.height / 2, g3.width / 2 - 1, g3.height);

  g3.line(g3.width / 2, g3.height / 2, g3.width / 2, g3.height);

  g3.line(g3.width / 2 + 1, g3.height / 2, g3.width / 2 + 1, g3.height);

  sprites.push(g3);

  let gx = createGraphics(TILESIZE, TILESIZE);

  gx.background(20);

  gx.strokeWeight(1);

  let _y = gx.height/4;//int(random(1,height-1));

  gx.stroke(255);

  for (let x = 0; x < gx.width; x++) {

    if (x < gx.width/4 || x > gx.width*0.75) {

      gx.point(x,_y);

      gx.point(x,_y-1);

      gx.point(x,_y+1);

    }

  }

  sprites.push(gx);

   let gx2 = createGraphics(TILESIZE, TILESIZE);

  gx2.background(20);

  gx2.strokeWeight(1);

   _y = gx2.height*0.75;//int(random(1,height-1));

  gx2.stroke(255);

  for (let x = 0; x < gx2.width; x++) {

    if (x < gx2.width/4 || x > gx2.width*0.75) {

      gx2.point(x,_y);

      gx2.point(x,_y-1);

      gx2.point(x,_y+1);

    }

  }

  sprites.push(gx2);

//   for (let _ = 0; _ < 4; _++) {

//     let gx = createGraphics(TILESIZE, TILESIZE);

//     gx.strokeWeight(1);

//     gx.stroke(255);

//     let y = int(random(height-1));

//     gx.line(0,y,gx.width,y);

//     sprites.push(gx);

//   }

}

​

function reverseString(s) {

  let arr = s.split("");

  arr = arr.reverse();

  return arr.join("");

}

​

function compareEdge(a, b) {

  return a == reverseString(b);

}

​

class Cell {

  constructor(value) {

    this.collapsed = false;

    if (value instanceof Array) {

      this.options = value;

    } else {

      this.options = [];

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

        this.options[i] = i;

      }

    }

  }

}

​

function getEdgeType(col) {

  if (col[0] == 0 && col[1] == 0 && col[2] == 0) return "A";

  else if (col[0] == 255 && col[1] == 0 && col[2] == 255) return "C";

  else return "B";

}

​

class Tile {

  constructor(img, edges=null, i=null) {

    //, edges, i) {

    this.img = img;

    this.edges = []; // edges;

    this.up = [];

    this.right = [];

    this.down = [];

    this.left = [];

​

    if (i !== null) {//undefined) {

      this.index = i;

    }

​

    // generate edges

    // top

    let top = "";

    for (let x = 0; x < this.img.width; x++) 

      top += getEdgeType(this.img.get(x, 0));

    this.edges[0] = top;

    // right

    let right = "";

    for (let y = 0; y < this.img.height; y++) 

      right += getEdgeType(this.img.get(this.img.width-1, y));

    this.edges[1] = right;

    // bottom

    let bottom = "";

    for (let x = this.img.width-1; x >= 0; x--) 

      bottom += getEdgeType(this.img.get(x, this.img.height-1));

    this.edges[2] = bottom;

    // left

    let left = ""

    for (let y = this.img.height-1; y >= 0; y--)

      left += getEdgeType(this.img.get(0,y));

    this.edges[3] = left;

  }

​

  analyze(tiles) {

    for (let i = 0; i < tiles.length; i++) {

      let tile = tiles[i];

​

      // Tile 5 can't match itself

      if (tile.index == 5 && this.index == 5) continue;

​

      // UP

      if (compareEdge(tile.edges[2], this.edges[0])) {

        this.up.push(i);

      }

      // RIGHT

      if (compareEdge(tile.edges[3], this.edges[1])) {

        this.right.push(i);

      }

      // DOWN

      if (compareEdge(tile.edges[0], this.edges[2])) {

        this.down.push(i);

      }

      // LEFT

      if (compareEdge(tile.edges[1], this.edges[3])) {

        this.left.push(i);

      }

    }

  }

​

  rotate(num) {

    const w = this.img.width;

    const h = this.img.height;

    const newImg = createGraphics(w, h);

    newImg.imageMode(CENTER);

    newImg.translate(w / 2, h / 2);

    newImg.rotate(HALF_PI * num);

    newImg.image(this.img, 0, 0);

​

    const newEdges = [];

    const len = this.edges.length;

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

      newEdges[i] = this.edges[(i - num + len) % len];

    }

    return new Tile(newImg, newEdges, this.index);

  }

}

​