Introduction: Skimboard Game Interface
The skimboard interface is a custom interface built for the game Surf RMB City by the artist Cao Fei, who also designed the skimboard graphics.
This Instructable will show you how to build the interface and program it to emulate left, right and jump key presses. With a little more programming skills you can also make it do much more.
The skimboard interface is made up of six handmade textile pressure sensors that are embedded within layers of felt mounted beneath a commercial skimboard. These pressure sensors can detect the weight and position of somebody standing on the skimboard. All six sensors are connected to a small programmable HID (Human Interface Device) module called the Teensy 2.0. The Teensy is programmed to read the sensor data in order to detect whether somebody is standing on the skimboard and interpret if they are leaning left or right. This information is then mapped to different keyboard strokes in order that the skimboard interface can control the game.
More pictures of the installation at the Museum of the Moving Image, NY:
>> http://rmbcity.com/2011/01/surf-in-rmb-city-2/
Video from work in progress
(Unfortunately i don't have a video of the final installation)
Step 1: Materials, Tools and Downloads
Materials
• Skimboard: http://www.amazon.com/MBS-95541-35-Wood-Skimboard-35-Inch/dp/B00333FK56/ref=sr_1_9?ie=UTF8&qid=1292697655&sr=8
• Griptape (sandpaper with adhesive backing used for skateboards) >> http://www.amazon.com/s/ref=nb_sb_noss?url=search-alias%3Daps&field-keywords=griptape&x=0&y=0
• ¼ inch felt >> http://www.sutherlandfelt.com
• Teensy 2.0 >> http://www.adafruit.com/index.php?main_page=product_info&cPath=16&products_id=199
• 234/34 4 ply Conductive sewing thread >> http://www.shieldextrading.net/sewing_products.html
• Conductive Velcro >> http://lessemf.com/fabric.html
• EeonTex piezo-resistive fabric >> http://eeonyx.com/
• Fusible interfacing (iron-on fabric heat glue) >> local fabric store
• Black button thread (thick, strong thread) >> local fabric store
• Superglue >> local hardware store
• Studio tack (double sided sticky tape) >> local craft store
• Wire >> local hardware store or Radioshack
Tools
• Mini USB cable (to connect to Teensy) >> online or Radioshack
• Computer with Arduino, Teesyduino library and Teensy Loader software installed (see downloads)
• Lasercutter (to cut the griptape design)
• Sharp fabric scissors (for cutting thick felt) >> local fabric store
• Soldering iron >> online for Radioshack
• Multimeter >> online for Radioshack
• Wire strippers and cutters >> Radioshack
• Iron (for fusing the interfacing) >> borrow from somebody
• Large sheet of paper and markers >> local craft store
• Hot glue gun >> local hardware store
• Sewing needles >> local fabric store
Downloads
• Arduino (application) >> http://arduino.cc/en/Main/Software
• Teensy Loader (application) >> http://www.pjrc.com/teensy/loader.html
• Teensyduino (software add-on) >> http://www.pjrc.com/teensy/td_download.html
• Teensy game code (by Friedrich Kirschner, ZIP) >> http://www.plusea.at/downloads/skimboard-game.zip
• Teensy test code (ZIP) >> http://www.plusea.at/downloads/skimboard-test.zip
• Teensy pins for Arduino (JPG) >> http://www.flickr.com/photos/plusea/4895291504/
• Skimboard design (by Cao Fei, PDF) >> http://www.plusea.at/downloads/skimboard-design.pdf
• Skimboard griptape cut-file (PDF) >> http://www.plusea.at/downloads/skimboard-cut-file.pdf
• Skimboard buildup (PDF) >> http://www.plusea.at/downloads/skimboard-cut-file.pdf
• Sensor placement layout (PDF) >> http://www.plusea.at/downloads/skimboard-sensors.pdf
Step 2: Lasercut the Skimboard Design
The skimboard design by Cao Fei is cut out of griptape, a sandpaper with an adhesive backing used commonly on skateboards. The griptape can be cut with a lasercutter from the skimboard-cut-file.pdf
Depending on the lasercutter the power and speed settings will be different. I was able to use speed:50, power:30. The sandpaper side should be facing down so that the cutting happens on the adhesive backing. Because of this you need to be sure to mirror the design-file so that the cut pieces are oriented the right way when facing upwards.
Once the design has been cut out, carefully separate the actual pieces from the rests. Layout the design on the skimboard before peeling off the adhesive backing to make sure you have all the pieces and that they all fit together. In order to align the pieces with the original design you can print a 1:1 scale copy of the skimbaord-design.pdf, but you can also estimate their placement as it is not crucial to functionality.
Once you have the design layed out, peel off the adhesive backing from the pieces one at a time and stick them down one by one. Adhere fills before outlines. When the griptape is all in place use superglue around the edges as well as on top of intricate details to ensure that it is firmly bound to the surface of the skimboard. The wet superglue will not look very good, but as soon as it dries it will become nearly invisible.
Step 3: Prepare the Felt Pedestal
Because the wooden skimboard is slightly curved, especially at the tip, it is necessary to build up padding under the curvature in order for the skimboard to stand sturdily on the ground and not tip or flip when people stand on the edge. Five ¼ inch thick layers of felt buildup should be sufficient to support the tip of the skimboard. In addition to the buildup layers you’ll need to cut two full skimboard size pieces of felt as illustrated in the illustration.
Cut out all felt layers with a pair of sharp scissors. Stitch together the buildup layers using a strong black thread (the picture actually shows white thread, but this is harder to keep invisible).
Before continuing to stitch the buildup layers to the top layer and finally all the layers together you need to embed the Teensy and the fabric pressure sensors, so wait until the very last step to sew everything together.
Step 4: Solder Wires to Teensy
In order to prepare the Teensy to be integrated in the felt pedestal and be connected to the fabric sensors we need to solder wires to select pins and make loops at the ends of these wires so that we can sew to them. Sewable wire loops are a common E-Textile (Electronic Textiles) method for connecting hard and soft components.
Since we have six analog sensors, we need to solder six wires to six analog pins and one wire to GND for the common ground. We chose to connect to analog pins: A0, A1, A2, A3, A4, A9 and the top left GND pin. Cut a roughly 10cm long piece of multi-stranded wire (this kind of wire is more flexible than a single core wire) and strip both ends of the isolation. Solder one end to the Teensy and turn the other into a pea-size loop. Figure 7 shows close-ups of this process. Soldering the twists of the loop to keep them from unraveling is optional. I prefer not to solder because the solder creates a hard point that becomes a weak point in a hard/soft (stiff/flexible) connection.
Step 5: Sew the Fabric Sensors
The fabric sensors are constructed by sandwitching a piece of piezoresistive fabric between two conductors. We use an EeonTex fabric as a piezoresistive material and conductive thread as conductors. Piezoresistive materials have the property that their electrical resistance decreases under pressure. We can detect this change by putting voltage though the material (the conductive threads on either side carry the voltage) and then measuring how much goes through (reading the analog signal from the Teensy pin), depending on the level of resistance, which is pressure dependant.
In transferring the sensor layout from the illustration to your felt layers, you primarily want to pay attention that the front right sensor is located beneath the round sun graphic in the griptape design and that the rear left sensor is located beneath the moon shaped graphic.
Bottom Layer
The bottom layer is made up of the bottom felt layer with the Teensy board mounted at the tip and the individual conductive threads connected to the wire loops that we soldered to it in the previous step. From the loops the threads are sewn into the felt and only exposed where the thread is marked as a thick line.
Start sewing the bottom layer by cutting a piece of conductive thread about 1m long and thread through needle. Tie a knot in the far end. Begin sewing at the sensor end of one of the sensors and stitch the first stitch from the back of the bottom layer felt so that the knot catches on the back. Now sew and expose the conductive thread only where it is marked as a thick line in the above illustration. Where it is marked as a dotted line you should sew the thread inside the felt, isolating and protecting it. Sew the thread all the way from the exposed sensor end to the wire loop connected to the Teensy board. With 4-5 stitches sew the thread to the wire loop as illustrated in the images. End the sewing with a knot and use some hot-glue or superglue to keep the thread from fraying and unraveling. The thread connected to the GND wire connects to a piece of conductive Velcro. Hot-glue the teens to the felt for extra stability.
Make sure to mark where you have sewn with your conductive threads so that you know where they are! On the bottom layer you are swing individual analog inputs and you don’t want one to touch the another!
If you want to be extra safe, use a multimeter to measure electrical continuity/resistance after sewing each sensor thread. See Multimeter Test (next step).
Middle Layer
The middle layer is made up of individual pieces of piezo-resistive fabric. These are held in place by fusing them to the bottom felt layer with fusible interfacing around their edges. They can also be sewn into place by lightly stitching around their edges.
To create the middle layer cut pieces of EeonTex fabric roughly 20x7cm large. They should be roughly 2cm larger than the area of exposed conductive thread. Now you can use fusible interfacing around the edges (but not the middle!) of the EeonTex patches to iron them on to the bottom felt layer or you can stitch them down with some regular sewing thread.
Top Layer
The top layer is similar to the bottom layer, except that here all the individual conductive threads are connected at the common ground (GND) point. This point is a piece of conductive Velcro, allowing the common ground to “jump” over to the bottom layer where it connects to the Teensy board.
Sew the top layer of felt the same way you sewed the bottom, except here all the conductive threads are connected at the patch of conductive Velcro. Note that you can use the same strand of conductive thread to sew all the sensors as shown in the illustration.
Step 6: Multimeter Test
To make sure that all your sensors are working and correctly connected you want to use a multimeter to measure electrical continuity/resistance. Set the multimeter to measure resistance (Ohm, Omega). Measure on the Teensy board at the solder connections to make sure non of the analog inputs that we are using are inter-connected. If they are inter-connected then the multimeter will show a very low resistance value (less than 1 Kilo Ohm is already a bad sign). If you have any bad connections you will need to find out where these are and fix them. Possibly conductive threads are touching inside the felt where you cannot see. Undo things one by one, testing as you go, so that you can find out where the error lies.
When everything is connected as should be you are ready to layer your felt pedestal and test your sensors. Stack the felt layers together and place the skimboard on top of them.
Step 7: Program the Teensy
Programming the Teensy is made easy by allowing you to use the Arduino environment with the Teensyduino add-on. If you have not already got Arduino installed on your computer you will want to do this (for links to all downloads see the first step!). Then you will want to download the Teensyduino add-on and run the installer. Finally you will also want to download and install the Teensy Loader application.
And finally finally you will also want to download and unzip the skimboard-test.zip and skimboard-code.zip files.
Before using the skimboard code that turns the skimboard into a keyboard and triggers the appropriate keystrokes to play the game you will want to program the Teensy to be a serial device that simply sends the sensor values as numbers for you to read. This is so that you can double check and make sure that all your sensors are working and figure out their range of values before uploading the final code. You can always re-program the Teensy.
Test Code
Open the skimboard-test.pde file in Arduino. Plug the mini USB cable from your computer to the Teensy. In Arduino go to the Tools menu >> board and select the ‘Teensy 2.0’. Go back to the Tools menu and under UBS Type select ‘Serial’. Press the play button to compile the code. When it has successfully compiled (see bottom of window), press the small physical button on the teensy board (make sure the Teensy Loader application is running). You should now see the Teensy Loader application become active and indicate that the code (skimboard-test.hex) uploaded successfully.
Now open the serial monitor from your Arduino window (the symbol furthest to the right). In the serial monitor window you should see a continous stream of text and numbers begin to appear. It should look something like this:
Left: 1020 909 922 2855 Right: 980 1010 940 2930 Sum: 5785
Where the values mean the following:
Left sensors: #front# #middle# #back# #sum# Right sensors: #front# #middle# #back# #sum# Sum: #total#
What you want to look for is that when your skimboard is in a “relaxed state” (= nobody standing on it) that the values you are getting for the individual sensors are all relatively high (like in the example). The highest they can go is 1024 (10 bit). The lowest they can go is 0. When you step on the skimboard you want the values to go low (as low as possible), but above all you want to make sure that you get a difference in sum values for left and right when you lean or step to the left or right of the skimboard. If this is all working then you are all set to upload the skimboard-game.pde file to the Teensy so that it will start acting like a computer keyboard and play the game. If it is not working as described then you want to debug. Keep the program running and the Teensy connected while you unstuck the layers and tweak around with the sensors until you found the error. This might take you some time and patience, and please feel free to contact us regarding any issues that arise at this point.
Game Code
Repeat the above steps with the skimboard-code.pde file. But in the Tools menu under USB Type select ‘Keyboard + Mouse’.
If the upload was successful then your Teensy is now recognized by your computer as a Human Interface Device (HID), in our case a keyboard sending keystrokes when you lean to left or right and jump. Run the game or open up a text editor and step on the skimboard to see that it works.
Step 8: Finishing Touches
Now that the sensors are working and the Teensy is programmed you can sew the bottom, top and buildup layers together and finally adhere them to the skimboard with a sheet of studio-tack (double-sided sticky tape).
Participated in the
game.life challenge
