MakeyMakey-PuzzleMap

Read the clues and find your way through a Makey-Makey connected map!

How it Works

The project uses a computer, a browser page with some JavaScript, and a Makey Makey board in combination with beading wire, electrical wire, a physical painted canvas, paper and a desk easel. The beading wire on the front of the canvas connects to wires on the back to the Makey Makey board and then the computer. Holding the ground connected to the board the user then completes the circuit to enter input into the browser. The browser listens for the input and plays a victory sound if the player presses the keys in the correct order. The page is currently hosted at http://peatm.dev.fast.sheridanc.on.ca/techStudio/.

Each symbol in the solution is attached to a different part of the Makey Makey board. They use the connections for the board for WASDFG. All of the other symbols are wired together and then to the Makey Makey board’s space entry part. The “mystical artifact” that the player must guide is attached to the ground.

The JavaScript on the page takes every input from the map interface and stores them in an array. The array holds up to six values. Whenever a new value is added, it removes the oldest entry of the six and checks to see if the last entered six values matches the expected or correct entry. If this is the case the browser plays victory music.

Tutorial

You Need:

• a computer with a browser, a USB port, and speakers
• a Makey Makey board
• electrical wire (insulated)
• alligator clips (I used 8)
• decorative (but conductive) wire, such as beading wire
• a stretched canvas
• paint (I used acrylic)
• paper
• black tea (I used an orange pekoe teabag)

Step One - Puzzle Design

1. Design symbols
2. Pick a six symbol answer
3. Design map (be careful to avoid getting too close to the edges of the map)
4. Paint/print puzzle
5. Create aged paper for the puzzle hints or story by rubbing a used teabag on some paper and tearing the edges
6. Since mosts pens are water soluble I recommend writing the hints after the paper finishes drying

Step Two - The Wiring

1. Use beading wire to recreate the symbols on the map, poking the wires through to the other side of the canvas. (Some of my designs fell over the wooden frame of the canvas and were more difficult to poke through, so please take that into consideration). I broke the symbols down into small straight segments and added them in like staples. You will have to add wire to both the correct and red herring symbols, otherwise the answer would be pretty obvious.
2. Flip over the canvas and use the insulated electrical wire to attach all of the symbols that are not part of your final solution together. Make sure to strip the wire so the metal of the wire is touching the metal of the beading wire. Note: while you could normally solder the wires together, solder and acrylic paint can probably release unhealthy fumes, and canvas can catch fire, so I used tape.
3. Use an alligator clip to attach the dummy symbols to the space bar part of the Makey-Makey board.
4. Add six male to male wire connectors to the W A S D F G ports on the back of the Makey-Makey board.
5. Use alligator clips to attach the back of each remaining symbol to the other end of its respective wire connector to the Makey-Makey board. The first key to W, the second to A, and so on.
6. Use a last alligator clip and attach it to a ground on the Makey-Makey board and a conductive object that the user will hold while solving the puzzle.
7. Plug in the Makey-Makey board to the computer via USB.

Step Three - The Browser (webpage)

1. In between the head tags of the document use the audio tag to preload any sound you want to play when the puzzle is solved.
2. Write a JavaScript script that listens for “key downs” from the keyboard, stores the entries and checks them against an expected password. In my code the end goal is "W,A,S,D,F,G" and every time a new key is pressed on the map, the value is pushed onto the end of the 6 value password array and the oldest entry is shifted off. The function that pushes and shifts the array does not accept the same key twice in a row to allow for the player accidentally pressing the same key multiple times.
3. If the password is correct the browser plays the selected sound.
4. Please see index.html for more detailed comments on how the JavaScript works.

Step Four – Solve the Puzzle

1. Load the html page onto a browser
2. Display your puzzle! (I used a desk easel to display mine)
3. While holding the ground to the Makey-Makey board in one hand, use the other hand to solve the puzzle.