Skip to content

Maze algorithms implemented in JavaScript - many maze generators and tiling patterns

License

Notifications You must be signed in to change notification settings

mdchaney/jsmaze

Repository files navigation

These are maze generators written in JavaScript.  This includes three
different algorithms: standard recursive, drunk walk, and drunk walk
walls.  The new jsmaze5 series has a more modern codebase.  The
jsmaze6 series includes a few programs that demostrate the maze
building process by allowing the user to advance step by step with
the space bar.  The jsmaze7 series shows a solution after generating a
maze, and runs automatically with a speed control.  The jsmaze8 series
shows a cheap unicursal maze generator, also runs automatically with a
speed control.

jsmaze4.html is a generalized maze generator and can be used to make
mazes with cells of any shape.  It is not necessary for the cells to be
of regular shape, only that every vertex is properly marked with the
walls built between them.

The code as-is includes a number of maze bases that you may choose:
square, diamond, triangular, hexagonal, pentagonal (cairo tiling), and
snub square (mixture of squares and equilateral triangles).  There are
two maze building algorithms: the simple depth-first recursive algorithm
and the drunk walk algorithm.

There are some other simple maze styles that could be made, basically
anything that can tile a plane.  You just have to be able to compute
every vertex and the line segments between them - basically describe it
as a graph.

All accept xsize and ysize parameters as part of the url, i.e.
file:///Users/mdchaney/mazes/jsmaze1.html?xsize=100&ysize=75

jsmaze4.html additionally accepts many other parameters:
xsize, ysize - size of maze
solution=true - show the solution
algo=[recursive|drunk_walk] - choose an algorithm for maze generation
style=[square|triangle|hexagonal|diamond|squaretriangles|snubsquare|snubsquare2|round] -
   set the style for the maze

For example:
file:///Users/mdchaney/mazes/jsmaze4.html?xsize=100&ysize=75&algo=drunk_walk&style=snubsquare

See the code if you wish to add another style or generation algorithm.

The first three mazes create square mazes only and use HTML tables to
draw the completed maze.  jsmaze4.html uses SVG to draw the maze and is
far more rich in possible features.  For instance, the solution is
always available but a style entry can be used to make it visible.
Likewise, all walls are drawn, but again a style is used to hide the
walls that are "open".  It's easy to modify the code to see different
parts of the maze, the base, etc.

The mazes fill in with a color that ranges from bright blue to black
depending on the distance of the square from the entrance.  Note that
because we have the entrance and exits fixed at the corners, the exit
is unlikely to be the farthest point from the entrance.  The entrance is
100% blue, and the farthest point is 0% (black).


The standard recursive algorithm can be seen as follows:

1. Enter a cell, and determine an order in which to visit the other
three adjacent cells.
2. Enter each empty adjacent cell in that order and recurse.

This algorithm makes nice mazes, but there are some limitations.  It is
extremely rare that a single cell will have all four walls open, and in
fact this can happen only when a tunnel loops into a cove created by
itself.  There are other structures which cannot exist, such as two
parallel tunnels with a door between them in the middle.

Nevertheless, this algorithm is popular for its simplicity.  However, on
a normal maze of 100x75, the stack typically overflows in some browsers.
Even in Firefox you will sometimes see a stack overflow if the maze gets
too deep.

It's possible to alter the look of these mazes by changing the chances
involved with the algorithm determining the order in which the various
walls are checked within a cell.  An emphasis on trying "straight"
first, for instance, will result in mazes with longer runs.  An emphasis
on turning first will result in "tight" mazes with lots of twists and
turns.

These mazes are typically smoother than those created by the other two
algorithms.  You will see fewer "dead ends" in these mazes.  These mazes
tend to be the most aesthetically pleasing.


The drunk walk algorithm is based on the concept of drunk-walk fractals.
Instead of growing a regular fractal, though, we use the algorithm to
create a space-filling curve, i.e. a maze.  In this, segments are
created one at a time and grow randomly until they hit another segment,
at which point the two are attached and another segment started at a
random location.  This continues until all cells are filled.


The drunk walk walls algorithm is similar, but instead of growing maze
tunnels we grow the walls.  The walls are essentially the same as a
maze, too, but with the critical difference that there are two distinct
sets of walls and no "path" through them.  You can think of a maze as
two sets of walls that come up to each other but never intersect, and
the maze solution is that path that follows the edge between the two
sets of walls.


The history directory includes some old C programs that I wrote in the
early 1990s to generate mazes.  These are possibly not proper C now but
can probably be compiled with the correct flags.  They generate mazes
in four different display formats:

1. asterisks for walls
2. VT100 line-drawing characters
3. Tektronix 4014 graphics mode
4. ReGIS graphics


The tiling directory has a couple of programs that demostrate how
penrose tiling patterns are generated, as well as a demo for snubsquare
and cairo as a dual tiling.

These are for your amusement or to learn more.  I hope the code is
clean enough for you to work with if you choose.  Enjoy!

Released under the MIT license, see included file.

Requires no other files, each html file has all code and style
information.

About

Maze algorithms implemented in JavaScript - many maze generators and tiling patterns

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published