.______       _______     ___       _______  .___  ___.  _______ 

|   _  \     |   ____|   /   \     |       \ |   \/   | |   ____|

|  |_)  |    |  |__     /  ^  \    |  .--.  ||  \  /  | |  |__   

|      /     |   __|   /  /_\  \   |  |  |  ||  |\/|  | |   __|  

|  |\  \----.|  |____ /  _____  \  |  '--'  ||  |  |  | |  |____ 

| _| `._____||_______/__/     \__\ |_______/ |__|  |__| |_______|

  1) Press the play button in the upper left corner

  2) Tweak the settings below if you'd like

  3) Make sure only to change numbers, not special characters ({[,;://]})etc.

*/

​

const visualSpecs = {

  borderWidth: 50, // How much of a margin there is around the edge of the maze

  edgeLength: 800, // How large the canvase for the maze is (in pixels)

  wallWidth: 2, // How wide the walls are (in pixels)

};

​

const size = {

  cellsPerEdge: 100, // You want big maze?! We have BIG MAZE!! (max about 300)

};

​

const behaviors = {

  stepsPerFrame: 1, // You want maze now?! WE HAVE MAZE NOW!!!

  biforkationRate: 100, // When the path to splits in two (o.O)

  frameRate: 60, // tops out at around 60

};

​

const loopInfinitely = true

// If want to actually solve the thing, turn 'true' to 'false'

​

/***************************************************************

Don't mess with the stuff below here unless you know how to code

***************************************************************/

​

class Cell {

  constructor(x, y, visualSpecs, isRightEdge = false, isBottomEdge = false) {

    this.x = x;

    this.y = y;

    const { wallWidth, edgeLength, offsetX, offsetY } = visualSpecs;

    this.wallWidth = wallWidth;

    this.edgeLength = edgeLength;

    this.walls = {

      top: { value: true },

      right: { value: true },

      bottom: { value: true },

      left: { value: true },

    };

    this.visited = false;

    this.updated = false;

​

    // Create the start and end points for each wall

    this.topLeft = { x: this.x * this.edgeLength + offsetX, y: this.y * this.edgeLength + offsetY };

    this.topRight = { x: (this.x + 1) * this.edgeLength + offsetX, y: this.y * this.edgeLength + offsetY };

    this.bottomLeft = { x: this.x * this.edgeLength + offsetX, y: (this.y + 1) * this.edgeLength + offsetY };

    this.bottomRight = { x: (this.x + 1) * this.edgeLength + offsetX, y: (this.y + 1) * this.edgeLength + offsetY };

​

    // Set the edge flags to help decide which walls to draw

    this.isRightEdge = isRightEdge;

    this.isBottomEdge = isBottomEdge;

  }

​

  drawRect(color) {

    noStroke();

    if (this.visited) fill(...color)

    else fill(255);

    rect(this.topLeft.x - 1, this.topLeft.y - 1, this.edgeLength + 2, this.edgeLength + 2);

  }

​

  drawWalls() {

    stroke(0);

    strokeWeight(this.wallWidth);

​

    if (this.walls.top.value) { line(this.topLeft.x, this.topLeft.y, this.topRight.x, this.topRight.y); }

    if (this.walls.left.value) { line(this.topLeft.x, this.topLeft.y, this.bottomLeft.x, this.bottomLeft.y); }

    if (this.walls.bottom.value) { line(this.bottomLeft.x, this.bottomLeft.y, this.bottomRight.x, this.bottomRight.y); }

    if (this.walls.right.value) { line(this.topRight.x, this.topRight.y, this.bottomRight.x, this.bottomRight.y); }

  }

}

​

class Path {

  constructor(startCell) {

    this.cells = [startCell];

  }

​

  forEach(callback) {

    this.cells.forEach(callback);

  }

​

  pop() {

    this.cells.pop();

  }

​

  push(cell) {

    if (Math.floor(Math.random() * 10) === 0) {

      this.directive = Math.floor(Math.random() * 5)

    }

    this.cells.push(cell);

  }

}

​

class Grid {

  constructor(visualSpecs, size, behaviors) {

    const { edgeLength, wallWidth, borderWidth } = visualSpecs;

    this.offsetX = borderWidth / 2;

    this.offsetY = borderWidth / 2;

    this.edgeLength = edgeLength;

    this.wallWidth = wallWidth;

​

    const { cellsPerEdge } = size;

    this.cellsPerEdge = cellsPerEdge;

​

    const { stepsPerFrame, frameRate, biforkationRate } = behaviors;

    this.stepsPerFrame = stepsPerFrame;

    this.frameRate = frameRate;

    this.biforkationRate = biforkationRate;

​

    this.cells = [];

​

    const cellEdgeLength = (this.edgeLength - borderWidth) / this.cellsPerEdge;

    for (let y = 0; y < cellsPerEdge; y++) {

      for (let x = 0; x < cellsPerEdge; x++) {

        const isRightEdge = x === cellsPerEdge - 1;

        const isBottomEdge = y === cellsPerEdge - 1;

        const visualCellSpecs = {

          wallWidth: this.wallWidth,

          edgeLength: cellEdgeLength,

          offsetX: this.offsetX,

          offsetY: this.offsetY

        };

        this.cells.push(new Cell(x, y, visualCellSpecs, isRightEdge, isBottomEdge));

      }

    }

​

    this.paths = [];

    this.paths.push(new Path(this.cells[0]));

    this.cells[0].visited = true;

    this.cells[0].walls.left = false;

    this.cells.at(-1).walls.right = false;

​

    this.stitchCells();

  }

​

  done() {

    return !this.paths.some((path) => path.cells.length)

  }

​

  draw() {

    // Draw a rectangle for each visited cell

    this.cells.forEach((cell) => {

      if (cell.updated && cell.visited) {

        cell.drawRect([100, 255, 255])

        cell.drawWalls();

        let neighbor = this.getNeighborBottom(cell)

        if (neighbor) neighbor.drawWalls();

        neighbor = this.getNeighborTop(cell)

        if (neighbor) neighbor.drawWalls();

        neighbor = this.getNeighborRight(cell)

        if (neighbor) neighbor.drawWalls();

        neighbor = this.getNeighborLeft(cell)

        if (neighbor) neighbor.drawWalls();

      }

    })

​

    // Draw over the top of some of those, all cells within a path

    this.paths.forEach((path) => {

      path.forEach((cell, cellIndex, array) => {

        if (cell.updated) {

          const isHead = cellIndex === array.length - 1

          if(isHead) cell.drawRect([200, 200, 0])

          else cell.drawRect([cellIndex / 2, cellIndex / 2, 150])

          cell.drawWalls();

          let neighbor = this.getNeighborBottom(cell)

          if (neighbor) neighbor.drawWalls();

          neighbor = this.getNeighborTop(cell)

          if (neighbor) neighbor.drawWalls();

          neighbor = this.getNeighborRight(cell)

          if (neighbor) neighbor.drawWalls();

          neighbor = this.getNeighborLeft(cell)

          if (neighbor) neighbor.drawWalls();

        }

      })

    })

​

    this.cells.forEach((cell) => { cell.updated = false })

  }

​

  getCell(x, y) {

    const cellIndex = y * this.cellsPerEdge + x;

    if (x < 0 || y < 0 || x >= this.cellsPerEdge || y >= this.cellsPerEdge) return null;

    return this.cells[cellIndex];

  }

​

  getNeighborBottom(cell) {

    return this.getCell(cell.x, cell.y + 1);

  }

​

  getNeighborLeft(cell) {

    return this.getCell(cell.x - 1, cell.y);

  }

​

  getNeighborRight(cell) {

    return this.getCell(cell.x + 1, cell.y);

  }

​

  getUnvisitedNeighbors(cell) {

    const neighbors = []

    const top = this.getNeighborTop(cell);

    const right = this.getNeighborRight(cell);

    const bottom = this.getNeighborBottom(cell);

    const left = this.getNeighborLeft(cell);

    if (top && top.visited === false) neighbors.push(top);

    if (right && right.visited === false) neighbors.push(right);

    if (bottom && bottom.visited === false) neighbors.push(bottom);

    if (left && left.visited === false) neighbors.push(left);

    return neighbors.length ? neighbors : false;

  }

​

  getNeighborTop(cell) {

    return this.getCell(cell.x, cell.y - 1);

  }

​

  getRandomNeighbor(cell) {

    const neighbors = this.getUnvisitedNeighbors(cell);

    if (neighbors) return neighbors[Math.floor(Math.random() * neighbors.length)];

    return false;

  }

  setState(state) {

    switch(state) {

      case 'solving': {

        this.cells.forEach(cell => {

          cell.visited = false;

        })

      } break;

    }

  }

​

  step() {

    for (let i = 0; i < this.stepsPerFrame; i++) {

      for (let j = 0; j < this.paths.length; j++) {

        this.visit(j);

      }

    }

  }

​

  stitchCells() {

    this.cells.forEach((cell) => {

      const bottom = this.getNeighborBottom(cell);

      const right = this.getNeighborRight(cell);

​

      // Intentionally setting the object reference to the same object so that removing a wall from one cell removes it from the other

      if (bottom !== null) { cell.walls.bottom = bottom.walls.top; }

      if (right !== null) { cell.walls.right = right.walls.left; }

    })

  }

​

  removeWall(cell, neighbor) {

    if (cell.x < neighbor.x) cell.walls.right.value = false;

    if (cell.x > neighbor.x) cell.walls.left.value = false;

    if (cell.y > neighbor.y) cell.walls.top.value = false;

    if (cell.y < neighbor.y) cell.walls.bottom.value = false;

    cell.updated = true;

    neighbor.updated = true;

  }

​

  visit(pathIndex) {

    const path = this.paths[pathIndex];

    if (!path.cells.length) return;

​

    const cell = path.cells[path.cells.length - 1];

    cell.updated = true

    let adjacentNeedingUpdate = this.getNeighborBottom(cell)

    if (adjacentNeedingUpdate) adjacentNeedingUpdate.updated = true

    adjacentNeedingUpdate = this.getNeighborTop(cell)

    if (adjacentNeedingUpdate) adjacentNeedingUpdate.updated = true

    adjacentNeedingUpdate = this.getNeighborRight(cell)

    if (adjacentNeedingUpdate) adjacentNeedingUpdate.updated = true

    adjacentNeedingUpdate = this.getNeighborLeft(cell)

    if (adjacentNeedingUpdate) adjacentNeedingUpdate.updated = true

​

    if (path.cells.length % this.biforkationRate === 0) { // Biforkation

      this.paths.push(new Path(cell));

    }

​

    const neighbor = this.getRandomNeighbor(cell);

    if (neighbor) {

      neighbor.visited = true;

      path.push(neighbor);

      this.removeWall(cell, neighbor);

    } else {

      path.pop();

    }

  }

}

​

let grid = new Grid(visualSpecs, size, behaviors);

​

function setup() {

  createCanvas(grid.edgeLength, grid.edgeLength);

  background(220);

  frameRate(grid.frameRate);

}

​

function draw() {

  if (grid.done()) {

    background(220);

    grid = new Grid(visualSpecs, size, behaviors);

  }

  grid.step();

  grid.draw();

}

​