LED Art with Fadecandy Created by Micah Elizabeth Scott Last updated on 2016-09-15 04:59:38 PM UTC
Guide Contents Guide Contents Introduction Tools and parts Install some software Wire your LEDs Try some examples Play with light Write a sketch Keep trying new things Downloads Datasheets & Files Schematic Fabrication Print © Adafruit Industries https://learn.adafruit.
Introduction Individually addressable LEDs are everywhere. In the quest for a smaller, cheaper, smarter LED, the latest and hottest technology is the NeoPixel (http://adafru.it/cVZ), AdaFruit's term for the WS2812. This is an amazing little chip that integrates red, green, and blue LEDs with a controller chip into a single package. NeoPixels are inexpensive, bright, easy to use, and you can use them to build projects of almost any size. They show up in costumes, sculptures, vehicles, and signs.
These LEDs are capable of so much more. I believe that LED lighting can be nuanced, with wide ranges of brightness from blindingly intense to barely visible, saturated hues to subtle off-white. Getting this range of expression from LEDs can be super tricky, especially when the only tool you have at your disposal is the Arduino IDE. Fadecandy (http://adafru.it/cW0) is a project that tries to solve this problem, by making LED art both easier to build and more expressive.
Fadecandy works with any WS2811 or WS2812 LEDs, and you can program your LEDs using many different environments. This tutorial covers one particular LED module and one particular programming environment. We'll be programming an 8x8 NeoMatrix (http://adafru.it/1487) in the Processing (http://adafru.it/cV8) language. You'll be doing some programming and some basic electronics assembly. If you aren't familiar with programming or electronics yet, don't worry- there are plenty of tutorials on learn.adafruit.
Tools and parts Basic electronics tools • Soldering iron • Solder • Wire • Cutting tools • Multimeter • Tape This might be a good excuse to make friends with someone who has a soldering iron, but if you want to buy a set of tools Ladyada's Electronics Toolkit will have everything you need. A computer, running Mac OS X or Windows 7 or later. It's also possible to use Fadecandy with Linux computers including the Raspberry Pi, but that isn't covered by this guide. A Fadecandy Controller board.
that's all you need. A matching Barrel Jack. This will give you a way to connect your power supply to the LEDs. There are many options, but Adafruit sells a basic jack that will work with the power supply we're using. An Adafruit NeoMatrix. These are the lights you'll be controlling in this tutorial. This one board has 64 of the WS2812 pixels, and it's the perfect size for one of the Fadecandy controller's eight output pins. Some things to cast light on. It's fun to have some objects to illuminate.
Install some software Processing is a programming language that's especially convenient for creating multimedia art. If you don't already have it installed, head to the Processing.org web site (http://adafru.it/cV8) and download it. On Mac OS X, the .zip file you download will have a Processing application inside it. You can drag that to your Applications folder or anywhere else you like. On Windows, the .zip file will contain a folder. You can drag that folder anywhere you like.
Great! Now for the next thing we'll need: The Fadecandy software. You can download this from the releases page on GitHub (http://adafru.it/cW3). The link you want is the "Source code (zip)". This package contains both the source code and the binaries you'll need for this tutorial. The specific release we're using here is Fadecandy 01 (http://adafru.it/cW4). © Adafruit Industries https://learn.adafruit.
This will be another .zip file. When you extract it, you'll see a lot of things. This package contains everything related to the Fadecandy project, including things like the source code for the board's firmware, and CAD files for the circuit board layout. You can ignore most of its contents for now. There are two things we'll need from this download: The Fadecandy Server (fcserver) program, in the bin directory Processing examples, in the examples directory © Adafruit Industries https://learn.adafruit.
First, run the fcserver program. This program runs in the background and connects your Processing sketches with the Fadecandy Controller board. It also has a simple web interface you can use to test your LEDs. On Mac OS, double-click the fcserver-osx file in bin On Windows, double-click fcserver.exe in bin This program will run in a Terminal window. If all is well, you should get a message like "Server listening on 127.0.0.1:7890".
What is fcserver listening for? Three things, actually: Programs using the Open Pixel Control (http://adafru.it/cW5) protocol to talk to your LEDs Browser-based programs using WebSockets (http://adafru.it/cW6) to talk to your LEDs Web browsers requesting an HTML-based user interface Let's try out the browser interface. Now that fcserver is running, you can navigate your web browser to http://localhost:7890 (). You should see a page like this one: © Adafruit Industries https://learn.adafruit.
If you plug in a Fadecandy Controller board, it should show up in the Connected Devices section. No need to reload the web page. The bottom section shows you how the server is configured. This isn't really important unless you have special requirements or you're using multiple Fadecandy Controller boards, but you can read more about this in the Fadecandy server configuration (http://adafru.it/cW7) documentation. That's all the software you need for this tutorial.
Wire your LEDs Wiring up your Fadecandy Controller will require a little soldering, since LED strips and arrays come in all different shapes and sizes. The Fadecandy Controller board is small enough you can incorporate it directly into your art projects. Every project will need at least one USB connector and at least one power connector. First, let's get acquainted with the Fadecandy Controller. © Adafruit Industries https://learn.adafruit.
This is the component side of the Fadecandy Controller. At the top, you'll see a Micro USB © Adafruit Industries https://learn.adafruit.
connector. This is how Fadecandy gets data from your computer, and how it powers itself. The LEDs themselves draw so much power that they need a separate power brick, but the controller board requires very little power. At the bottom, there are eight outputs. Each output can drive a chain of up to 64 LEDs. In this guide, we're running an 8x8 matrix with exactly 64 LEDs. It could connect to any of the eight outputs, but by convention we'll start with the first one (labeled with a Zero).
This is the flat side of the board, with the large "Fc" logo. The "hacker port" below is used during manufacturing. If you're interested in doing really strange things with your Fadecandy board it may be handy, but most people can totally ignore these pins. There are many ways to incorporate the Fadecandy controller into your project. The board is small enough you can use zip-ties and heat shrink tubing to incorporate it into your © Adafruit Industries https://learn.adafruit.
project's wiring harness, or you can mount it with double-sided foam tape, or you could design a bracket that it snaps into. (The board dimensions are 0.8 x 1.25 inches.) This is the NeoMatrix. It has two groups of three holes, labeled "DOUT / VDD / GND" on one side, and "GND / VIN / DIN" on the other side. GND: Ground. This completes the electrical circuit for power and for data. All of the GND pins are the same on this board. VDD: 5 volt power. This is where we power the LEDs.
So, let's start with power. We're using abarrel jack (http://adafru.it/373) that matches the plug on our power brick (http://adafru.it/658). These jacks have three pins. The one on the side isn't used here, it's just for detecting when a plug has been inserted. The other two pins connect to the outside casing of the barrel plug, and the center pin. In the most common arrangement, this outside shell is negative (ground) and the inner pin is positive.
Following the polarity on the diagram above, we'll put the black probe on the pin that attaches to the outside casing of the plug, and the red probe goes on the center pin. If all is well, you should see a positive number close to 5V. The third pin isn't used, and you might find it convenient to cut that pin off. Now we'll get ready to attach wires to the barrel jack. © Adafruit Industries https://learn.adafruit.
If you have multiple colors of wire, the tradition is to use black or green for ground and red or another bright color for positive. I used red and black wire. This wire should be relatively thick, since it has to carry several amps of power. I used 20 gauge stranded wire. Prepare your two pieces of wire by stripping off about a quarter inch of insulation. You'll be putting each wire through the hole in your barrel jack's terminal, wrapping it around, and soldering it. © Adafruit Industries https://learn.
© Adafruit Industries https://learn.adafruit.
© Adafruit Industries https://learn.adafruit.
© Adafruit Industries https://learn.adafruit.
The barrel jack is almost ready to use! You'll want to insulate it, though, so you don't have to worry about metal objects bridging the two power terminals. It's especially important to watch out for short circuits when you're using such a large power supply! If you have heat shrink tubing or electrical tape, this would be a good time to use it. But duct tape works fine too. © Adafruit Industries https://learn.adafruit.
These wires will go to the VDD and GND pins on the NeoMatrix. Since we'll need a GND pin for the Fadecandy board too, it's convenient to attach these wires to the side of the NeoMatrix with DOUT instead of DIN. © Adafruit Industries https://learn.adafruit.
© Adafruit Industries https://learn.adafruit.
© Adafruit Industries https://learn.adafruit.
© Adafruit Industries https://learn.adafruit.
I also like to put a little solder on the other side, where the wires come out. This adds a little mechanical strength, making the wires less likely to break. It helps to keep these wires flat against the board when you do this, since you'll want the NeoMatrix to lay flat when you're using it. © Adafruit Industries https://learn.adafruit.
© Adafruit Industries https://learn.adafruit.
© Adafruit Industries https://learn.adafruit.
Alright! Now we can power our LEDs. Next, we need to get data from the Fadecandy Controller to the NeoMatrix. Just like power, we need two wires for data. The positive wire (DIN) carries video data, and the negative wire (GND) completes the circuit. The recommended way of wiring the Fadecandy Controller's ground (GND) wire is to run separate wires from the Fadecandy Controller to your LED strips, and to keep its ground wire paired with its data wire.
© Adafruit Industries https://learn.adafruit.
© Adafruit Industries https://learn.adafruit.
The other end of this wire pair connects to channel Zero on the Fadecandy Controller. The GND wire needs to connect to the - terminal on the Fadecandy, and the DIN wire connects to +. There are tiny + and - labels on the board, or you can remember that the pins nearest to the edge are all -. © Adafruit Industries https://learn.adafruit.
© Adafruit Industries https://learn.adafruit.
© Adafruit Industries https://learn.adafruit.
© Adafruit Industries https://learn.adafruit.
Congrats! Your wiring is all done, and now you have a NeoMatrix that's ready to attach to your computer. © Adafruit Industries https://learn.adafruit.
Try some examples Now your hardware is ready! Let's try it out. If you don't still have fcserver running from earlier, start it. Plug power into your LEDs Plug the Fadecandy Controller into your computer with a Micro USB cable Open your web browser to http://localhost:7890 () You should see your Fadecandy Controller listed underConnected Devices. If you're on a Mac, this should happen nearly instantly.
Open Processing File -> Open Navigate to the processing folder inside the examples folder from the Fadecandy package. Open grid8x8_dot.pde, inside the grid8x8_dot folder. Press the Run button, in the top-left of the window. The large orange glowing dot follows your mouse. Each of the tiny single-pixel dots represents one of your 64 LEDs. With Fadecandy's Processing library, it's easy to create effects that draw to the screen and sample specific on-screen pixels for each LED.
You can see the code for this example in the Processing window: OPC opc; PImage dot; void setup() { size(640, 360); // Load a sample image dot = loadImage("dot.png"); // Connect to the local instance of fcserver opc = new OPC(this, "127.0.0.1", 7890); // Map an 8x8 grid of LEDs to the center of the window opc.ledGrid8x8(0, width/2, height/2, height / 12.0, 0, false); } void draw() { background(0); © Adafruit Industries https://learn.adafruit.
// Draw the image, centered at the mouse location float dotSize = height * 0.7; image(dot, mouseX - dotSize/2, mouseY - dotSize/2, dotSize, dotSize); } If you need a refresher on Processing syntax, be sure to keep the reference (http://adafru.it/cW8) handy. The OPC object we're using is the Open Pixel Control client that comes with Fadecandy. There's a reference for OPC.pde (http://adafru.it/cW9) in Fadecandy's documentation.
Play with light If you're following along, at this point you have the grid8x8_orbits example running on your NeoMatrix. It looks like this: It's a really simple example, but there's already a lot going on. There's a huge range in brightness, from pixels that are just barely on to pixels that are blindingly bright. Colors mix in the center. By themselves, the LEDs convey some of this, but there's also just an overwhelming sense of brightness that results from the light being so concentrated in each pixel.
The paper acts like a rear-projection screen. In signal processing terms, it's also acting like a low-pass filter (http://adafru.it/cWb) or blur. The hard edges of each LED are filtered out, and the result looks much more like what appears on-screen. Next, let's take the same piece of paper, crumple it up, then flatten it. This adds a lot of interesting texture, and you can start to see how the moving light interacts with a complex 3D object.
Once you get an idea of what shapes look interesting, you can try fabricating your own. This is a shape I made with a Makerbot (http://adafru.it/cOp) 3D printer: © Adafruit Industries https://learn.adafruit.
Write a sketch At this point we've assembled a NeoMatrix and Fadecandy Controller, we tried some examples, and we put some materials in front of the LEDs to see how they look. Now let's try making a Processing sketch from scratch. In this example, we'll make a simple particle system that creates expanding wavefronts in response to mouse gestures. Here's how it looks: (Direct link to the video (http://adafru.it/cWl)) So that's shiny. Let's write some code! To get the OPC.pde library (http://adafru.
opc = new OPC(this, "127.0.0.1", 7890); opc.ledGrid8x8(0, width/2, height/2, height / 16.0, 0, false); } We made the window square, which is more convenient when we're working with a square NeoMatrix. And while we're at it, we'll select the P3D renderer for Processing. This makes it much faster at drawing images. Since we'll be drawing a large number of particles, this is really important! Next, we added the ledGrid8x8() command. This is a shortcut for creating 8x8 LED matrices.
Now let's add an image. Even though LEDs like this are more about creating interesting light patterns than displaying video, images can be super useful as building-blocks for these light patterns. It may be helpful to think about images as if they're textures or color look-up tables. In this case, we're creating a particle system that uses many copies of the same image to create a moving field of light.
The texture needs to go in a data folder inside your Processing sketch's folder. Save it as ring.png inside this folder. Now let's try out this texture! The sketch has a few new parts: colorMode (http://adafru.it/cWc)() switches to the Hue, Saturation, Brightness color space. loadImage (http://adafru.it/cWd)() loads ring.png into a PImage variable. drawRing() draws our texture with a particular hue, intensity, and location Temporary code in draw() puts a single ring at the mouse cursor location Try it out.
opc = new OPC(this, "127.0.0.1", 7890); opc.ledGrid8x8(0, width/2, height/2, height / 16.0, 0, false); } void drawRing(float x, float y, float hue, float intensity, float size) { blendMode(ADD); tint(hue, 50, intensity); image(texture, x - size/2, y - size/2, size, size); } void draw() { background(0); drawRing(mouseX, mouseY, 25, 80, 400); } You might also notice a little bit of flicker at the edges, where the LEDs that are just barely on rapidly flick between on and off.
Now let's make a particle system! I added a Ring class to manage each particle. The individual particles have a lifespan during which they expand and fade. Particles randomly respawn at the mouse cursor location. The mouse cursor location itself is smoothed so that we don't see such discrete bursts of particles every time the mouse moves by a pixel. I decided to use mouse speed and direction as inputs. Mouse speed controls the intensity that new particles spawn with, and mouse direction controls their hue.
The Ring class has a respawn() function which computes a new particle's intensity and hue based on the speed and angle of mouse motion. As parameters, it takes the X and Y coordinates for a previous and a new mouse position.
{ size(500, 500, P3D); colorMode(HSB, 100); texture = loadImage("ring.png"); opc = new OPC(this, "127.0.0.1", 7890); opc.ledGrid8x8(0, width/2, height/2, height / 16.0, 0, false); // We can have up to 100 rings. They all start out invisible. rings = new Ring[100]; for (int i = 0; i < rings.length; i++) { rings[i] = new Ring(); } } void draw() { background(0); // Smooth out the mouse location. The smoothX and smoothY variables // move toward the mouse without changing abruptly.
Keep trying new things If you made it this far, you have all the tools necessary to start exploring the creative possibilities of programmable LED lighting. There's more documentation on the Fadecandy project available in itsGitHub repository (http://adafru.it/cDN): Introduction (http://adafru.it/cW0) Processing OPC client (http://adafru.it/cW9) Server configuration (http://adafru.it/cW7) Open Pixel Control protocol (http://adafru.it/cWf) WebSocket protocol (http://adafru.
Try using more lights. One Fadecandy board can control up to 512 pixels, and you can connect many Fadecandy boards to one computer using USB hubs. Make your art portable with a Raspberry Pi or other single-board computer. And of course, writing more visual effects. There are also many different strategies for writing effects. This example covered using Processing and mapping each LED to a pixel on the screen, but there are plenty of other options.
© Adafruit Industries https://learn.adafruit.
Downloads Datasheets & Files Github Repository for FadeCandy (http://adafru.it/cDN) Fritzing object in Adafruit Fritzing library (http://adafru.it/aP3) Schematic Fabrication Print © Adafruit Industries https://learn.adafruit.
© Adafruit Industries Last Updated: 2016-09-15 04:59:37 PM UTC Page 60 of 60
