leesinliang / custom-maze-generation-animation

Custom Maze Generation with DFS and Finding Shortest Path

Custom Maze Generation (with Animation!)

Figure 1: Maze Generation with DFS Shortest Path Finder (Speed up 2x)

Maze Generation

1. DFS Traversal.
2. Random shuffle 4 directions (Up, Down, Left, Right) while traversing to destination.
3. Repeat step 1-2 with random start coords in main path and random end coords. This will be our available paths to traverse.
4. Once we finished setting our available path, start constructing maze's wall by traversing while making sure wall does not collide with path. Again, the coords are shuffled.
5. Run DFS to find the shortest path to traverse after the maze construction.
6. Voilà!

Resources

• Depth First Search (DFS) Explained
• Flood Fill Animation
• p5.js by TheCodingTrain
• p5.js Official Website

Original Demo (Non speed up)

maze_original.mp4