Send Close Add comments: (status displays here)
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
by RS  admin@robinsnyder.com : 1024 x 640


1. JavaScript: Maze generation with dynamic SVG and D3
This page uses dynamic SVG (Scalable Vector Graphics) and D3 via JavaScript for recursive maze generation.

To compare the same example without D3, see JavaScript: Maze generation with dynamic SVG .

2. Recursive maze generation and visualization
Here are links to a series on recursive maze generation and visualization (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.

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

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.

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

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


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

9. End of page

by RS  admin@robinsnyder.com : 1024 x 640