Got it! This site "robinsnyder.com" uses cookies. You consent to this by clicking on "Got it!" or by continuing to use this website. Note: This appears on each machine/browser from which this site is accessed.
JavaScript: Maze generation with dynamic SVG and D3
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.
3. CSS for SVG
Here is the CSS used for the SVG examples (on this page).
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]
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.
4. JavaScript
Here is the JavaScript to connect the HTML to the SVG using the maze generation code (shown after this code).
5. Code notes
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.
6. Algorithm pesudo-code
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.
Here is the JavaScript to generate the SVG content using D3.
8. Code notes
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.