You are on page 1of 38

Food

Living

Outside

Play

Technology

Workshop

Pong Playing Flexible Screen on a Shirt


by TheGreatS on October 9, 2013

Table of Contents
Pong Playing Flexible Screen on a Shirt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Intro: Pong Playing Flexible Screen on a Shirt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Step 1: Materials and Tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Step 2: Cut the LED Strip Into Smaller Strips . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Step 3: Soldering the Screen Together . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Step 4: Soldering the Core Electronics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Step 5: Controller . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Step 6: Shirt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Step 7: Programming . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
Step 8: Finished Product . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
Related Instructables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
Advertisements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
Comments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37

http://www.instructables.com/id/Pong-Playing-Flexible-Screen-on-a-Shirt/

Author:TheGreatS

40 Watt Soldering Iron


I enjoy electronics and like to build through whatever medium suits my fancy.

Intro: Pong Playing Flexible Screen on a Shirt


This is my Halloween costume for the year 2013. It's been in the works for about a year and has taken quite a few man hours to create. The screen is 14 by 15 pixels, so,
pretty low resolution but it can still do some fun things. It is physically flexible in all directions, although it cannot be folded without damage. It has a controller consisting
of a single button and slide pot, connected to a pro mega via USB. To keep it alive for a long time it employs two monstrous 2200 mAh batteries wired in series to get the
necessary voltage, and then a 5 Volt regulator to make it usable. All the electronics are place in pockets on the inside of the shirt so they can be removed and so the shirt
can be washed.
It plays a functional game of pong. It first graces one with the words "PONG PLAY" in lovely blue lettering using a modified version of the Tom Thumb font (can be found
at http://robey.lag.net/2010/01/23/tiny-monospace-font.html). After five seconds the option can be given to press the button to move on, or to not press the button and
leave a perfectly good experience behind. When one chooses to press the button, the game begins. A red paddle on the right is the computer paddle and the green
paddle on the right is the player paddle, which is controlled by the slide pot to move up and down. The ball bounces around as each side tries to score a point. The player
can hit the ball with the edge of their paddle to speed it up (a nice feature) while the computer cannot do this, and instead ends up being stuck with moving slightly slower
than the ball. When a point is scored a pixel changes to white on the scoring sides paddle. It counts in binary from the bottom. where green or red is zero and white is 1.
21 is the score to win (or lose depending on who get's 21 points) and so when the player paddle reads 10101, the "YOU WIN" text is displayed. Once again in modified
Tom Thumb. The same happens but with "YOU LOSE" displayed instead. After a win or loss the game restarts to the point right after Pong Play. To restart entirely the
restart button on the "Magic Box", also known as the-box-with-all-the-electronics-except-the-screen, is pressed.

Image Notes
1. Want to play?

Image Notes
1. Pong Play!

http://www.instructables.com/id/Pong-Playing-Flexible-Screen-on-a-Shirt/

Image Notes
1. This is what it looks like outside the shirt.

Image Notes
1. This is the face of concentration

Step 1: Materials and Tools


Things marked with a * are optional but recommend
And so in no particular order...
Materials:
4 Yards of Adafruit Neopixle 30 pixle per meter strip
1 T-shirt
*1 pair of Suspenders
1/2 yard of fabric will be more than enough (Non stretchy weave is preferred)
6 foot USB A male to USB B male cable
1 USB A female connector
3 2 pin JST female connectors
4 2 pin JST male wires
battery charger
2 6600 mAh batteries
1 Arcade style Button
1 arduino pro-mega
1 FTDI header
1 USB B female connector with breakout board
1 on/off switch (toggle)
1 reset switch (toggle or momentary)
1 slide potentiometer
*1 slide pot knob
1 high amp connector pair
*1 project case
1 5V 3+ amp voltage regulator
a small bit of plastic
some solder
some wire
some thread
*some hot glue
*some elastic
some time (Maybe a little bit more than "some")
some perseverance (You will probably need quite a bit of this actualy)
some heat shrink tubing or electrical tape
some super glue
some iron on backing

http://www.instructables.com/id/Pong-Playing-Flexible-Screen-on-a-Shirt/

Tools
*Helping Hands
Normal Hands (or someone with access to them)
Soldering Iron
*Hot Glue Gun
Dremel or Sandpaper
Chisel
Wire Strippers
Wire Cutters
Staple Gun
Screw Driver
Saw
Pins
Sewing Machine
Fabric Scisors

Image Notes
1. Didn't end up using
2. Didn't end up using
3. 4 JST wire connectors
4. Battery Charger
5. Batteries
6. Arduino Pro Mega
7. FTDI programmer
8. 3 JST female connectors
9. USB A female
10. Button
11. 6 Foot USB male A to USB male B cable
12. Slide Potentiometer
13. USB B female connector with Breakout board
14. Two on off switches
15. Slide pot knob
16. High amp power connectors
17. Project Box. Hooray recycling!
18. Another Connector

Image Notes
1. 4 meters of Adafruit Neopixle Strip

Step 2: Cut the LED Strip Into Smaller Strips


Use you're preferred cutting utensil and cut the strip into 14 segments, each 15 pixels long.Cut only between the copper traces, labeled something like "DO" "DIN" "+5V"
and "GND". If it is already soldered over the copper their just cut right through. Try not to cut too much into the exposed copper but if you nick it a little that is just fine.
Once all 14 of the strips have been cut, trim a little bit of the rubber off each end to get it out of the way for soldering the strips.

http://www.instructables.com/id/Pong-Playing-Flexible-Screen-on-a-Shirt/

Image Notes
1. Snip Snip Snip! Be sure it's between the copper traces.

Image Notes
1. Lots of strips
2. What to do with the leftovers?

Image Notes
1. Lining it all up

Step 3: Soldering the Screen Together


Take the wire and cut it into about 3.5 inch (9 cm) segments. In my case I have three different colors to make it easier to keep straight when soldering, but one color
would work just fine. You will need about 40 of these little guys, but cut a couple more just in case.
Once You have finished cutting the wire, strip and tin the ends (If you have soldering experience you can skip to the next paragraph), meaning after you remove the little
bit of plastic put some solder on the ends of each wire. Don't heat the solder and try to move to to the wire, heat with you're soldering iron from the bottom of the copper
and put the solder on the top. Be patient and wait for the hot wire to melt the solder. It is tempting to tough the soldering iron to the solder to get it started (My impatience
and I know exactly how you feel) but the solder won't stick as well. Do the same for the exposed copper traces on each end of the strip sections. If it already has solder
don't worry about it. For the strip you may want to build up a little mound to make it easier later. When working with the strip, do it quickly, and try to not spend to much
time applying heat to the strip. Only do what you need to do to melt the solder onto the trace.
Solder a wire on each trace to the end of the first strip (The first strip being the one with the wires and connector, solder it to the exposed end). If you look at the strip you
will see little arrows on it going up to the end where you soldered the wire. Take another strip so that the arrows are pointing the opposite direction, and solder the wire
coming from the GND trace to the GND trace of the other, the +5V to the +5V and so on. Repeat this making sure the arrows switch directions after every section so that
if you were to follow them it would zig zag up and down, and that it could be stretched out to on long strip in the end.
Once all 14 strips have been soldered, lay them out and line then up so the LED's form a grid. Then keep them together using a method that can be removed later
without damage to the strip. I used scotch tape. It's sticky enough to keep everything together but not so sticky as to leave a residue. I do not recommend anything to
permanent, like staples or duct tape.
Once everything has been taped together solder a wire from the strip on the bottom +5V to the one immediately next to it. Repeat until the the entire bottom has the
power taps going all the way across. This is so the screen doesn't dim as the line of LEDs progress.

http://www.instructables.com/id/Pong-Playing-Flexible-Screen-on-a-Shirt/

Image Notes
1. Cut and stripped, waiting patiently to be tinned

Image Notes
1. Lots of wire
2. Lots of wire

Image Notes
1. Almost 3.5 inches (little under 9 cm)

Image Notes
1. Prepairing for soldering

Image Notes
1. Note the lables

Image Notes
1. Prep with some solder beads

http://www.instructables.com/id/Pong-Playing-Flexible-Screen-on-a-Shirt/

Image Notes
1. Soldered. This should make you feel better about your soldering jobs.

Image Notes
1. Soldered to the next strip over, minding the labels.
2. Coming in
3. Going out

Image Notes
1. Repeat

Image Notes
1. Ugg, this took a while and was so redundant.

Image Notes
1. Like vines in a jungle

Image Notes
1. Laying them out to make sure it fits

http://www.instructables.com/id/Pong-Playing-Flexible-Screen-on-a-Shirt/

Image Notes
1. Using tape to hold it all together.

Image Notes
1. Continuing with the tape...

Image Notes
1. Make sure they line up
2. Make sure it lines up

Image Notes
1. There we go, a large mass of expensive LEDs and cheep scotch tape

Image Notes
1. Voltage taps so that the lights don't dim as the strip progresses.

http://www.instructables.com/id/Pong-Playing-Flexible-Screen-on-a-Shirt/

Step 4: Soldering the Core Electronics


Solder the USB B breakout board (BOB) to the USB B connector. Solder the appropriate wires to the USB A connector. I advise looking at the pin-out of the connector as
found at this website, http://image.pinout.net/pinout_USB_files/pc_usb_connectors_pinout.png. Don't worry about where to solder the other ends of the wires on the USB
A connector right now; that will be covered in the controller step. Cut the data connector from the strip, the female connector, not the male connector (The female
connector is gotten from the other end).
Solder the male JST connectors to the ends of the battery so that red goes to red and black goes to black. Melt heat shrink tubing over the exposed wires (slid over
before soldering) so that they don't short or use something else like electrical tape or hot glue. Solder some wires to the all of the female JST connectors. Be sure to have
a male end plugged in so that the pins don't shift around. Be careful of polarity and make sure the wires match with the male connectors. Solder wires to one the high
voltage connector (but not it's pair), once again, making sure any colors match up and that they are plugged together to prevent any shifting pins.
Solder the female just connector/wire assembly so that they are wired in series, not parallel, to get it past the threshold voltage for the power regulator. So, solder the
positive wire to the negative wire of the other assembly so now we have one un-soldered positive wire and one negative un-soldered wire and the two soldered wires are
soldered to different connectors. Take the negative wire and save it to be soldered to the negative wire elsewhere. Now take the positive wire and solder it to the switch If
there are three or more pins (or more than one way of being "on") solder it to the middle pin. Note the "Middle pin" may not physically be in the middle. The way to identify
it is to find the pin that, when the switch is on in any state will always be connected to another pin. If no pin is like this then you have a very special switch; just connect it
to any pin and make sure the next wire soldered to the switch will be connected to that wire in at least one on state.
Now solder the positive intake wire on the voltage regulator to the opposite end of the switch, as discussed above. Solder the postive voltage out to the positive end of the
un-soldered high current connector. Take the negative intake wire and solder it to the negative end of the high current connector. We're now going to solder the power in
parallel to the Arduino and Power strip. Now take the voltage regulator output wires and solder two pieces of wire on both the positive and negative ends so they come
out in a Y shape. Solder a two pin connector to the positive and negative wires of the led strip assembly. It doesn't matter what type of connector you use, it can be JST
or in my case some power/audio cable or something (I'm not sure, and I apologize for not having any pictures). Solder one of the positive power wires to the positive end
of the opposite connector for the light strip and one of the negative wires to the other pin on the connector. Do the same but for a male JST connector/wire assembly. All
the while remember to insulate the solder joints to avoid shorts.
Now onto what to do with the USB B connector. Solder the positive wire to a 5v hole on the Arduino Pro Mega. Take the ground wire and solder it to a GND hole. Take
the D+ and solder it to the digital pin (or in this case, hole) 40. Solder D- to analog pin 15. Solder the data end of the female connector which mates with the LED strip
male connector to data pin 6 and the ground wire to a GND pin. Masking or scotch tape work great for holding the wires to the board so they don't fall out when it's flipped
over to be soldered. Now take a momentary button and solder a wire from one end to the VCC pin (or any voltage output pin) and the other end to the RESET pin.

Image Notes
1. Data connector taken from the other end of the strip.

Image Notes
1. Soldered to the batteries

Image Notes

Image Notes

http://www.instructables.com/id/Pong-Playing-Flexible-Screen-on-a-Shirt/

1. Wires to a female connector

1. Put wire over pin. Be sure to have a male JST connector plugged in to keep
the pin from shifting.

Image Notes
1. Soldered

Image Notes
1. Heat shrink tubing slid over...

Image Notes
1. And melted with the edge of a a soldering iron tip.

Image Notes
1. I should have had the other end plugged in to avoid pin shift. It takes a lot of
heat to get solder to melt onto those pins!

http://www.instructables.com/id/Pong-Playing-Flexible-Screen-on-a-Shirt/

Image Notes
1. The fail corner.
2. Don't pay too much attention to the crazy wiring, much of it ended up not
being used.

Image Notes
1. Heat shrink tubing to keep the pins from shorting. I sadly messed up the
common protocol for ground and power, but who said anything about following
protocol in this project! We aren't trying to plug this into a computer!

Image Notes
1. Soldered the pins into the BOB.
2. Preparing to solder the other wires in, this time following protocol, that will
make my life more difficult in the future...

Image Notes
1. soldered and clipped short

Image Notes
1. Heat Shrink Tubing slid over...

Image Notes
1. And shrunk. My camera wouldn't focus for me here, and for that I apologize.

http://www.instructables.com/id/Pong-Playing-Flexible-Screen-on-a-Shirt/

Image Notes
1. Shrunk!

Image Notes
1. It's so pretty :)

Image Notes
1. Tape to keep the wires from sliding out.

Image Notes
1. There are the wires coming out the other end!

Image Notes
1. Tape to keep it from flopping all over the place.

Image Notes
1. This is the power supply I ended up using.
2. Battery connectors
3. reset switch. I found out a little while later this was a "normally on" momentary
switch. Microwave parts to the rescue!

http://www.instructables.com/id/Pong-Playing-Flexible-Screen-on-a-Shirt/

4. On/Off switch
5. Not the final position, It worked out better on the top of the box.
6. Here is the mega!

Step 5: Controller
First is choosing the right shape to start off with. It all depends on how you want the controller structured. I wanted more of a flat controller so I got a piece of 3 1/2" by
3/4" plank. arrange the parts in a way that seems fitting and comfortable to work with. Use a french curve, compass, triangle, and straight edge to draw on where all the
pieces should go. Cut the basic outline out using the cutting tool of you're choice. A ban saw would be best but I used a coping saw, which worked just fine. Sand down
the edges to make them smoothly transition, then sand down the corners to make it more comfortable.
Drill out the hole for the switch, then sand,chisel, and/or Dremel out any part on the bottom that will make it fit. Try not to do anything with the top and only sand out what
you need to be able to fit it in by twisting, angling, or whatever else to get it to go in. Once it is in attach it with the plastic nut and attach the switch. Drill out the area for
the potentiometer knob to fit through and chisel out an area so it can sink in and fit all the way through. Drill out some holes so a screw can hold it in.
Bend in the little pieces of the USB A connector that make it's general width increase a little (look at the pictures). Chisel out a portion for the connector, progressively
checking to make sure the connector fits. Super glue the connector into it's slot. Take a little piece of plastic and cut it into a shape that will fit over the connector (look at
the pictures), and then staple it to the wood. Cut off any pieces that may get in the way. Screw in potentiometer and attach the knob.
Solder the positive wire to one of the ends of the potentiometer (not the variable portion) and the negative wire to the opposite end. Solder the D- pin to the variable pin
on the pot. Solder a wire from the pin on the pot with the positive wire to one of the pins on the button. Solder D+ to the other pin on the button. Trim the spare wire and
insulate the pieces that need it.

Image Notes
1. Easily cuttable wood, with all the marks.

Image Notes
1. This is how my hand will fit on the controler, you can see how the button is right
under my thumb.

Image Notes
1. This is how my hand will fit to hold the Pot knob.

Image Notes
1. Cut a line tangent to the curve.
2. Cut a line tanget to the curve.

http://www.instructables.com/id/Pong-Playing-Flexible-Screen-on-a-Shirt/

Image Notes
1. Keep going around...

Image Notes
1. Sand it down to make the curve smooth. This wood is soft so it's pretty easy.

Image Notes
1. All the edges are smooth, including the top to side edges not just the side to
side edge.
2. Starter hole
3. Little rougher in some places.

Image Notes
1. Drilled out.

Image Notes
1. Sandint to make it smooth

Image Notes
1. Chiseling out certain parts so the button can fit through the hole.

http://www.instructables.com/id/Pong-Playing-Flexible-Screen-on-a-Shirt/

Image Notes
1. I got impatant and switched to a dremel.

Image Notes
1. It fits!
2. I'll use this part as a handle-ish thing.

Image Notes
1. Really rough, I should have taken more time to make it look nicer.
2. Hole for screw
3. Hole for screw

Image Notes
1. Chiseling out this part so the pot sinks in a little.

http://www.instructables.com/id/Pong-Playing-Flexible-Screen-on-a-Shirt/

Image Notes
1. Testing the knob to see if it fits.

Image Notes
1. It sinks in a little bit.

Image Notes
1. Testing the make sure the knob fits through to the Pot

Image Notes
1. Bending the legs to make it fit.

Image Notes
1. Chissleing out a space for the USB

Image Notes

http://www.instructables.com/id/Pong-Playing-Flexible-Screen-on-a-Shirt/

1. Heat shrink tubing to keep the pins from shorting. I sadly messed up the
common protocol for ground and power, but who said anything about following
protocol in this project! We aren't trying to plug this into a computer!

http://www.instructables.com/id/Pong-Playing-Flexible-Screen-on-a-Shirt/

Step 6: Shirt
Find a comfortable shirt that will let the light through. I chose this basic white T-shirt. It doesn't really matter the color or style as long as the light can be seen shining
through from the inside. However I do not recommend graphics on the front. Lay out everything on the shirt to help you decide where you want it and use an erasable
marking tool to draw it on. I (meaning some people I know) have a pencil meant for marking fabrics which washes out easily.
Measure the size of the batteries, controller case, and screen and cut out pieces of paper to match. Then pin the paper to a piece of non-stretchy fabric. A weave works
well for this. Then cut out rectangle leaving about a quarter inch for a seam all the way around. Then using the piece of paper as a guide iron the folds into the fabric. Now
the paper can be removed. On the part of the pocket that will be the top fold it over it's self three times. Iron and pin it to keep it in place. Sew a seem all the way along
the middle of the fold. Now take the corner and fold it so the un-sewn edges perpendicular to each other are parallel and sew a seem along the ironed crease closest to
the corner (The pictures really help). Do this for the other corner as well.
If perchance you will have a toggle switch coming out of a pocket, sew a button hole at the base of the pocket where the switch touches. Then sew a button hole and cut
out the middle portion. I can't really give detailed instructions because I had a cool tool to make button holes. Just be sure you make the holes before the pocket is sewn
on.
Take some pins and poke them through the shirt at the corners of the markings for the pocket. Take the pocket and put each corner at a pin (on the inside of the shirt),
leaving a quarter inch for the seam, and pin it to the shirt. After the pocket has been pinned. remove the pins not holding the pocket in and sew the pocket to the shirt.
Repeat for all the pockets. For the large pocket holding the screen leave a gap for the wires at the bottom of the pocket.
To put a hole in the shirt mark the place and take an iron on backing (with the shinier part on the fabric) and iron it on. Then, for a small hole (like what I used for the
toggle switch), make a button hole. For a larger hole, mark the outline and use a zigzag stitch along the line (or curve or what-have you) and cut out the middle part.
If you want you can use suspenders to hold the weight of the pockets, the two clips holding onto the pockets on the front and the back clip onto the pants. I also got a little
sleeve of fabric sewn over the parts of the suspenders that will be touching my skin. Two shirts can get a little too hot so I opted out and used the little fabric sleeve.

Image Notes
1. You can sort of see the drawings on it.

Image Notes
1. My shirt of choice.
2. My face

http://www.instructables.com/id/Pong-Playing-Flexible-Screen-on-a-Shirt/

Image Notes
1. The fabric I will be making the pockets out of.

Image Notes
1. Pining to make sure it says in place.

Image Notes
1. Cut with a seem allowance.

Image Notes
1. Finished cutting. Note the extra fabric around the edges to allow for the
seems

Image Notes
1. Iron the seam all the way around.

Image Notes
1. Ironing the edges

http://www.instructables.com/id/Pong-Playing-Flexible-Screen-on-a-Shirt/

Image Notes
1. This is the top and will be sew this way to avoid fraying.

Image Notes
1. All the creases are ironed on and the paper is removed

Image Notes
1. Sewing the part all along the edge.

Image Notes
1. and here is the seem.

Image Notes
1. Fold like so.

http://www.instructables.com/id/Pong-Playing-Flexible-Screen-on-a-Shirt/

Image Notes
1. Sew like so.

Image Notes
1. Looks good!

Image Notes
1. A nice corner is formed.

Image Notes
1. A nice corner is formed.

http://www.instructables.com/id/Pong-Playing-Flexible-Screen-on-a-Shirt/

Image Notes
1. Pins to make sure the pocket ends up in the right place.

Image Notes
1. The pins from the other side

Image Notes
1. checking everything to make sure it is all placed correctly.

Image Notes
1. pocket placed and pined.

Image Notes
1. Pinning the pocket to the shirt. Right now you can see the inside of the
pocket.

Image Notes
1. Top part of the pocket pinned.

http://www.instructables.com/id/Pong-Playing-Flexible-Screen-on-a-Shirt/

Image Notes
1. Top of the pocket pinned.

Image Notes
1. Putting the corner at the pin.

Image Notes
1. Pinning the corner in

Image Notes
1. Pinned!

Image Notes
1. Sewing everything on.

Image Notes
1. Sew along the line closest to the edge.

http://www.instructables.com/id/Pong-Playing-Flexible-Screen-on-a-Shirt/

Image Notes
1. Coming around a corner.

Image Notes
1. Finished pocket.

Image Notes
1. Pocket from the other side.

Image Notes
1. The shirt is turned inside out.

Image Notes
1. This is where the lines meet

Image Notes
1. ...so a pin is pushed through

http://www.instructables.com/id/Pong-Playing-Flexible-Screen-on-a-Shirt/

Image Notes
1. Pins are placed so that we know where to place the pockets.

Image Notes
1. Put on the crease that shows the place to put the seam

Image Notes
1. The pocket is pinned to the shirt

Image Notes
1. and the pocket is sewn on

Image Notes
1. The place to put the hole so the wires can come out.

Image Notes
1. Sewing on the chest pocket.

http://www.instructables.com/id/Pong-Playing-Flexible-Screen-on-a-Shirt/

Image Notes
1. Keep bunching it up to get to the end.

Image Notes
1. And here is the end!

Image Notes
1. The chest pocket sewn on. It has no third dimension like the other pockets.

Image Notes
1. Here is the pocket from the outside.

Image Notes
1. Iron on backing to prevent the button hole from stretching.

Image Notes
1. Iron it on!

http://www.instructables.com/id/Pong-Playing-Flexible-Screen-on-a-Shirt/

Image Notes
1. Stuck now.

Image Notes
1. Fancy!

Image Notes
1. Perfect for sewing button holes.

Image Notes
1. Here it is!

Image Notes
1. Finding the right place to put the hole.

Image Notes
1. Now on the t-shirt

http://www.instructables.com/id/Pong-Playing-Flexible-Screen-on-a-Shirt/

Image Notes
1. An itty-bitty one for the switch.

Image Notes
1. Cutting out the center

Image Notes
1. Getting the little bit of un-cut fabric.

Image Notes
1. Marking the place for the hole.

Image Notes
1. Iron on backing

Image Notes
1. Iron it on!

http://www.instructables.com/id/Pong-Playing-Flexible-Screen-on-a-Shirt/

Image Notes
1. Mmmmmmmmm, steamy.

Image Notes
1. Once again on the pocket.

Image Notes
1. Here is the little hole!

Image Notes
1. Cut it out.

Image Notes
1. All the pockets from the inside.

http://www.instructables.com/id/Pong-Playing-Flexible-Screen-on-a-Shirt/

Image Notes
1. All the pockets from the outside.

Image Notes
1. This is the remeasured one we will use.
2. A little bit in the wrong place.

Image Notes
1. Getting ready to sew

Image Notes
1. Using a zigzag stitch.

Image Notes
1. There it is. All reinforced.

Image Notes
1. Cutting out the middle part.

http://www.instructables.com/id/Pong-Playing-Flexible-Screen-on-a-Shirt/

Image Notes
1. Cutting... cutting.

Image Notes
1. Last little bit

Image Notes
1. Cloths pin
2. Piece of fabric sewn to clips.
3. Sleeves to keep it off my skin and make it more comfortable.

Image Notes
1. Clip!

Image Notes
1. Clip!

http://www.instructables.com/id/Pong-Playing-Flexible-Screen-on-a-Shirt/

Step 7: Programming
And here is the code. There are a few parts which are well commented but the vast majority is not. If you have questions on different parts you can either give me the line
number (with #include as line number one) or give me a copy of the line(s) and the function in which it resides (like loop() or compMovePaddle()) and I will do my best to
explain it to you, then add a comment to the code explaining it.
////////////////////////////////////////////////////////////Code Start////////////////////////////////////////////////////////////
#include
#define PIN 6
//says which are the input pins for the game
int buttonPin = 40;
//dictates the score, kept in a bianary array because it is esier
int playerScore[5] = {0,0,0,0,0};
int compScore[5] = {0,0,0,0,0};
//dictates the ball's direction
int bvd=0;//0 is down, 1 is up
int bhd=0;//0 is right, 1 is left
//dictates the balls position
int bvp = 8;
int bhp = 6;
//checks to see if the ball is in fast mode
boolean fast = false;
//checks if it is a score.
boolean cIsPoint = false;
boolean pIsPoint = false;
//paddle positions
int cPaddle = 0;
int pPaddle = 0;
long previousMillis = 0;
long previousMillisForComp = 0;
//set the delay times for fast and slow moving ball the "Int" in normInt and fastInt is for interval
int normInt = 50;
int fastInt = 10;
//used to check for a win. 1 is player win, -1 in computer win, and 0 is nothing has happend yet
int win = 0;
//to get rid of a bug. used in the addOne statement and nowhere else.
int which = 0;
//Thing displayed before start, -1 is an escape
int pongPlay[] = {1,2,3,4,10,11,12,13,16,18,20,27,29,33,34,41,42,61,62,63,70,
71,72,76,85,86,88,91,92,94,100,101,102,103,131,132,136,
139,144,145,146,147,148,161,162,166,175,183,185,192,
194,195,196,197,198,199,204,205,206,207,208,-1};
//if you win
int youWin[] = {1,2,3,4,5,16,17,18,19,20,27,33,34,39,46,47,48,49,54,55,56,57,
58,77,78,79,84,88,91,92,93,94,95,99,103,106,110,114,118,130,
131,132,144,145,146,147,151,162,163,168,169,170,177,181,192,
193,204,205,206,207,-1};
//if you lose
int youLose[] = {1,3,5,16,17,18,19,20,24,26,28, 31,32,32,33,34,35,39,46,47,48,49,
62,65,77,78,79,84,86,88,91,94,99,103,106,110,122,123,124,
130,131,132,144,148,152,153,154,162,163,168,169,170,181,192,
193,204,205,206,207,208,-1};
//sets up the led strip
Adafruit_NeoPixel strip = Adafruit_NeoPixel(210, PIN, NEO_RGB + NEO_KHZ800);
//setting up, turns no pin 40 for input, begins the strip, displays the
//message and the shows it.
void setup() {
pinMode(buttonPin,INPUT);
strip.begin();
for (int i = 0 ; pongPlay[i]>0 ; i++){
strip.setPixelColor(pongPlay[i], strip.Color(0, 0, 255));
}
strip.show();
delay(5000);
while (digitalRead(buttonPin) == LOW){
//It's a trap!(until the button is pressed.)
}
}
void loop() {
clearScreen();
//draws the paddles to show the score
for(int i = 0 ; i < 5 ; i++){
if (playerScore[i]==1){
strip.setPixelColor(204-i, strip.Color(255, 255, 255));
}else if((playerScore[i]==0)){
strip.setPixelColor(204-i, strip.Color(0, 255, 0));
}
if (compScore[i]==1){
strip.setPixelColor(5+i, strip.Color(255, 255, 255));
}else if((compScore[i]==0)){

http://www.instructables.com/id/Pong-Playing-Flexible-Screen-on-a-Shirt/

strip.setPixelColor(5+i, strip.Color(255, 0, 0));


}
}
//draws the ball in it's starting position
strip.setPixelColor(98, strip.Color(255, 255, 255));
strip.show();
//decides if the ball is going up or going down
while(pIsPoint == false && cIsPoint == false){
clearScreen();
unsigned long currentMillis = millis();
//assigns the player paddle position
pPaddle=checkPaddlePos();
//checks the next position
checkNext();
//moving the ball
if (fast == false){
if(currentMillis - previousMillis > normInt){
previousMillis = currentMillis;
moveBall();
}
}else if(fast == true){
if(currentMillis - previousMillis > fastInt){
previousMillis = currentMillis;
moveBall();
}
}
//draw the ball
if(bhp%2 != 0){
strip.setPixelColor(bhp*15+14-bvp, strip.Color(255, 255, 255));
}else if (bhp%2 == 0){
strip.setPixelColor(bhp*15+bvp, strip.Color(255, 255, 255));
}
//computer paddle movement
compMovePaddle();
//draw's the paddles
drawPaddles();
//actualy put everything up.
strip.show();
//checking to see if a point has been scored
if (pIsPoint == true){
which = 0;
bhd=0;
addOne();
break;
}else if(cIsPoint == true){
which = 1;
bhd=1;
addOne();
break;
}
}
if (win == 1){
clearScreen();
for (int i = 0 ; youWin[i]>0 ; i++){
strip.setPixelColor(youWin[i], strip.Color(255, 0, 0));
strip.show();
}
delay(5000);
for (int i = 0; i < 5; i++){
playerScore[i] = 0;
compScore[i] = 0;
}
win = 0;
}else if (win == -1){
clearScreen();
for (int i = 0 ; youLose[i]>0 ; i++){
strip.setPixelColor(youLose[i], strip.Color(0, 255, 0));
strip.show();
}
delay(5000);
for (int i = 0; i < 5; i++){
playerScore[i] = 0;
compScore[i] = 0;
}
win = 0;
}
pIsPoint = false;
cIsPoint = false;
bvp = 8;
bhp = 6;
bvd=random(0,2);//0 is down, 1 is up
fast=false;
}

http://www.instructables.com/id/Pong-Playing-Flexible-Screen-on-a-Shirt/

//The AI for the game


void compMovePaddle(){
unsigned long currentMillis = millis();
if(currentMillis - previousMillisForComp > 51){
previousMillisForComp = currentMillis;
if (bvp >= 13 & 10-cPaddle <= 10 & cPaddle > 0){
cPaddle--;
}else if(bvp <= 0 & 10-cPaddle >= 0 && cPaddle < 10){
cPaddle++;
}else if(bvp-3 > 10-cPaddle & 10-cPaddle >= 0 && cPaddle > 0){
cPaddle--;
}else if(bvp < 10-cPaddle & 10-cPaddle <= 10){
cPaddle++;
}
}
}
//moves the ball
void moveBall(){
if (bhd == 0){
bhp--;
}else if(bhd == 1){
bhp++;
}
if (bvd == 0){
bvp--;
}else if(bvd == 1){
bvp++;
}
}
//adds one to the array. If whichOne is 0 it adds to the player's score. If it's 1 it adds to the computers
void addOne(){
if (which == 0){//if it's the player's score
//Add one. This is the simpleist way I know how.
for (int i=0 ; i < 5 ; i++){//loop
if (playerScore[i] == 0){//if that value is a zero
playerScore[i]=1;//make it 1
break;//then go away
}else {//if it is 1
playerScore[i]=0;//make it zero and loop
}
}
}else if(which == 1){
for (int i=0 ; i < 5 ; i++){
if (compScore[i] == 0){
compScore[i]=compScore[i]+1;
break;
}else {
compScore[i]=0;
}
}
}
//Checks to see if anyone won.
if (compScore[0]==1 && compScore[2]==1 && compScore[4]==1){
win = -1;
}else if (playerScore[0]==1 && playerScore[2]==1 && playerScore[4]==1){
win = 1;
}
}
//checks the balls next position
void checkNext(){
//check's to see if a point has been scored
if (bhp == 13){
pIsPoint = true;
}else if(bhp == 0){
cIsPoint = true;
}
//if a point has been scored than skip over the rest of this stuff
if (pIsPoint == false || cIsPoint == false){
//checks the ball verticaly
if (bvp+bvd==15){
bvd = 0;
}else if(bvp+bvd==0){
bvd = 1;
}
//checks the ball horizontaly
if (bhp+bhd==13){//first on the computer side
if (bvp >= 10-cPaddle & bvp <= 10-cPaddle+4){
if(bhd==1){
bhd=0;
}else if(bhd==0){
bhd=1;
}

http://www.instructables.com/id/Pong-Playing-Flexible-Screen-on-a-Shirt/

fast = false;
}else if(bvp+bvd == 10-cPaddle || bvp+bvd == 10-cPaddle+5){
if(bvp != 0 && bvp !=14){
if (bvd == 0){
bvd=1;
}else if(bvd == 1){
bvd=0;
}
bhd=1;
}else if (bvp == 0 || bvp == 14){
bhd=1;
}
fast = false;
}
}else if(bhp+bhd==1){//then on the player side
if (bvp >= pPaddle & bvp <= pPaddle+4){//is it hitting the paddle in a normal spot?
//bounce the ball!
if(bhd==1){
bhd=0;
}else if(bhd==0){
bhd=1;
}
}else if(bvp+bvd == pPaddle || bvp+bvd-5 == pPaddle){//is it hitting the paddle on the corner
if(bvp != 0 && bvp !=14){//is it not up high or down low?
//Bounce the ball!
if (bvd == 0){
bvd=1;
}else if(bvd == 1){
bvd=0;
}
bhd=1;
fast = true;
}else if (bvp == 0 || bvp == 14){//is it up high or down low?
//bounce the ball!
bhd=0;
fast = true;//set the value to later make the ball move fast
}
}
}
}
}
int checkPaddlePos(){
//reads the pot and decides on the paddle position acordingly
if (analogRead(A15)<93){
return 0;
}else if(analogRead(A15)<186){
return 1;
}else if(analogRead(A15)<279){
return 2;
}else if(analogRead(A15)<372){
return 3;
}else if(analogRead(A15)<465){
return 4;
}else if(analogRead(A15)<558){
return 5;
}else if(analogRead(A15)<652){
return 6;
}else if(analogRead(A15)<745){
return 7;
}else if(analogRead(A15)<837){
return 8;
}else if(analogRead(A15)<=931){
return 9;
}else if(analogRead(A15)<=2014){
return 10;
}
}
void drawPaddles(){
//draw's the paddles in the correct spot and displays the score on the paddle
for(int i = 0 ; i < 5 ; i++){
if (playerScore[i]==1){
strip.setPixelColor(pPaddle+i, strip.Color(255, 255, 255));
}else if((playerScore[i]==0)){
strip.setPixelColor(pPaddle+i, strip.Color(255, 0, 0));
}
if (compScore[i]==1){
strip.setPixelColor(199+cPaddle-i, strip.Color(255, 255, 255));
}else if((compScore[i]==0)){
strip.setPixelColor(199+cPaddle-i, strip.Color(0, 255, 0));
}
}

http://www.instructables.com/id/Pong-Playing-Flexible-Screen-on-a-Shirt/

}
void clearScreen(){
for(int i=0; i<=210 ; i++){
strip.setPixelColor(i, strip.Color(0, 0, 0));
}
strip.show();
}
////////////////////////////////////////////////////////////Code End////////////////////////////////////////////////////////////

Step 8: Finished Product


Here you go. A video of the finished product.

http://www.instructables.com/id/Pong-Playing-Flexible-Screen-on-a-Shirt/

Image Notes
1. Want to play?

Related Instructables

LED Pong by
Chip Fixes

One Man
Electrical
Parade
Halloween
Costume by
brokenpipe

Rainbow Mega
Pong Clock by
Djandco

Ping-Pong
Blinky by
DaShroom

Arduino Beer
Pong Arcade by
PotNoodle

Cheap Iron Man


(Mark 3)
Costume with
working
faceplate, lights,
electronics by
andyr23511

Advertisements

Comments
3 comments

Add Comment

nerd7473 says:

Nov 5, 2013. 2:12 PM REPLY

very cool I will have to try something like this

ecsaul23 says:
Very nice! voted

http://www.instructables.com/id/Pong-Playing-Flexible-Screen-on-a-Shirt/

Nov 5, 2013. 10:05 AM REPLY

TheGreatS says:
Thanks!

http://www.instructables.com/id/Pong-Playing-Flexible-Screen-on-a-Shirt/

Nov 5, 2013. 10:13 AM REPLY

You might also like