Mazes now in 3D!
Probably a surprise to no one, but while going through the maze generation exercise I thought it would be nice to display a maze in 3d.
There is (though I haven’t gotten to it yet) an entire section of the Mazes for Programmers book dedicated to generating mazes that wrap around 3d shapes, like mazes on cubes, spheres, even a möbius strip!
Displaying a maze in 3d isn’t in the scope of the book, but it’s not hard to take the concepts and translate them to 3d.
So I’m back in p5.js looking at its Web GL canvas. Getting a simple grid maze to display in 3d was no problem, just a few minutes of trial and error getting the walls to draw in the correct orientation.
I did run into issues with the camera. A skill issue on my end, it’s just not how I’m used to thinking about 3d cameras. I was trying to get the a camera to traverse the maze along a given path.
While trying to figure out these issues (looking the wrong way, spinning around in circles, clipping through walls, being in the completely wrong place) I ended up creating a debug scene which I’ll share.
Here you can see a red arrow taking the path the camera would take, pointing in the direction the camera should be pointing. Taking the little bit of a time to set this up helped me solve all the issues with positioning / orienting things the correct way, so that is a win.
This example is using the ‘Orbit Control’ built into p5.js, you can use the middle-mouse to zoom in-out, left-button to rotate and right-button to pan.
0 Comments