I really like my phone because of the way I can seamlessly interact with its touch screen – among many other things. Most touch screens nowadays utilize capacitive touch sensing technology (which I’ll explain later), so this project is my little way of exploring this amazing technology at a very rudimentary level. As you’ll soon find out, my project ended up going much further than I had initially anticipated, and resulted in the creation of a homemade video game which I played with a homemade controller and (you guessed it) the controller uses homemade capacitive touch sensors! Check out a video of it in action:
In actuality, the project is extremely simple, so I’ll explain it briefly first. The capacitive touch sensors may sound fancy, but all they are doing is reacting to my body’s natural capacitance – that is, the charge I have stored in my body. Perhaps you have heard of a very common electrical component called a capacitor. A capacitor consists of two conductive ‘plates’ with a dielectric insulator in the middle and it’s used in everything from power supplies to radios. I’ll get into more detail later, but in our case, the negatively charged plate is our body (ground), the positively charged one is the connection we have with the Arduino, and the dielectric insulator is our skin! Cool, eh?
That’s where the aluminum contacts come in. They give me a nice and big area to touch with my finger and, consequently charge the ‘capacitor’ (body | skin | aluminum). An Arduino is programmed to detect how long it takes for this makeshift capacitor to reach a higher potential, and if the capacitance is high enough, then the Arduino will be able to pick up the change in potential and let us know when it occurs. I have six of these pins set up to give me Left, Right, Up, Down, A, and B controls. The video game is even simpler, but I will admit that it seemed a little daunting at first and I was quite close to giving up. In retrospect, I’m glad I pulled up my socks and wrote one for myself, line for line. I have a detailed explanation of how the game works later on in the post but in case you are wondering, I made it Spongebob themed as a tribute to a show I used to watch and enjoy a lot.
Be sure to let everyone know what your high score is by leaving a comment below!
This project was not very resource intensive. As long you have the extremely versatile Arduino or an equivalent ATmega microcontroller with the Arduino bootloader, it would be as simple as uploading my code, and hooking up the pins. What I used for this project was:
I used one loaded with the Arduino bootloader, imitating an Arduino Duemilanove. Any Arduino will do, as well as any other ATmega microcontroller.
- Small piece of conductive material
I used a tiny strip of aluminum, and cut out the tabs which would act as the buttons to touch. Any conductive material which you connect wires to in some way will suffice.
I cut out a piece of foam to use as the housing for my aluminum squares, and give my controller the NES styled shape I was going for.
I used wire jumpers to connect everything from the breadboard to the Arduino (see circuit diagram below), and 24 AWG wire to solder the aluminum contacts to.
- 1 Mega Ohm Resistors
Depending on how many buttons you want, you’ll need one resistor each.
That’s all you need. Take one hour, and the above materials which would cost you less than a dollar (except the microcontroller which would cost you anything from $1.50 to $20 but can be used for uncountable projects, definitely a great investment), and you’ve got your very own capacitive touch sensing game controller!
If you want to write the video game to interface your controller with all on your own, you’ll need a few hours to get a good grip on the language (assuming you have a relatively decent programming background). If you don’t have programming experience, don’t worry. This is the easiest language I have ever used, and it’s an absolutely perfect place to start. In fact, the Processing IDE and syntax is exactly the same as the Arduino’s! Download Processing here.
Click to enlarge
- The idea for this project was born after reading Alan Chatham’s awesome Instructable: Turn a pencil drawing into a capacitive sensor for Arduino.
- I found a small strip of aluminum (about 0.4″ x 2.0″) and cut it into 6 equal pieces length wise – these would be the contacts which would pick up my body capacitance and trigger certain actions.
- I soldered wires to each of the aluminum tabs. This was hard because my soldering iron isn’t good at all. It really helps to clean the surface with flux paste though.
- I embedded each of the tabs in a block of foam, precisely where the skin for the controller would allow me access to them.
- Then, I connected the wires to a breadboard, and hooked up all the resistors and wire jumpers to the Arduino. Below is a circuit diagram I made to show you how everything goes together. Note that the black wires coming out the bottom are mean to be the ones I just soldered, and would have the aluminum tabs soldered on. They are the capacitive sensors.
Warning: Be extra careful when wiring everything, particularly when you are hooking up the 5V to each pin. Make sure the resistor is there, or else you run the great risk of destroying your microcontroller.
- It was time to upload the code. I adapted Alan’s code to fit my project’s setup, and I was done (see code below). He explains how his code works really well, so be sure to check out his intuitive explanation. His code, however, is written for the AVR GCC compiler. Don’t worry if you don’t know how bit shifting and lower level C coding works though, his embedded comments are nice. If you want to learn how to program standalone AVRs, I would highly recommend visiting Dean Camera’s website (Four Walled Cube), but particularly his page on AVR Articles. They are absolutely excellent, and he’s a really cool guy (he works for Atmel!).
- Finally, I picked up Processing, and made the video game to play with the controller I just made. All the code and assets required for the video game are attached in a zipped folder at the bottom of this post, and in the following section I will explain exactly how the code for the game works.
How the Game Works
Hopefully you tried the game out at the top of the post before reading this so that you understand what I am about to explain. In case you didn’t, click here. There are two versions of this game. The first one includes the code to run my controller or mouse, and the second one is the code only for the mouse. Since I’m the only one who has the controller, I’ll quickly go over the code that doesn’t have the parts to process the serial input from the Arduino – with the added benefit of it being simpler to explain and understand. If you are adventurous and do make the controller, I should have both versions attached for you to download below. Let’s get to work! Start by looking over the code for the game below.
If you are new to programming, it may seem overwhelming. Trust me, it isn’t. I’ll explain the code block by block:
- At the top of the code, you’ll notice lots of variables. These are simply variables I have created which define the parameters of the game. Things like how long I want the game to last, or how many jellyfish I want in the game. Pretty simple, and very useful to keep your code easy to follow – even for yourself.
- In the setup function, we now setup the way the game screen will look, and initialize some things like the Jellyfish objects (more on that later), and load the images/fonts we will be using. Note that these images and fonts will all be in the zip folder you can download below to try everything out for yourself.
- The draw function is the heart of all Processing applications, and mine is no exception. This is the function which will loop forever – or at least until you close the window. So it is in this function that you should check what should be displaying on the game screen at a given time, and display it. I tried to make it simple my making three obvious scenarios for the draw function: the player will either be at the start screen, playing the game, or at the end screen. When we start with the gameStart variable equaling false, we know we are at the start screen because the game hasn’t started yet. It is here that we wait for the player to press the ‘a’ key. If the player presses ‘a’, we set gameStart to true, and the next time the draw function loops, we will hop to the next if statement and check if its conditions are met. Follow through the draw function as if it is a story, and run through the loops in your head. You’ll understand how everything fits together nicely.
- When the game is active (that is, gameStart is true and endScreenActive is false, so we are actually playing the game), you will notice that we keep calling the function called moveSpongebob. Surprisingly, this function is mean to move Spongebob! Every time we run this function, we update Spongebob’s position based on our mouse’s location (defined internally by Processing as the variables mouseX and mouseY). When we update his position, what we are really doing is drawing him again at a new spot (which could also be the same spot from the last loop if you didn’t move your mouse), because after each loop of the draw function everything on the screen clears. Then we loop through each of the Jellyfish in the current screen, and see if their position matches Spongebob’s. If it does, we know Spongebob caught a Jellyfish, so we destroy the Jellyfish and increment the score by one.
- Our last block of code is simple, and outlines an important concept in object oriented programming. To make my programming task easier to handle, I created a Jellyfish object. This is useful, because now each Jellyfish on the screen is actually a specific Jellyfish, with specific personalities and traits. So I can call on a specific Jellyfish whenever I want. Think about it this way: I clone a Jellyfish based on this basic skeleton Jellyfish object I have. Inside each Jellyfish clone lie traits/attributes. More specifically, we have traits like its x and y location, how long it has been alive for at its current position, and whether it is in fact alive or dead (caught by Spongebob).
In our very first block of code, we defined an array of Jellyfish objects, so I can access whichever Jellyfish I want to by calling it like this: jellyfish, jellyfish, etc., depending on how many Jellyfish I initially set for the game. So when we create a Jellyfish, we give it a random x and y location, as well as a certain lifeDuration at a single spot. When we move the jellyfish after its lifeDuration hits zero, we give it a new lifeDuration and keep repeating. The lifeDuration is not the total amount of time the jellyfish is alive, it’s the total amount of time it is alive in one spot.
You’ll notice that each Jellyfish object also has some functions. A real life Jellyfish would have attributes like color and size, and functions like sleep and sting. Our Jellyfish works the same way, except its attributes are what I mentioned above and its functions are getXLoc, getYLoc, setLifeStatus, and drawJellyfish. These are all quite self explanatory, and are used in different parts of the code. Akin to how we have to draw Spongebob again every time the draw function loops, we have to draw each Jellyfish again too based on its attributes. The getXLoc and getYLoc functions are used in the moveSpongebob function, so that we can compare Spongebob’s position with a Jellyfish’s to see if he has caught it. If he did, then we call the final Jellyfish function, setLifeStatus, and pass it a false argument so that it indicates that Jellyfish is dead/caught, and we need to assign new attributes to revive it at a new position on the screen next time we draw it. Of course, if Spongebob doesn’t catch a Jellyfish, once its lifeDuration is up I have programmed it to automatically take a new position.
I hope you have received a basic understanding of how this game works. Mull it over, let me know if you have any questions, and don’t give up. My best advice to you is to read code like a story. That’s essentially what the computer is doing, and if you can’t read the story without getting stuck somewhere and scratching your head, I can assure you the computer definitely won’t enjoy it either.
I had a blast working on this project. The only thing I regret is not having good enough fabrication tools to make my project look better (hence the foam and hand colored drawings). Not to worry though, I am always on the hunt for tools and am working on some of my own as well.
If I could change one thing, it would be replacing the Arduino with a standalone AVR. I just didn’t have the time for that as I am working on a lot of other projects – which is also why I got delayed in posting this one. But look out for lots of wireless technology, flying machines, robots, and mobile apps, all coming your way very soon!
All in all, I couldn’t have asked for a better result, thanks to the people below.
As always, this project could never have been possible without lots of support and inspiration. Thank you!
- Alan Chatham for his Instructable: Turn a pencil drawing into a capacitive sensor for Arduino
- Casey Reas and Benjamin Fry for creating Processing (the MIT Media Lab rocks)
- My pals at the Stackexchange for Electrical Engineers
Resources for Download