Due: 2016-09-21 11:59p
The goal of this assignment is to generate a simple maze like this one:
There are many maze generation algorithms, but we are going to use a fairly simple one that uses a randomized version of Prim's algorithm, which you may remember from Algorithms. A "perfect" maze (one that is fully connected and has no loops) is basically just a tree that has been folded up.
The algorithm is pretty simple:
Create a grid of cells enclosed by walls
Pick one of your cells, mark it as visited and add all of its walls to a list
While there are walls in the list
a. Remove a wall from the list at random
b. If the cell on the other side of the wall has not been visited,
Mark the cell as visited
Add all of its remaining walls to the list
Remove the wall from the grid
This carves a collection of paths into your grid, creating a maze. The simplest way to handle this is to consider cells and walls to have the same dimensions, so we we can think of a grid where every row or column holds walls. Here is an example with the walls in blue and the cells in white. Note that for this to work and have walls on all four sides of the maze, we need to have an odd number of cells.
Here is the algorithm visually:
The challenge of this assignment is that all we know how to create is points. To draw the maze, set the point size to be the size of one cell of your grid. This will be determined by the canvas size and the dimensions of the maze (which is determined at run time by the user).
So, the first thing you need to establish is the point size. Note that this is canvas dimensions, not WebGL dimensions.
You then need to figure out how to convert from a cell in your maze to a point in WebGL. This involves figuring out where the point lies in our 2x2 box. Note that the point you specify will be the center of the square that gets drawn.
To get you started, I've uploaded some code that provides the HTML and some of the JavaScript functionality that I don't care if you know how to provide.
I've included some stubs to help you arrange your code. I suggest you follow them closely.
You can implement the maze generation however you like. I created a 2D array of 0s and 1s. I indicated a cell or wall was open by changing the 0 to a 1. because of the way the walls lay out, cells in the maze were any place in the 2D array where both the indicies were odd.
For the set of walls to be explored, I created a second array, with each wall stored as a length two array inside (e.g., after the first step above: [[2,5], [3, 4], [4,5]]).
You should write a function that takes in a size (assume it is odd), and returns a 2D array representing your maze. Do not put any WebGL in this function (or any auxiliary functions this function uses). I will provide some simple code for looking at the output of this which assumes that you created a 2D array of 1s and 0s like I did. I suggest using this debugging step before moving to the WebGL.
The points should be generated as one big list and passed down to a VBO on the GPU. The point size should be set dynamically at run time based on the input from the user.
| Points | Criteria |
|---|---|
| 20 | Maze algorithm correctness |
| 5 | point size set correctly |
| 5 | points placed correctly |
| 5 | WebGL correctly set up and displaying |
There are a number of things you could do to play with this some more.
You could add color as a user selected option.
You could identify a start and end in the maze (it is fully connected, so you just need to pick two open squares), and color them differently.
If you really want to get ambitious, you could actually turn this into a proper game. Implement a keyboard listener and move a colored point around the screen, making sure not to let it move if it runs into a wall.
Please zip the directory containing your files and submit it to Assignment one on Canvas.