JavaScript: Maze generation with dynamic SVG and D3

Here are links to a series on recursive maze generation and visualization

2021-02-19: Maze algorithm explanation using GIF images
2021-02-22: Lua: Maze generation with static SVG
2021-02-24: JavaScript: Maze generation with dynamic SVG
2021-02-27: JavaScript: Maze generation with dynamic SVG and D3 (this page)
2021-02-25: R: Maze generation using grid
2021-03-04: Julia: Maze generation using Luxor
2021-02-26: Python: Maze generation using PIL
2021-03-04: Java: Maze generation using AWT
2021-03-02: C#: Maze generation

(more coming)

I have been experimenting with SVG as used in, say D3, for visualization graphics for data science applications.

This SVG has not yet been integrated into the system used for scaling for various devices screens.

Here is the CSS used for the SVG examples (on this page).

.rmsSvg {
	border:solid 1px #000000;
	}
.rmsLine {
	stroke:#000000;
	stroke-width:2px;
	stroke-linecap:square;
	}

The rmsSvg is for all SVG images (on this page) and puts a obvious border around the SVG for demonstration purposes.

The rmsLine style is used for the lines in the maze. The body of the SVG code is below.

Here is the SVG code [#1]

<svg id="maze24-01" viewBox="0 0 140 100" width="420" height="300" class="rmsSvg">
</svg>

Many examples on the Internet dynamically create the svg element. The issue then is dynamically placing it in the desired place in the HTML. I often prefer to create the static SVG element in the HTML (Hypertext Markup Language)(with id) exactly where I want it and then find that element from the JavaScript (as done here). Here is how the SVG code appears.

Maze:

Notice that the static SVG code has nothing in it, just an id. The content is added by dynamic JavaScript. This is shown later. But first, a way to use the dynamic nature of the SVG. Here is the HTML for the above buttons.

Maze:
<button onclick="mazeNew1();">New</button>
<button onclick="mazeClear1();">Clear</button>
<button onclick="mazeStart1();">Start</button>
<button onclick="mazeStop1();">Stop</button>
<br/>

Here is the JavaScript to connect the HTML to the SVG using the maze generation code (shown after this code).

var mazeRun1 = 0;
function mazeClear2() {
	svgId1.selectAll("line.rmsLine").remove();
	}
function mazeNew2() {
	mazeClear2();
	mazeMake1(rlen1,clen1,side1,gap1);
	}
function mazeUpdate2() {
	if (mazeRun1 !== 2) {
		mazeNew2();
		}
	else {
		mazeRun1 = 0;
		}
	if (mazeRun1 === 1) {
		setTimeout(mazeUpdate2,1000);
		}
	}
function mazeClear1() {
	if (mazeRun1 === 0) {
		mazeClear2();
		}
	}
function mazeNew1() {
	if (mazeRun1 === 0) {
		mazeUpdate2();
		}
	}
function mazeStart1() {
	if (mazeRun1 === 0) {
		mazeRun1 = 1;
		mazeUpdate2();
		}
	}
function mazeStop1() {
	if (mazeRun1 === 1) {
		mazeRun1 = 2;
		}
	}

The mazeRun1 variable is used to control whether the animation is running and if it is stopping. The "New" and "Clear" buttons do not work during the animation, though no visual indication is provided. This is left as an exercise.

Here is a pseudo-code for the maze generation algorithm as described to make a maze of rows and columns.

Main: Start with an empty canvas. Outline the maze limits with an entry and exit point on opposite sides. Call MazeGenerate with the rows and columns to be filled in. MazeGenerate: If the rows and columns requested are both greater than 1 Then If the height is greater than the width Then Divide the grid into top and bottom parts. Draw a (horizontal) line between the parts, leaving a gap to pass through. Call MazeGenerate on the top part Call MazeGenerate on the bottom part Else Divide the grid into left and right parts. Draw a (vertical) line between the parts, leaving a gap to pass through. Call MazeGenerate on the left part Call MazeGenerate on the right part End If End If

The actual code fills in details that are not needed at the higher level of the algorithm description. For example, the side and gap lengths, and exact x and y coordinates are omitted. As another example, the division into parts can be done using pseudo-random numbers, but that is omitted from the algorithm.

For more information, see the following: Maze algorithm explanation using GIF images

Here is the JavaScript to generate the SVG content using D3.

var svgId1 = d3.select("#maze24-01");
var linesCount1 = 0;
function lineAdd1(n1, x1, y1, x2, y2) {
	if ((x1 !== x2) || (y1 !== y2)) {
		linesCount1 += 1;
		svgId1.append("line")
		.attr("class", "rmsLine")
		.attr("x1",x1)
		.attr("y1", y1)
		.attr("x2", x2)
		.attr("y2",y2);
		}
	}
function mazeMake2(n1, rlen1, clen1, side1, x1, y1) {
	if ((rlen1 <= 1) || (clen1 <= 1)) {
		return;
		}
	var x3 = x1+side1*clen1;
	var y3 = y1+side1*rlen1;
	var n2 = n1+1;
	var r1 = Math.random();
	var c1 = Math.random();
	if (rlen1 > clen1) {
		var cpos1 = Math.floor(c1*clen1);
		var rpos1 = Math.floor(r1*(rlen1-1))+1;
		var x2 = x1+side1*cpos1;
		var y2 = y1+side1*rpos1;
		lineAdd1(n2,x1,y2,x2,y2);
		lineAdd1(n2,x2+side1,y2,x3,y2);
		mazeMake2(n2,rpos1,clen1,side1,x1,y1);
		mazeMake2(n2,rlen1-rpos1,clen1,side1,x1,y2);
		}
	else {
		var cpos1 = Math.floor(c1*(clen1-1))+1;
		var rpos1 = Math.floor(r1*rlen1);
		var x2 = x1+side1*cpos1;
		var y2 = y1+side1*rpos1;
		lineAdd1(n2,x2,y1,x2,y2);
		lineAdd1(n2,x2,y2+side1,x2,y3);
		mazeMake2(n2,rlen1,cpos1,side1,x1,y1);
		mazeMake2(n2,rlen1,clen1-cpos1,side1,x2,y1);
		}
	}
function mazeMake1(rlen1, clen1, side1, gap1) {
	var x1 = side1*gap1;
	var y1 = side1*gap1;
	var x3 = x1+side1*clen1;
	var y3 = y1+side1*rlen1;
	lineAdd1(0,x1,y3,x3,y3);
	lineAdd1(0,x1,y1,x3,y1);
	lineAdd1(0,x1,y1,x1,y3-side1);
	lineAdd1(0,x3,y1+side1,x3,y3);
	mazeMake2(1,rlen1,clen1,side1,x1,y1);
	}
var rlen1 = 8;
var clen1 = 12;
var side1 = 10;
var gap1 = 1;
mazeMake1(rlen1,clen1,side1,gap1);

JavaScript does not have block scope (i.e., using var, newer let does), but using var here (in both branches of a conditional) does not cause any issues.
JavaScript does not have a way to seed the random number generator. A future topic looks at pseudo-random number generation (for simulation and repeatability purposes, not for security purposes).
Each generated line is given an id, though it is not used here.

All previous comments on the general code structure from related pages apply here.