ArtMaze Generator

Preview image for Maze Generator
Maze Generator

This project is powered by p5.js and originates from this Maze Generator tutorial.

Live example here

Preview of Maze Generator


cell.js

	
	class Cell {
		constructor(i, j) {
			this.i = i;
			this.j = j;
			this.walls = [true, true, true, true];
			this.visited = false;
		}
		
		checkNeighbors() {
			let neighbors = [];
			
			let top    = grid[ this.index(this.i    , this.j - 1) ];
			let right  = grid[ this.index(this.i + 1, this.j    ) ];
			let bottom = grid[ this.index(this.i    , this.j + 1) ];
			let left   = grid[ this.index(this.i - 1, this.j    ) ];
			
			if(top && !top.visited) {
				neighbors.push(top);
			}
			
			if(right && !right.visited) {
				neighbors.push(right);
			}
			
			if(bottom && !bottom.visited) {
				neighbors.push(bottom);
			}
			
			if(left && !left.visited) {
				neighbors.push(left);
			}
			
			if(neighbors.length) {
				let r = floor(random(0, neighbors.length));
				
				return neighbors[ r ];
			} else {
				return undefined;
			}
		}
		
		highlight() {
			let x = (this.i * w);
			let y = (this.j * w);
			
			noStroke();
			fill(0, 0, 255, 100);
			rect(x, y, w, w);
		}
		
		show() {
			let x = (this.i * w);
			let y = (this.j * w);
			
			stroke(255);
			
			if(this.walls[0]) {
				line(x    , y    , x + w, y    );   // top
			}
			
			if(this.walls[1]) {
				line(x + w, y    , x + w, y + w);   // right
			}
			
			if(this.walls[2]) {
				line(x + w, y + w, x    , y + w);   // bottom
			}
			
			if(this.walls[3]) {
				line(x    , y + w, x    , y    );   // left
			}
			
			if(this.visited) {
				fill(255, 0, 255, 100);
				noStroke();
				rect(x, y, w, w);
			}
		}
		
		index(i, j) {
			if((i < 0) || (j < 0) || (i > (cols - 1)) || (j > (rows - 1))) {
				return -1;
			}
			
			return (i + (j * cols));
		}
	}
	

index.html

<!doctype html>
<html>
<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
	
	<title>p5.js - Maze Generator</title>
	
	<script src="lib/p5.min.js"></script>
	<!-- <script src="lib/p5.dom.min.js"></script> -->
	<!-- <script src="lib/p5.sound.min.js"></script> -->
	
	<script src="cell.js"></script>
	
	<script src="sketch.js"></script>
</head>
<body>
	
</body>
</html>

sketch.js

	
	let cols, rows;
	let w = 10;
	let grid = [];
	
	let current;
	
	let stack = [];
	
	function setup() {
		createCanvas(800, 600);
		
		cols = floor(width / w);
		rows = floor(height / w);
		
		for(let y = 0; y < rows; y++) {
			for(let x = 0; x < cols; x++) {
				let cell = new Cell(x, y);
				grid.push(cell);
			}
		}
		
		current = grid[0];
	}
	
	function draw() {
		background(51);
		
		for(let i = 0; i < grid.length; i++) {
			grid[ i ].show();
		}
		
		// step 1
		current.visited = true;
		current.highlight();
		let next = current.checkNeighbors();
		
		if(next) {
			next.visited = true;
			
			// step 2
			stack.push(current);
			
			// step 3
			removeWalls(current, next);
			
			// step 4
			current = next;
		} else if(stack.length) {
			current = stack.pop();
		}
	}
	
	function removeWalls(a, b) {
		let x = (a.i - b.i);
		
		if(x === 1) {
			a.walls[3] = false;
			b.walls[1] = false;
		} else if(x === -1) {
			a.walls[1] = false;
			b.walls[3] = false;
		}
		
		let y = (a.j - b.j);
		
		if(y === 1) {
			a.walls[0] = false;
			b.walls[2] = false;
		} else if(y === -1) {
			a.walls[2] = false;
			b.walls[0] = false;
		}
	}
	
pyxol © 2023
built with React + Next.js