maze generator

archive/v1/index.html

@@ -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">

archive/v2/index.html

@@ -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>

index.html

@@ -80,15 +80,15 @@
                 </div>
 
                 <div class="about-block">
-                    <span class="about-block-tag tag tag-teal">linux</span>
+                    <span class="about-block-tag tag tag-teal">dev</span>
-                    <p>Long-time Linux user and recovering distro-hopper. Currently: Hyprland on Void. Home server
+                    <p>Fascinated with new languages, frameworks, and shiny tech I probably don’t need. Constantly
-                        running 24/7 for friends and family who didn't ask for it but appreciate it.</p>
+                        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>
+                    <span class="about-block-tag tag tag-yellow">linux</span>
-                    <p>Tutored CS, maths and English through school and uni. Still think the best way to understand
+                    <p>Long-time Linux user and recovering distro-hopper. Currently: Hyprland on Void. Home server
-                        something is to explain it — which is why this site has tutorials.</p>
+                        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>

projects/maze_generation/cells.js

@@ -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);
+    }
+  }
+}

projects/maze_generation/index.html

@@ -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>

projects/maze_generation/sketch.js

@@ -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;
+	}
+
+}