Trying to port some of the code into objects to clean up the sketch.js file.
This commit is contained in:
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
+88
@@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
+55
@@ -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>
|
||||
@@ -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;
|
||||
}
|
||||
Reference in New Issue
Block a user