The LightArray Project

From the movie Tron:Legacy

A few years ago as I had just started tinkering with Arduinos, I watched the dazzling movie Tron:Legacy. It’s not a grade “A” movie but the visuals are unbelievable. The idea of using an Arduino to create something that could capture someone’s fascination like the effects in the movie popped into my head. I forgot about the idea for a awhile but then recently stumbled across the TLC5940 chip that makes using large numbers of PWM outputs a breeze (read “Dimmable LED controller” if you’re unfamiliar). I created an Arduino powered array of 32 individually dimmable LEDs to display light shows. I put the display inside a picture frame and now it’s a constant source of intrigue. In this post I’ll share both how I made the device and the code LightArray runs so you can build one yourself.

But first a demo:


Building a LightArray(Short Version)

Constructing the LightArray is somewhat tedious so I will describe how to make a 10″ x 12″ frame like mine briefly and leave a longer, more detailed version at the end of this post if you’re interested. To start you need to buy two 36″ x 1.5″ x 0.5″ pieces of some kind of hardwood. Cut them into a  10″ x 12″ frame and join them together with metal corner braces and wood glue. Next create a design for the light array. I chose a spiral but you can make anything that is an array of lights like a circle, line, etc. Insert the LEDs into quarter inch foam board that fits the inside of the frame snuggly. Next secure your Arduino and breadboard to a plastic backing and wire up the TLC5940 chips to test they work. Connect the plastic backing to the frame using hinges and secure the foam board with LEDs to the inside of the frame. Now you can begin to solder. Run one long continous wire by each LED to form the 5v connection by creating loops in the 5v wire like the symbol ➰ and connect them to the LEDs by making a fish hook with the LED wire. Next attach each individual wire from the TLC5940 output to it’s respective LED by snagging them together with double fish hooks. Afterwards solder all the joints together and tape them down to the foam board with electrical tape.  Tape a piece of thin poster board on top of the wiring so you can tuck the Arduino behind the frame without creating short circuits. Next tighten a thin piece of cloth over the front of the frame and secure it using a staple gun. Finally mount the frame and hang it.

Getting LightArray Code on the Device

To get the LightArray code onto your Arduino you will need to download the ArduinoLightArray library from bitbucket located here. Follow the instructions at the bitbucket link and you should be up and running.

Modifying LightArray and Writing Your Own Shows

LightArray has three open source projects, LightArray, ArduinoLightArray and iOSLightArray. LightArray is the core implementation written in c++. ArduinoLightArray and iOSLightArray are  implementations of LightArray on their respective platforms. To write your own code I would suggest working with the iOSLightArray for development as it is much easier to debug and visualize your shows. When you are finished paste your additions into the ArduinoLightArray library. If don’t have Xcode then consider using the test platform in LightArray/Tests or building your own platform implementation.

Creating your own shows is pretty simple. The only significant part is implementing the play method of a your Show subclass. Here is an implementation that does the Night Rider effect.

static const int nightRiderMinRequiredChannels = 4;
class NightRiderShow : public Show{
 virtual void play(){
  int numTimesToRepeat = 3;
   for (int i = 0; i < numTimesToRepeat; i++) {
    for (int channel = 0; channel < dev.numChannels(); channel++){//forwards
     if(channel - 1 > 0) dev.setChannel(channel - 1, 0.25);
     dev.setUpdatePause(channel, 1.0, 50);
    for (int channel = dev.numChannels() - 1; channel >= 0; channel--){//back
     if(channel + 1 < dev.numChannels()) dev.setChannel(channel + 1, 0.25);
     dev.setUpdatePause(channel, 1.0, 50);
NightRiderShow(Device &dev) : Show(dev, nightRiderMinRequiredChannels){}//

If you want to learn more check out the repos on bitbucket (LightArray, ArduinoLightArray, iOSLightArray). I do want to note that c++ is not my forte. I usually stick with java, objective-c and plain old c. Nevertheless I think I did a pretty good job with the code but I would love to hear your feedback.

Building a LightArray(Long Version)

There are many ways to build a light array but I will describe how I built my 10″ x 12″ frame. I think there is room for improvement in my construction process so feel free to do something different!

Supplies List for a 10″ by 12″ LightArray
- 2 pieces of 36″x0.5″x1.5″ hardwood like oak or poplar that won’t split easily. I used poplar and was very impressed.
- 4 metal corner braces with screws
- 1 set of small hinges with screws that will fit on the backside of the frame
- The smallest eye hook screws you can find
- A sheet of 0.25″ foam board that is atleast 10″ by 12″.
- An Arduino
- Two TLC5940s and appropriate resistors
- Solder
- Electical wire, probably 30′ to be safe. Try to get the most flexible wire you can.
- Electrical tape
- Breadboard big enough for two TLC5940′s
- A power supply for the Arduino
- 32 LEDs. Avoid the high frequency blue colors. Something aquamarine or lower would be best for the eyes.
- A thin synthetic twine for tying together different components
- Small drill bits like 1/64, 3/64 and 1/16. Check the instructions of the hinges and corner braces.
- Thin cloth to stretch over the front of the picture frame.
- Hanging wire and picture mounting D-rings.
- Painters tape
- Wood Glue (you might be able to skip this if you think the corner braces are sturdy enough)
- Plastic backing that is smaller than the frame but big enough to mount Arduino and breadboard to. More on this in the Backing for Arduino and TLC5940 section.
- Thin poster board or something similar that can cover the exposed wires on the back of the frame and prevent short circuits when you push the hinged Arduino/Breadboard panel behind the frame.
- Saw that can cut 45 angles
- Drill for drilling holes before installing small screws.
- Staple gun
- Soldering gun
- Xacto knife

The Frame
To build the frame use the following guide from Lowe’s. Make sure you build the frame so that it’s depth is 1.5″ and not 0.5″. You don’t need a high end saw for this. I used a manual miter saw.

Backing for Arduino and TLC5940

To connect the Arduino and TLC5940 to the frame we will use a thin backing like plastic to secure them to. I used an old plastic shelving unit to cut from. Get creative to find something similar.

Once you find a material, use the xacto knife to cut out an outline that can fit the Arduino and breadboard. Leave some room on the edges for the hinges. Use the drill to create holes for securing the arduino, breadboard and hinges with twine. See picture below for hole locations. I also used a small piece of then cardboard that I taped onto the back of the Arduino and breadboard to act as a sort of stabilizing bridge.


Close up of Arduino and breadboard attached to plastic backing

Using the holes in the Arduino tie it onto the plastic backing. Tie the breadboard to the backing by running the twine over the breadboard, through the holes and under the backing. I found that you can make the breadboard twine tighter by looping over the breadboard twice. Tie the hinges onto the backing by running one piece of twine through the a hole, under the backing, out of the other hole and tying it off. Again you can probably make it tighter if you loop multiple times. Finally connect the backing to the frame with the hinges. Put the loose end of the hinge on the inside of the frame. Make sure to drill holes before screwing the hinges in to avoid splitting the wood.

Configuring the Arduino and TLC
Use the following diagram to connect them.

After wiring them I suggest testing a few pins from each TLC chip to make sure it works.

Placing the LEDs
Remember it’s an array so you don’t have to make a spiral like it did. You could make a straight line or circle too. To make the spiral I kept drawing spirals on a piece of paper until I made one I liked. I took a photo of it, enlarged it and printed it off. I used a soft measuring tape to measure the length of the enlarged spiral. You can place the LEDs at regular intervals or have them get progressively tighter as they approach the center as I did. To actually get the spiral onto the 0.25″ foam board you need to cut it first. Cut the foam board down to the 10″ by 12″ dimension. Make sure the fit isn’t loose. I used sanding paper and scraping of the xacto to make sure it just barely fit into the frame.
To position the LEDs in the foam board, tape your outline onto the foam board and get something small and sharp to make a mark in the board like a tac. Measure the intervals from one led to another and poke through to mark the foamboard. You don’t need to poke all the way through. After you have marked the positions remove the taped outline and poke in the holes for the led cathode and anode. Make sure the holes are perpendicular to the line of the spiral. Place the leds into holes with the cathodes on the outside. This is important because you can easily solder all the cathodes with one continous wire in the soldering step. To make sure the leds dont fall through bend them out so the form a “V” shape. IMG_4495

Preparing the Frame For Wires
There are a lot of wires when you begin soldering and you will need something to hold them in place. I used 8 eye hooks positioned about 0.25″ down from the back of the frame on the inside. You can see the eye hooks in the picture above that shows the hole placement for the plastic backing.

Placing the Foam Board of LEDs into the Frame
Once you have placed the LEDs in the foam board you need to put the foam board into the frame. Unfortunately there is nothing convenient to secure the foam board so we will have to place eye hooks or nails in the inside of the frame. With the nails/eye hooks in place we can drill holes into the foam board and secure it to the nails using twine. IMG_4649

To begin this step, place a very small eye hook or nail in the inside of the top and bottom frame about a half of an inch from the rear of the frame. Next drill holes into the foam board about half an inch to the left and right of where the nail/eye hook will contact the foam board. For each nail/eye hook take a piece of twine and run it through the holes in the foam board and above the nail/eyehook and tighten it with a square knot. Now the board is securely placed in the frame.

Soldering the LEDs
I am by no means a great solderer and there could be better ways to join these wires like crimping them. However I will explain how I used solder to join them.
To start we need to wrap the LED cathode wires around one long continous 5v wire. Join the first LED, the center one, to the wire using the fish hook technique (make a fish hook with each wire and catch them on one another. Bend them back a little so they dont come unhooked). For the remaining 31 cathode wires run a loop into the long 5v wire near the led to make a loop shape like this symbol:➰. Make a fish hook with the cathode wire and run it through. Cut the 5v wire, run it through an eye hook you placed for wires in a previous step. Next you need to solder the wires that run will control the individual LEDs. You will need to use trial and error to figure out how long each wire needs to be as they are all different lengths. Try to use a strategy that groups wires together that go to one region. Join the anode and individual wire using fish hooks and solder them together. When you are done. Tape all the wires down to the foam board. Pay special attention to areas near the eye hooks that hold the wires.

Now you can finally see it work! Test the LEDs to make sure everything works.

Adding the Canvas
To add the canvas follow the instructions in this youtube video.

Hanging the Frame
I used eye hooks to hang my frame but I think D rings would have been better. Check out this youtube video if you need help. Find a nice place to hang the picture frame. Note that the picture frame leans to the side of the Arduino/breadboard panel and will hang off center. To counter this just shift the frame in the opposite direction. Place the your anchor a few inches in the opposite direction of where you want the true center to be. Finally use an anchor that can support the weight of the frame.

This is what my completed frame looks like from the back.


Upload Code and Enjoy
Follow the instructions at bitbucket page for ArduinoLightArray to upload the code. Plug your Arduino into the external power source and enjoy.