Overview

This is a p5.js sketch inspired by the Coding Train’s Coding Challenge #10 (and part 2, part 3, part 4) on generating a maze.

screenshot-01

I leaned on some concepts from my CS degree, and implemented a depth-first algorithm, similar to this recursive-backtracker noted on Wikipedia.

Additionally, this makes use of the common CellGrid class which I created to facilitate navigating a 2D array, and getting neighbors of a particular index.

A minor implementation note is the treatment of the outer edges. The first and last rows of the 2D Array, as well as the leftmost and rightmost columns are treated as “SOLID”, and thus appear as black squares in the visual drawing. This allowed the code to not worry about undefined neighbors and treat everything as a MazeCell.

Another aspect to note is that MazeCell objects only directly own the walls to the right and downward from their center, and “delegate” the wall references for the ones to the left and upward to their respective neighbors.

This was mostly an exercise having a shared concept (the Wall) be owned by one and only one other object.

class MazeCell {
  constructor(row, col, index, maze){
    ...
    this.rightWall = MazeCell.WALL_UNKNOWN;
    this.bottomWall = MazeCell.WALL_UNKNOWN;
  }

  get cellAbove() { return this.grid.cellAbove(this._idx); }
  get cellToLeft() { return this.grid.cellToLeft(this._idx); }

  get leftWall() { return this.cellToLeft.rightWall; }
  set leftWall(state) { this.cellToLeft.rightWall = state; }

  get topWall() { return this.cellAbove.bottomWall; }
  set topWall(state) { this.cellAbove.bottomWall = state; }

Controls

(No interactivity implemented yet).

References:

Links: