jay/havox
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

maze generator

Browse Source
This commit is contained in:
John Gatward
2026-03-16 19:20:29 +00:00
parent da5879fc6e
commit 6bef2094cb
6 changed files with 272 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
archive/v1/index.html
View File

@@ -104,7 +104,7 @@
<a href="/projects/game_of_life.html">
<p> Game of Life</p>
</a>
<a href="/projects/maze_generation.html">
<a href="/projects/maze_generation/index.html">
<p>Maze Generator</p>
</a>
<a href="/projects/oscillations_in_3d.html">

2
archive/v2/index.html
View File

@@ -119,7 +119,7 @@
href="https://twitter.com/beesandbombs/status/940639806522085376">Bees and Bomb's gif.</a></p>
</div>
<div onclick="window.location='/projects/maze_generation.html'" class="tut_box">
<div onclick="window.location='/projects/maze_generation/index.html'" class="tut_box">
<p class="tut_date">13 Nov 2017</p>
<a class="tutName">Maze Generator</a>
<p>A maze generator built in js.</p>

26
index.html
View File

@@ -80,15 +80,15 @@
</div>
<div class="about-block">
<span class="about-block-tag tag tag-teal">linux</span>
<p>Long-time Linux user and recovering distro-hopper. Currently: Hyprland on Void. Home server
running 24/7 for friends and family who didn't ask for it but appreciate it.</p>
<span class="about-block-tag tag tag-teal">dev</span>
<p>Fascinated with new languages, frameworks, and shiny tech I probably don’t need. Constantly
tinkering, breaking things, and learning just enough to build something cooler next time.</p>
</div>
<div class="about-block">
<span class="about-block-tag tag tag-yellow">teaching</span>
<p>Tutored CS, maths and English through school and uni. Still think the best way to understand
something is to explain it — which is why this site has tutorials.</p>
<span class="about-block-tag tag tag-yellow">linux</span>
<p>Long-time Linux user and recovering distro-hopper. Currently: Hyprland on Void. Home server
running 24/7 for friends and family who didn't ask for it but appreciate it.</p>
</div>
<div class="about-block">
@@ -108,7 +108,7 @@
<div class="v-dot v-dot--current"></div>
<div class="v-content">
<div class="v-title">Havox V4 <span class="v-current-badge">current</span></div>
<div class="v-year">2025 → present</div>
<div class="v-year">2026 → present</div>
<div class="v-desc">Catppuccin Mocha. Single page. Trying to get a new job this time.</div>
</div>
</div>
@@ -117,7 +117,7 @@
<div class="v-dot"></div>
<div class="v-content">
<div class="v-title">Havox V3 <span class="v-link-arrow">↗</span></div>
<div class="v-year">2023 → 2025</div>
<div class="v-year">2022 → 2025</div>
<div class="v-desc">Borrowed a template. Wasn't very 'me'.</div>
</div>
</a>
@@ -135,7 +135,7 @@
<div class="v-dot"></div>
<div class="v-content">
<div class="v-title">Havox.org <span class="v-link-arrow">↗</span></div>
<div class="v-year">2017 → 2019</div>
<div class="v-year">2016 → 2019</div>
<div class="v-desc">Entire site in one PHP file 🤣. Had a daily <s>trump</s>
quote-of-the-day achieved via webscraping a site daily.</div>
</div>
@@ -261,7 +261,7 @@
<span class="card-arrow">→</span>
</a>
<a class="card" href="projects/pi_approximation.html">
<span class="card-date">14 Mar 2018</span>
<span class="card-date">18 Mar 2018</span>
<span class="card-title">Calculating PI</span>
<span class="card-desc">Monte Carlo method — ratio of randomly placed dots in a square vs circle.</span>
<span class="card-arrow">→</span>
@@ -272,7 +272,7 @@
<span class="card-desc">JS implementation of a Bees and Bombs gif.</span>
<span class="card-arrow">→</span>
</a>
<a class="card" href="projects/maze_generator/index.html">
<a class="card" href="projects/maze_generation/index.html">
<span class="card-date">13 Nov 2017</span>
<span class="card-title">Maze generator</span>
<span class="card-desc">A maze generator in p5.js. Using DFS & recursive backtracking.</span>
@@ -312,14 +312,14 @@
<span class="card-arrow">→</span>
</a>
<a class="card" href="tutorials/convex_hull/index.html">
<span class="card-date">22 Sept 2018</span>
<span class="card-date">14 Feb 2018</span>
<span class="card-title">Convex hull generator</span>
<span class="card-desc">Wrapping algorithms — visualising how to find the convex hull of a point
set.</span>
<span class="card-arrow">→</span>
</a>
<a class="card" href="tutorials/tsp/index.html">
<span class="card-date">14 Feb 2018</span>
<span class="card-date">22 Sept 2018</span>
<span class="card-title">Travelling Salesperson Problem</span>
<span class="card-desc">Different implementations of the TSP problem — a classic.</span>
<span class="card-arrow">→</span>

68
projects/maze_generation/cells.js Normal file
View File

@@ -0,0 +1,68 @@
function Cell(i, j) {
this.i = i;
this.j = j;
this.walls = [true, true, true, true];
this.visited = false;
this.checkNeighbors = function() {
var neighbors = [];
var top = grid[index(i, j -1)];
var right = grid[index(i+1, j)];
var bottom = grid[index(i, j+1)];
var left = grid[index(i-1, 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 > 0) {
var r = floor(random(0, neighbors.length));
return neighbors[r];
} else {
return undefined;
}
}
this.highlight = function() {
var x = this.i*w;
var y = this.j*w;
noStroke();
fill(252, 106, 2, 100);
rect(x, y, w, w);
}
this.show = function() {
var x = this.i*w;
var y = this.j*w;
stroke(0);
if (this.walls[0]) {
line(x , y , x + w, y);
}
if (this.walls[1]) {
line(x + w, y , x + w, y + w);
}
if (this.walls[2]) {
line(x + w, y + w, x , y + w);
}
if (this.walls[3]) {
line(x , y + w, x , y);
}
if (this.visited) {
noStroke();
fill(242, 255, 28, 125);
rect(x, y, w, w);
}
}
}

52
projects/maze_generation/index.html Normal file
View File

@@ -0,0 +1,52 @@
<html>
<head>
<meta name="viewport" width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0>
<style>
body {
padding: 0;
margin: 0;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/p5@1.4.0/lib/p5.min.js"></script>
<script src="sketch.js"></script>
<script src="cells.js"></script>
<title>Maze Generator</title>
<style>
body {
font-family: Arial, sans-serif;
background: #fafafa;
margin: 20px;
text-align: center;
}
#container {
max-width: 900px;
margin: 0 auto;
}
h1,
h2,
p {
margin: 10px 0;
}
</style>
</head>
<div id="container">
<h1>Maze Generator</h1>
<p>
Toy maze generator using DFS & recursice back tracking.
</p>
<h2 id="PIbox"></h2>
<h3 id="percentage"></h3>
</div>
<body>
</body>
</html>

137
projects/maze_generation/sketch.js Normal file
View File

@@ -0,0 +1,137 @@
var cols, rows;
var w = 40;
var grid = [];
var current;
var stack = [];
function setup(){
createCanvas(800, 800);
cols = floor(width/w)
rows = floor(height/w)
//frameRate(6);
for (var j = 0; j < rows; j++){
for (var i = 0; i < cols; i++){
var cell = new Cell(i,j);
grid.push(cell);
}
}
current = grid[0];
}
function draw(){
background(150);
for (var i = 0; i < grid.length; i++){
grid[i].show();
}
current.visited = true;
current.highlight();
var next = current.checkNeighbors();
if (next) {
next.visited = true;
stack.push(current);
removeWalls(current, next);
current = next;
} else if (stack.length > 0){
current = stack.pop();
}
}
function index(i, j){
if(i < 0 || j < 0 || i > cols-1 || j > rows-1){
return -1
}
return i + j * cols;
}
function cell(i, j){
this.i = i;
this.j = j;
this.walls = [true, true, true, true];
this.visited = false;
this.checkNeighbors = function(){
var neighbors = [];
var top = grid[index(i, j-1)];
var right = grid[index(i+1, j)];
var bottom = grid[index(i, j + 1)];
var left = grid[index(i-1, 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 > 0){
var r = floor(random(0, neighbors.length));
return neighbor[r];
} else {
return undefined;
}
this.highlight = function(){
var x = this.i*w;
var y = this.j*w;
noStroke();
fill(0, 0, 255, 125);
rect(x,y,w,w);
}
}
this.show = function(){
var x = this.i*w;
var y = this.j*w;
stroke(255);
if (this.walls[0]){
line(x,y,x+w,y);
}
if (this.walls[1]){
line(x+w,y,x+w,y+w);
}
if (this.walls[2]){
line(x+w,y+w,x,y+w);
}
if (this.walls[3]){
line(x,y+w,x,y);
}
if (this.visited){
fill(255, 0, 255, 125);
rect(x,y,w,w);
}
}
}
function removeWalls(a, b){
var 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;
}
var 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;
}
}