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.
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.
- 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.
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.