First Stab with the Makey Makey

So I’ve had a Makey Makey sitting on my desk for a few months, and until last week, I hadn’t even opened the box. After seeing a video of the Makey Makey’s creator Jay Silver on TED back in the winter, I felt inspired and compelled to get one. But as they so often do, work and life get in the way of things, especially creativity. And so the Makey Makey sat on my desk, all but forgotten, until a couple of weeks ago, when my colleagues and I decided to schedule our first technology professional development workshop devoted entirely to “play.”

Rather than simply send out the all-too-commonly unread mass email announcement, or post fliers above the copier machines, we decided to advertise our workshop with whimsical crafts, making use of the same tools we wanted to bring with us to the workshop. Finally, I had a reason to unpackage my Makey Makey, and start playing with the very serious intent of doing “work.”

The Makey Makey is a very simple device, reminiscent of the original Nintendo Entertainment System game controller, but with sharper edges, more holes, and exposed electronic components on the back.

Image  Image

 

It runs off of USB power, and acts as a sort of modified “keyboard” (without any obvious keys). In fact, it would be like having a keyboard for your computer that only consisted of the four arrow keys and a space bar. The sixth input on the Makey Makey functions like a left mouse click. Super simple. The Makey Makey comes with seven colored alligator-clip leads, which you use to create connections between the designated buttons (keys) on the Makey Makey and other conductive objects (spoons, fruit, coins, aluminum foil, etc.). There are also six “ground” input/output connections on the Makey Makey. The “ground” connections serve to complete the circuits you’ll end up constructing to control the buttons (keys) on the Makey Makey. By building these mini circuits, you can control your computer’s interface, such as scrolling up, down, left, or right, entering spaces between text, or clicking on objects. In the video above, Jay Silver shows some examples of this being used to create things like pianos and drums on the computer, but of course, with just a little bit of imagination (and a little bit of computer programming experience), the Makey Makey can do much more.

To advertise for our workshop, I decided to make my own five-key “piano” with the Makey Makey, and the process was made MUCH easier by using some HTML5, Javascript, and some help from Google Coder. The Google Coder site lists a bunch of easy-to-hard web-based projects that are specifically directed towards use with the Raspberry Pi, but are easily adapted for regular computer use. I chose to use their “Music Boxes” project for my Makey Makey for its simple interface and use of HTML5, which I have some experience with.

Image

 

HTML5 is great in that it lets you use media “tags” in your HTML code, rather than fussing with overly complicated syntax or plug-ins like Shockwave. To make a long story short, the Music Boxes project provides you with some basic HTML code and instructions to help create the site picture above, and associate various musical tones (which come with the Music Boxes project download) to the individual colored boxes. The result is that when you click on a box, the browser plays a tone. With a mouse, this means you can play one tone at a time.

Using a combination of HTML and Javascript, however, you can associate the various tone files with keyboard keys, turning your QWERTY keyboard into a virtual synthesizer. Enter the Makey Makey. Using the five Makey Makey buttons (keys), I was able to take the Google Coder Music Box code and write my own little program and create a real-life “synthesizer” that my colleagues and I could play together in our faculty lounge. Here are some images of the result. Not an elegant first stab, I’ll admit, but I have plans in the works for the next iteration already!

Image

Image

Image

 

 

 

Advertisements

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