The awesomeness of MaKey MaKey

While I’m still preparing some nice little Arduino tutorials for you guys, I thought I’d share a little project I made a while back with MaKey Makey. In all fairness, this project would never have been done without Fraser‘s suggestion, so, big thanks to him because it was a lot of fun in the end :).
For those of you who don’t know what MaKey MaKey is, I’ll present it quickly before explaining the project further. And of course, feel free to have a peek at their website, makeymakey.com, for more info.

1.What is MaKey MaKey?
MaKey MaKey is a simplified Arduino that lets you play with a limited amount of keyboard inputs and mouse events.
It is based on an Arduino Leonardo and has been made to look like a game controller, as you can see on the picture below:

Source: thinkgeek.com

Source: thinkgeek.com


The available inputs are :
– Keyboard: W, A, S, D, F, G, H, J, arrow up, arrow down, arrow left, arrow right, space
– Mouse: right click, left click, up, down, right, left

Why is this awesome? Well, because with a few line of code, some crocodile clips and any conductive objects, you end up making things as crazy as a banana piano!!

Exciting, isn’t it? And with all the discussions at the moment about the importance of teaching kids to code, this is even more exciting! You can have them make fun game controllers in a few minutes. Learning should always be fun. Definitely. More on the subject in an other post, maybe.

Right, so that’s it. Conductive objects, a MaKey Makey, a computer and your language of choice, and there you go! Fun in seconds!
Now, I’ve got a confession, the project that follows was made in ActionScript (guilty!), but could be done in JavaScript so I’ll try and suggest a code for both languages. Let’s have a look, shall we?

2. Interactive Bonfire (Guy Fawkes Day)
The idea came around Guy Fawkes Day last year, when we wanted to make something fun in the office for the evening.
“Let’s burn everyone on a bonfire!” (digitally, of course) was the answer. To avoid any personal vengeance though, (and also because there aren’t 150 inputs on a MaKey MaKey), we had to introduce a bit of randomness. So here’s how it works: each available keyboard input represents a department at work (dev, design, account management, etc.), and each time a key is pressed, someone’s face from the associated department, will appear on the bonfire instead of Guy Fawkes. Simples.

a) The code
Keyboard detection in ActionScript is as simple as this:

stage.addEventListener(KeyboardEvent.KEY_DOWN, detectKey);

function detectKey(event : KeyboardEvent) : void
{
	switch(event.keyCode)
	{
		case 87: //W
			input_txt.text ="W";
			break;
		
		case 65: //A
			input_txt.text ="A";
			break;
		
		case 83: //S
			input_txt.text ="S";
			break;
		
		case 68: //D
			input_txt.text ="D";
			break;
		
		case 70: //F
			input_txt.text ="F";
			break;
			
		case 71: //G
			input_txt.text ="G";
			break;
			
		case 32: //Space
			input_txt.text ="space";
			break;
			
		case 38: //up
			input_txt.text ="up";
			break;
			
		case 40: //down
			input_txt.text ="down";
			break;
			
		case 39: //right
			input_txt.text ="right";
			break;	
			
		case 37: //left
			input_txt.text ="left";
			break;		
	}
}

As promised, I’ll give you the code in JavaScript as well, although it is pretty similar. However, Javascript does a distinction between charCode (unicode value of a character key) and keyCode (unicode value of a non-character key). So we need to introduce a variable which will determine whether a key has a keyCode or a charCode, and here’s the result:

function detectKey(event){
			var unicode=event.keyCode? event.keyCode : event.charCode;

			switch(unicode)
			{
				case 87: //W
					console.log("W");
					break;
				
				case 65: //A
					console.log("A");
					break;
				
				case 83: //S
					console.log("S");
					break;
				
				case 68: //D
					console.log("D");
					break;
				
				case 70: //F
					console.log("F");
					break;
					
				case 71: //G
					console.log("G");
					break;
					
				case 32: //Space
					console.log("space");
					break;
					
				case 38: //up
					console.log("up");
					break;
					
				case 40: //down
					console.log("down");
					break;
					
				case 39: //right
					console.log("right");
					break;	
					
				case 37: //left
					console.log("left");
					break;		
			}
		}
		document.onkeypress=detectKey;

And here it is, keyboard detection all done in 5 minutes! What actually takes long is to associate each key with their unicode.

Once I’ve done that I associate each key to a department, and select a random number within that department. All the employees are stored in an XML file which is formatted as follows:

<people name="Lily" url="lily.png" dept="dev" />

url being a reference to the image of their face. From that XML I’ve created arrays for each department. And the random number is drawn according to the length of each array. Then I load the picture corresponding to the number that was drawn. All good?
For example, say the dev array has a length of 5; I draw a random integer between 0 and 4. If that number is 2, I’ll load the image of the third person in the array (e.g. array[2]).

b) The keyboard
Now, building the physical controls for the animation, that was a bit of a challenge. The main issue being : “how do i close the circuit without the users having to use both their hands (e.g. without having to hold the cable connected to the ground)?” Remember, always require the least amount of actions possible from your users. They will press keys from a keyboard instinctively, but if they need to be told to hold the earth cable as well, it might put them off. All I had as a conductive material was a roll of tin foil (no bananas!), and I also had some cardboard, paper and scissors and that’s pretty much it.
Thanks to Fraser again, I ended up building a giant keyboard, with the base covered in tin foil and hand-size tilting keys, made out of cardboard which had a bit of foil at the back; so whenever you tilt it, it connects with the ground and sends a key press event.
More clarification with this quick sketch:
sketch

Another issue came up when I had to extend the crocodile clips with jump wires because they were too short, but the metallic bits of the wires were touching the base covered in foil, causing an event to be fired. The solution to that was a bit of Sellotape wrapped around them, and here’s the result:

Source : Facebook - Uploaded by glue Isobar

Source : Facebook – Uploaded by glue Isobar

c) Finishing up
To make it all a bit more ‘playful’, I added some fireworks using Flint particles, that would spell out the name of the current Guy Fawkes; and a few explosion and fire sounds.
The keyboard was customised with the available faces for each department, and after only one day, it was ready to go!

Source: Instagram - Photo by daniisbeing

Source: Instagram – Photo by daniisbeing

d) TA-DA!

Source: Instagram - Photo by mandyray

Source: Instagram – Photo by mandyray

It was a great success in the end, everyone had fun playing with it, trying to get their faces up on the screen.
Again, that is why I love MaKey Makey; it is a simple input action (keyboard or mouse interaction, nothing more), but you can do loads of fun stuff with it, and as I mentioned earlier, it’s great to get kids started.

If you’ve got any questions or remarks, feel free to leave a comment! 🙂
More Arduino stuff coming soon, I promise.

Advertisements

One thought on “The awesomeness of MaKey MaKey

  1. Pingback: Whack-a-Grinch | 300 LEDs before Xmas

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s