Trying to port some of the code into objects to clean up the sketch.js file.

cell.js

@@ -0,0 +1,89 @@
+
+class Cell {
+
+	constructor(x, y, cellWidth){
+		this.x = x;
+		this.y = y;
+		this.walls = [true, true, true, true];
+		this.selected = false;
+		this.visited = false;
+		this.cellWidth = cellWidth;
+		this.searched = false;
+		this.finalPath = false;
+		this.parent = undefined;
+		this.end = false;
+		this.start = false;
+	}	
+	
+	get top(){
+		return this.walls[0];
+	}
+	
+	set setTop(removed){
+		this.walls[0] = removed;
+	}
+	
+	get left(){
+		return this.walls[1];
+	}
+	
+	set setLeft(removed){
+		this.walls[1] = removed;
+	}
+	
+	get bottom(){
+		return this.walls[2];
+	}
+	
+	set setBottom(removed){
+		this.walls[2] = removed;
+	}
+	
+	get right(){
+		return this.walls[3];
+	}
+	
+	set setRight(removed){
+		this.walls[3] = removed;
+	}
+	
+	show(){
+		let x = this.x * this.cellWidth;
+		let y = this.y * this.cellWidth;
+		
+		stroke(0);
+		
+		if (this.top) line(x, y, x + this.cellWidth, y);
+		if (this.right) line(x + this.cellWidth, y, x + this.cellWidth, y + this.cellWidth);
+		if (this.bottom) line(x + this.cellWidth, y + this.cellWidth, x, y + this.cellWidth);
+		if (this.left) line(x, y, x, y + this.cellWidth);
+		
+		if (this.visited) {
+		  fill(255, 0, 0);
+		  noStroke();
+		  rect(x, y, this.cellWidth, this.cellWidth);
+		}
+		
+		if(this.searched){
+		  fill(210, 180, 140);
+		  noStroke();
+		  rect(x, y, this.cellWidth, this.cellWidth);			
+		}
+		
+		if (this.selected) {
+		  fill(50, 125, 0);
+		  noStroke();
+		  rect(x, y, this.cellWidth, this.cellWidth);
+		}
+		
+		if(this.finalPath){
+		  fill(173, 216, 230);
+		  noStroke();
+		  rect(x, y, this.cellWidth, this.cellWidth);	
+		}
+		
+		if(this.start){
+			text("Start", x, y + cellWidth / 2);
+		}
+	}
+}

gen-maze.js

@@ -0,0 +1,88 @@
+class Maze{
+	constructor(mazeWidth, mazeHeight, cellWidth){
+		this.columns = floor(mazeWidth / cellWidth);
+		this.rows = floor(mazeHeight / cellWidth);
+		this.width = mazeWidth;
+		this.height = mazeHeight;
+		this.cellWidth = cellWidth;
+		this.workingStack = [];
+		this.currentCell = {};
+		this.grid = [];
+		
+	    for (let y = 0; y < this.rows; y++) {
+			for (var x = 0; x < this.columns; x++) {
+		  		this.grid.push(new Cell(x, y, this.cellWidth));
+			}
+	    }
+	    
+	    this.grid[this.index(0,0)].visited = true;
+	    this.grid[this.index(0,0)].selected = true;
+	    this.workingStack.push(this.grid[this.index(0,0)]);
+	}
+	
+	updateMazeDisplay(){
+	  for (var i = 0; i < this.grid.length; i++) {
+		this.grid[i].show();
+	  }
+	}
+	
+	buildNextCell(){
+	  	//Build the maze
+		this.currentCell = this.workingStack.pop();
+		//currentCell.visited = true;
+	  	let nextCell = getNeighbors(this.currentCell);
+	  	
+	  	if(nextCell){
+		   	this.workingStack.push(this.currentCell);
+		  	currentCell.Selected = false;
+		  	currentCell.visited = true;
+		  	nextCell.visited = true;
+		  	nextCell.selected = true;
+	  		removeWalls(currentCell, nextCell);
+	  		this.workingStack.push(nextCell);
+	  	} 
+	  	else 
+	  		this.workingStack.pop();
+	  	
+	  	this.currentCell.selected = false;	
+	}
+	
+	get mazeGenDone() {
+		return this.workingStack.length == 0;
+	}
+	
+	getNeighbors(cell){
+		var visited = [];
+		
+		var top = this.grid[index(cell.x, cell.y - 1)];
+		var left = this.grid[index(cell.x - 1, cell.y)];
+		var bottom = this.grid[index(cell.x, cell.y + 1)];
+		var right = this.grid[index(cell.x + 1, cell.y)];
+		
+		if (top && !top.visited) {
+		  visited.push(top);
+		}
+		if (left && !left.visited) {
+		  visited.push(left);
+		}
+		if (right && !right.visited) {
+		  visited.push(right);
+		}
+		if (bottom && !bottom.visited) {
+		  visited.push(bottom);
+		}
+		
+		if(visited.length == 1) 
+			return visited[0];
+		else if (visited.length > 1)
+		  	return visited[floor(random(0, visited.length))];
+		else 
+			return undefined;
+	}	
+
+	index(x, y) {
+	  if (x < 0 || y < 0 || x > this.columns - 1 || y > this.rows - 1) return -1;
+	  return x + y * this.columns;
+	}
+	
+}

index.html

@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>p5.js example</title>
+  <style>
+    body {
+      padding: 0;
+      margin: 0;
+    }
+    
+    .column {
+    	float: left;
+    }
+    
+	/* Clear floats after the columns */
+	.row:after {
+	  content: "";
+	  display: table;
+	  clear: both;
+	}
+  </style>
+  <script>
+  
+  
+  </script>
+  <script src="cell.js"></script>
+  <script src="../p5.js"></script>
+  <script src="../addons/p5.sound.min.js"></script>
+  <script src="sketch.js"></script>
+</head>
+
+<body>
+	<div id="sketch-holder" class="column"></div>
+	<div class="column">
+		<form action="">
+			<label for="canvasWidthTextbox" >Canvas Size Width: </label><input type="number" id="canvasWidthTextbox" value="400"/>
+			<label for="canvasHeighTextbox"> Height: </label><input type="number" id="canavasHeightTextbox" value="400"/><br/>
+			<label for="genFrameRate">Framerate During Maze Generation: </label><input type="number" id="genFrameRate" min="1" max="144" step="1" value="30"/><br />
+			<label for="searchAlgo">Search Algorithm to Find Maze Anwser: </label>
+			<select id="searchAlgo">
+				<option value="depthFirst">Depth First</option>
+				<option value="breadthFirst">Breadth First</option>
+			</select><br />
+			<label for="solvingFrameRate">Framerate During Maze Solving: </label><input type="number" id="solvingFrameRate" min="1" max="144" step="1" value="30"/><br />
+			<input id="reuseMaze" type="checkbox" checked="true"/><label for="reuseMaze">Reuse current maze on next run</label>
+			<br /><button type="button" onClick="draw();">Again</button>		
+		</form>
+
+	</div>
+</body>
+
+</html>

sketch.js

@@ -0,0 +1,191 @@
+var cellWidth = 50;
+var columns = 0;
+var rows = 0;
+var grid = [];
+//var currentCell;
+var cellStack = [];
+var frontier = [];
+var explored = [];
+var currentNode = {};
+var maze = {};
+
+function setup() {
+  var canvas = createCanvas(500, 500);
+  canvas.parent('sketch-holder');
+  maze = new Maze(width, height, cellWidth);
+  frameRate(60);
+
+  rows = floor(width / cellWidth);
+  columns = floor(height / cellWidth);
+
+  for (let y = 0; y < rows; y++) {
+    for (var x = 0; x < columns; x++) {
+      grid.push(new Cell(x, y, cellWidth));
+    }
+  }
+
+  //currentCell = grid[0];
+  grid[0].visited = true;
+  grid[0].selected = true;
+  cellStack.push(grid[0]);
+}
+
+function draw() {
+  background(220);
+
+  for (var i = 0; i < grid.length; i++) {
+    grid[i].show();
+  }
+  
+  if(cellStack.length > 0){
+  	//Build the maze
+	let currentCell = cellStack.pop();
+	//currentCell.visited = true;
+  	let nextCell = getNeighbors(currentCell);
+  	
+  	if(nextCell){
+	   	cellStack.push(currentCell);
+	  	currentCell.Selected = false;
+	  	currentCell.visited = true;
+	  	nextCell.visited = true;
+	  	nextCell.selected = true;
+  		removeWalls(currentCell, nextCell);
+  		cellStack.push(nextCell);
+
+  	} else cellStack.pop();
+  	
+  	currentCell.selected = false;
+  }
+  else if (cellStack.length == 0 && frontier.length == 0 && explored.length == 0){
+	for (var i = 0; i < grid.length; i++) {
+		grid[i].visited = false;
+	}
+	
+	print("Maze generation done");
+	
+	grid[index(0, 0)].selected = true;
+	grid[index(0, 0)].visited = true;
+	grid[index(0, 0)].searched = true;
+	grid[index(0, 0)].start = true;
+	currentNode = grid[index(0, 0)];
+	
+	frontier.push(grid[index(0, 0)]);
+	frameRate(5);
+  }
+  else if (cellStack.length == 0 && frontier.length > 0){
+    currentNode.selected = false;
+	currentNode = frontier.shift();
+	
+	let neighbors = getAllNeighbors(currentNode);
+	
+	currentNode.searched = true;
+	currentNode.selected = true;
+	
+	for(let index = 0; index < neighbors.length; index++){
+		frontier.push(neighbors[index]);
+		neighbors[index].parent = currentNode;
+	}
+	
+	explored.push(currentNode);
+	
+	if(currentNode.x == 9 && currentNode.y == 9)
+		//currentNode.end = true;
+		frontier = [];	
+  }
+  else{
+  	tmp = explored.pop();
+  	
+  	while (tmp.parent != undefined) {
+  		tmp.finalPath = true;
+  		tmp = tmp.parent;
+  	}
+  	grid[index(0, 0)].finalPath = true;
+  	
+	for (var i = 0; i < grid.length; i++) {
+    	grid[i].show();
+  	}
+  	
+  	
+  	print("Maze search done");
+  	noLoop();
+  }
+}
+
+function index(x, y) {
+  if (x < 0 || y < 0 || x > columns - 1 || y > rows - 1) return -1;
+  return x + y * columns;
+}
+
+function removeWalls(a, b) {
+  var x = a.x - b.x;
+  var y = a.y - b.y;
+  
+  if (x === -1) {
+	a.setRight = false;
+	b.setLeft = false;
+  } else if (x === 1) {
+	a.setLeft = false;
+	b.setRight = false;
+  }
+
+  if (y === -1) {
+	a.setBottom = false;
+	b.setTop = false;
+  } else if (y === 1) {
+	a.setTop = false;
+	b.setBottom = false;
+  }
+}
+
+function getAllNeighbors(cell){
+	var Neighbors = [];
+	
+	var top = grid[index(cell.x, cell.y - 1)];
+	var left = grid[index(cell.x - 1, cell.y)];
+	var bottom = grid[index(cell.x, cell.y + 1)];
+	var right = grid[index(cell.x + 1, cell.y)];
+	
+    if (top && !top.searched && !cell.top) {
+      Neighbors.push(top);
+    }
+    if (left && !left.searched && !cell.left) {
+      Neighbors.push(left);
+    }
+    if (right && !right.searched && !cell.right) {
+      Neighbors.push(right);
+    }
+    if (bottom && !bottom.searched && !cell.bottom) {
+      Neighbors.push(bottom);
+    }
+    
+    return shuffle(Neighbors);
+}
+
+function getNeighbors(cell){
+	var visited = [];
+	
+	var top = grid[index(cell.x, cell.y - 1)];
+	var left = grid[index(cell.x - 1, cell.y)];
+	var bottom = grid[index(cell.x, cell.y + 1)];
+	var right = grid[index(cell.x + 1, cell.y)];
+	
+    if (top && !top.visited) {
+      visited.push(top);
+    }
+    if (left && !left.visited) {
+      visited.push(left);
+    }
+    if (right && !right.visited) {
+      visited.push(right);
+    }
+    if (bottom && !bottom.visited) {
+      visited.push(bottom);
+    }
+    
+    if(visited.length == 1) 
+    	return visited[0];
+    else if (visited.length > 1)
+      	return visited[floor(random(0, visited.length))];
+    else 
+    	return undefined;
+}