WOW MAZE!!!

Our sketch is a game where the user has to keep their cursor on the white line and navigate their way to the end and click the red button. We were inspired by the buzz wire game at carnivals where you have to guide a loop along a wire and the buzzer would buzz if you touched the wire.

We decided on creating a path that the user would have passed through with their cursor, without moving out of the border. We started by experimenting on the best way to create the maze. We ended up using ‘arc()’ to get the fluid curves we wanted. The sketch detects when the cursor passes the line using ‘checkColor’. We made the maze completely White (255,255,255,255) and used this line of code. If the second colour level(Blue) on the point was not “=255”, the arcs would jitter, using a “random translation”. We added three lines behind the white line using red, green and blue, to create the effect of glitching when jittered.

Keywords

Game, Interactivity, Mouse, Cursor, checkColor.

Issues encountered

While coming up with the idea was simple enough, figuring out how to execute it took a long time of research and failures. It was initially challenging to understand how certain coordinates such as ‘PI’ and ‘TWO-PI’, but through trial and error and reading through the reference we managed to construct a maze out of the arcs that looked challenging enough. We also initially thought we could put in coordinates the cursor was allowed to be on, or ‘else’ the maze would jitter and accompanying text would tell the user to go back to the line. However, we realized why we did plot out the arcs we could not find every single point in between the two coordinates inputted.

Achievements

We managed to come up with an idea and successfully problem-solved and executed it. We set out to create a buzz wire game but through trial and error, reading references and finding examples, we managed to do what we set out to do.

The sketch

The following sketch was created using the creative coding environment p5js and is called Wow Maze, its original source can be found here. Like the buzz wire game, the only way to win is to reach the end point without touching the wire. If you lose, you'll have to start again. You win when you reach the and and click on the circle!

Feedback we received

While we initially tried to find a way to detect the cursor being on the line through coordinates, we were advised to try to use colour as a tracker instead. We were also advised to have a celebration or reward at the end of our maze as we initially just ended.

Reflection

We worked quite well as a team. We split the workload into different sections that we could piece together after. For example, one of us would create the maze while the other two found ways to detect the mouse. Whenever we faced an issue or roadblock we would split up and try different solutions. When someone had figured out a solution we would copy and continue on that code. This helped us move forward much faster and solve issues faster.