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.
Lua: Maze generation with static SVG
1. Lua: Maze generation with static SVG
2. Recursive maze generation and visualization
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.
Here is the Lua code [#1]
4. A 24x16 maze as an image
Here is an example 24x16 maze as a
GIF (Graphics Interchange Format) image from
Maze algorithm explanation using GIF images .
One is to enter at the upper left at the in-arrow and exit at the lower right at the out-arrow without crossing any lines.
A smaller 12x8 maze as
SVG is now developed, without the arrows, to show the method using programming. In this case, off-line Lua code was used to generate the SVG for the maze.
The body of the
SVG code here is statically generated by Lua code (below).
Here is the SVG code [#1]
Here is how the SVG code appears.
Lua code was used to create the
SVG for the lines that appears above.
The Lua code is below.
5. 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
Here is the Lua code used to generate the
SVG.
6. Code notes
The math.randomseed is used to seed the pseudo-random number generator. A different seed results in a different maze. When moving code to other languages, keep in mind that a different random number generator will create a different random number sequence.
Rather than checking before calling mazeMake2, mazeMake2 checks when called on whether to return. This is less machine efficient but allows more compact and clearer code by handling it in one place rather than five places.
In the same manner, checking and not drawing a point is deferred to the lineAdd1 routine.
Global variables were avoided so that gap1 and side1, once set, do not change, but are passed as parameters anyway.
The level parameter n1 is passed to lineAdd1 but not used in this code. It would be used, for example, to color code levels, dynamically animate SVG, etc.
... more to be added ...
Here is the output of the SVG code.
This output of the Lua code was used in the
SVG above.
This is a fairly static way of generating a maze.
The static processing could be done off-line, as is done here, using Lua (above).
The dynamic processing could be done at the server in, say, PHP (omitted).
The dynamic processing could be done at the client in, say , JavaScript (future topic)
Generating the SVG with JavaScript facilitates dynamic interaction with the created SVG. This is the next step.
... more to be added ...
7. End of page
