17 generator/recursion

[Thenlie]

Massive Generation Refactor! ✅

Some large improvements have been made to the generation algorithm that impact both the speed, representation, and look of the maze. Since this is such a big change. I am going to try to detail it well in this PR. Don't hesitate to ask if you have any questions or suggestions for improvement!

Closes #17

---

Maze Cell Representation

Each maze cell is now represented by an object. This object can be found in /lib/MazeCell.js and looks like the following:

class MazeCell {
    constructor(x, y, visited, top, right, bottom, left) {
        this.x = x; // x coordinate location -- INT
        this.y = y; // y coordinate location -- INT
        this.visited = visited; // checked in search, defaults to False -- BOOL
        this.top = top; // true if wall, false if air --  BOOL
        this.right = right; // ^
        this.bottom = bottom; // ^
        this.left = left; // ^
    }
}

To go along with this new class, a new 2D array creation function has been made that fills and array with these objects. This can be found in /utils/arrayUtil and looks like the following:

const createNew2dArray = (length, width) => {
    // create 2D array of MazeCell's 
    let arr2D = [];
    for (let i = 0; i < length; i++) {
        arr2D.push([]);
    }
    for (let i = 0; i < length; i++) {
        for (let j = 0; j < width; j++) {
            if (arr2D[i]) {
                arr2D[i].push(new MazeCell(i, j, false, true, true, true, true,))
            } 
        }
    }
    return arr2D;
}

As you can see, we are setting all walls to be on by default. This is because it is easier to go through and remove the walls later, rather than adding them back in.

Maze Generation Algorithm

The algorithm itself has also been completely changed. I am now using a stack to track cell positions as we randomly walk through the maze. This stack is a last-in-first-out system. This allows for items to be popped (.pop()) off the stack to backtrack to the previous position.

While this is happening, we use the new objects to track which walls should be removed. When one cell is connected to another, that wall is removed. The breakWalls() function in /components/NewGenerator.vue handles this task. Part of that function looks like the following:

// remove walls where current node is connected to prev node
let curr = arr2D[currX][currY];
let prev = arr2D[stack[stack.length-1].x][stack[stack.length-1].y];
if (curr.x < prev.x) { // up
    arr2D[currX][currY].bottom = false;
    arr2D[stack[stack.length-1].x][stack[stack.length-1].y].top = false
} 

NOTE: We need to remove the borders from two cells for each wall.

At the end of the function, we can loop through all of the cells and style them according to the object they contain. The styleMaze() function in /components/NewGenerator.vue handles this task. Part of that function looks like the following:

for (let i = 0; i < this.length; i++) {
    for (let j = 0; j < this.width; j++) {
        if (!arr2D[i][j].top) { 
            document.getElementById(String(i).padStart(2, '0') + String(j).padStart(2, '0')).style.borderTop = "none" 
        }

Generation Times

I wanted to ensure the generation happens within a reasonable amount of time. To me, this is ~1sec. As you can see below, we are well within that time window.

Maze Size	Time (ms)
10 x 10	3.29
20 x 20	7.85
30 x 30	14.1
50 x 50	31.6
100 x 100	70.8

NOTE: These times were found using the console.time() function. The sample size is 5 and the time is an average.

Screenshots

[maxh1231]

Pro