Introduction: Make a Runway Ready Programmable LED Matrix Dress
About The Project
At NYFW this season, I teamed up with Zac Posen and Google to create a programmable LED Matrix dress to show on the runway. This dress was created as part of Google's Made With Code initiative and our challenge was to translate animated designs from Google's LED Dress project onto a real world garment that could be worn on the runway. Zac Posen designed the dress itself and girls from all over the world created patterns to show on the dress here. (P.S you can create patterns too!)
Our job was to build the brains of the dress and wire together the circuit. Enough preamble. Here's how to make the electronics behind a programmable LED Dress.
Project Stats:
- 201 individually addressable neopixels.
- 546 kBytes of memory
- 1 python script (to dump data onto the additional memory chips)
- 1 web dev portal to download JSON files from the coding project
- 2 yards of cotton muslin
- 18 amps at 3.7 V
- 30,000 characters (for 10 animations)
Here are materials that went into the project:
3 - 6mAh Batteries - https://www.sparkfun.com/products/8484Sparkfun353...
17 - Solderless(but do solder them) LED strip connectors - http://www.adafruit.com/products/1004?gclid=CPO17s...
1 - RGB Cable - http://www.amazon.co.uk/gp/product/B00CDJSKT4?ref...
7 - 1m Neopixel Strip - http://www.adafruit.com/products/1460Adafruit24.9...
16- Neopixels - http://www.adafruit.com/products/1559Adafruit34.9...
1 - Adafruit Flora - https://www.adafruit.com/products/659Adafruit19.9...
1 - Adafruit Flex Boards - http://www.adafruit.com/products/1518
2 - I2C Eeprom Chip - https://www.sparkfun.com/products/525
2 yards - Black Cotton Muslinhttp://www.amazon.com/Crafty-2-Yards-Cotton-Fabric-Black/dp/B004FEEXBO/ref=sr_1_1?s=arts-crafts&ie=UTF8&qid=1440075158&sr=1-1&keywords=amazon+black+fabric+crafty+cuts
1 Mini Lipo USB charger - https://www.adafruit.com/products/1304
2 JST Ports - https://www.adafruit.com/products/1863
3 - Fairy lights (bottom skirt)
3 - 100mf Capacitor
1 - 250 ohm resistor
2 - 4.7 k ohm resistor
1 yard - Diffusion Fabric http://www.amazon.com/ALZO-Diffusion-Fabric-White-...
Click here to download the Bill of materials for the upper shield of the dress
Big thank you to:
Charles Yarnold for technical support and general brilliance!
Team Nexus for additional technical (and moral) support
Team Made With Code for project development and leadership
Team 72 for keeping things on track!
* Some of the code in this instructable was written by Charles Yarnold - https://www.instructables.com/member/solex/
* Some images for this Instructable are from around the internet - Getty Images, etc.
Step 1: Grab a Stellar Fashion Designer Friend
For this project, we had the pleasure of working with Zac Posen, a well known NYC fashion designer. He supplied the garment pattern and we created out shield based off of his clothing pattern. To make a good shield and to have a place to hide batteries, we asked for something with a fitted bodice, an an overlay, and a flared skirt.
For your LED matrix dress, the garment you'd like to make a shield for can inform quite a bit about your construction. Where will you place the batteries? How will you get access to the On/off switch? How will you hide wires and conductive traces?
These are all important questions to ask when designing the dress itself.
Step 2: Planning: Grid, Power and Base Garment
In order to make sure the LED matrix works well, it's important to plan power distribution, grid layout, memory allocation, etc. Here are a few things to think about when planning your LED matrix dress:
1.) THE GRID
Making a programmable LED matrix dress sounds simple and fun until you start to consider how many individual units there are to write to to for the matrix itself.We began with a straight grid and ultimately decided to make a staggered and shaped grid that would fit the dress bodice better. This means, however, that using any sort of existing matrix library is no bueno as our grid had different numbers of pixels for each row. We needed to decide on this early so that it's possible to map our online design tool to each pixel on the actual dress.
2.) POWER
The neopixel uber guide provides some great information about using neopixels! Among that useful information is power needs for pixels. Each pixel, if 100% on full white draws about 60milliamps. That means 1 hour of power for a 201 pixel grid is about 12 amps. We wanted out dress to last 90 min without any color drop, so we used 18 amps of battery power at 3.7 v and distributed power every 66 pixels. It's important to have power distribute evenly or you'll get strange color changes over the grid.
Note that most lipoly battery chargers charge at about 1000milliamps/hour. If you want a full charge, make sure you leave 6 hours before the show must go on!
3.) MEMORY
Each animation is about 3,000 characters and each character is stored as an int (2 bytes). We had 10 animations and a transition between each one. For the animations, we would need 60,000 bytes or 60kbytes. Each Eeprom chip has 32kbytes of memory, so we needed 2 extra chips to hold all of our animations! Charles Yarnold, part of dev for this project, came up with a clever compression algorithm to store two numbers in each int so that we could make the best of our limited memory.
Step 3: Assembling Your Circuit (Prototype)
We built a prototype of the garment using copper braid and neopixel sequins. We were hoping to find alternative traces that would be flexible and easier to sew than wires, but nothing is as reliable as the real stuff!
The prototype had 201 neopixels all soldered onto 3 copper braid traces and coated with liquid electrical tape. This made for an uber thin and flexible shield that proved to be a little finicky.
-----
STEP-BY-STEP
1.) Organize neopixels in bundles by row.
2.) Measure copper braid for total row length. Cut braid for each row and solder signal of pixels onto a strand of copper braid.
3.) Clip behind each pixel as signal should not be connected.
4.) Measure power and ground for each row.
5.) Solder signal chain to power and ground, being mindful of where new power is added. To add additional power, disconnect VCC and add a new trace from the battery directly to the first pixel running on a new pack. Each battery line should have a 100uf bypass capacitor between power and ground.
6.) Solder together each row for your full grid.
7.) Attach pixel 1 of the grid to your flora and give it whirl!
----
We reordered components and get ready for build number two that involved thicker wires and more robust materials!
Step 4: Assembling Your Circuit (Final)
Assembling the circuit is a 2-3 day task with quite a bit of soldering, so grab a pal and get going over a long weekend!
PIXELS
The bottom two rows have 8 pixels each with 3" between pixels. This allowed us to curve them around the bodice seam of the dress. We used 4 row cables and removed one row to make these connections. It works well to strip and twist together the stranded wire and then place into the neopixel sequin hole. From here, you can solder a solid connection.
We used Pixel strip connectors to connect the upper 15 rows of the garment. These come with 4 rows, so I found it was best to trim some of the PCB at the end to fit snugly into the bottom 3 connectors. These are meant to be solderless, but I would certainly recommend soldering the pixel strips in for security.
ADDITIONAL COMPONENTS
You'll want to leave about a foot of wire between the Flora and the first pixel so you can find a good layout for the MCU, additional battery docs, etc.
Step 5: Programming Your MCU
The textile shield runs on an Arduino Flora! We set up the code to attach RGB colors to numbers. Each animation has a transition between it, so you can create transitions in strings of numbers.
ANIMATIONS
As for the main animations, we used an intermediary tool to take visualizations of animations into strings and strings of numbers that are pushed onto the flora using a python script. You can alter our script (attached) to just loop a simple transition that's much easier to program.
NEOPIXEL LIBRARY
We're doing this all using the Neopixel library, which makes writing to LED strips very simple. Once you have all of your grid assembled, try uploading the mwc_starburst script to try a sample animation! This script only works on a grdi with 201 pixels, so it may need to be altered if you're making a larger grid.,
Step 6: Adding Extra Memory
We needed to be able to store about 500 kbits of numbers for our animations, so EEProm i2C chips came to the rescue! These chips can be written to and read using the Arduino Wire library - https://www.arduino.cc/en/Reference/Wire.
MEMORY PROTOCAL
You can wire up to 7 I2C chips in series for additional memory that can hold over 50 animations! We only used two, but the numbering convention for these little guys happens when you wire different pins to power or ground. For us, we used 0x50 and 0x51.
SOLDERING
See the attached Fritzing guide to see how to hook up your chips. Be careful as these guys are VERY ESD sensitive. Make sure to ground yourself before even looking at them or you may cause some scrambled memory.
WRITING
Charles Yarnold created a script to write to the chips and push data from a CSV script over to the chips that the MCU could write and read from. To learn more about Python and Arduino, check out this guide from Adafruit. - https://learn.adafruit.com/arduino-lesson-17-email...
You'll need pyserial installed to write to the chips or else you'll get a mysterious time out error. If all is going well, you should see the RX light on your Flora blink every second or so as you upload.
Attachments
Step 7: Making the Textile Shield
The shield is a textile piece cut from cotton muslin that houses all of the electronics to go inside of the final dress! We made this system modular so that Zac's team could work on the "body" of the dress while we worked on the "brains". The night before the show, the shield was sewn into the exterior of the dress.
To make the textile shield, you cut out the upper bodice of a pattern just like if you were to make a garment.
SEAM ALLOWANCE
For the shield, it's recommended to leave extra seam allowance. Electronics add a bit of bulk and there's nothing like sewing in all of your wires to realize that something isn't long/ wide enough!
CUTTING
Cut out enough to make two versions of the garment's lining (this is what you'll use to make the shield). You'll contain electronics inside of these two versions, just like if you were to create a pillowcase.
SEWING
You'll want to first sew together the lower and upper shield so that you have two pieces. Once you start adding electronics, it's tricky to machine sew, so do your side seams, darts and neckline before attaching electronics. We sewed pockets and a flora UI pad into the shield to make it easy to use. Take freedom with your pattern and layout!
Step 8: Get Creative!
You can create new transitions and animations by ideating with GIFs and programming new series of numbers! The numbers line up to be the shield upside down, so you can use that as a visual aid for what you're creating.
Have fun creating your transitions and uploading sketches to your new pixel grid! See the video attached for animations that didn't quite make it to the runway.
