2019-05-08 | By Adafruit Industries

License: See Original Project Circuit Playground

Courtesy of Adafruit

Guide by Erin St Blaine

Overview

Add animated lights to all your pet beasties with NeoPixels and Circuit Playground.

 

This guide will detail how I added lights to a hand-made paper mache dragon. The same techniques will work any sculpted or paper-crafted hollow beastie, dragon, unicorn, or monster. You could also add lights to a pre-made halloween mask or decoration. Circuit Playground makes it easy to bring all your monster friends to life.

Parts & Materials

This dragon is powered by a Circuit Playground Express. It has two different kinds of lights: a 30/m NeoPixel strip, and a 4" pitch NeoPixel strand.

Power is provided by a 5v power supply that plugs directly into the Circuit Playground's USB port. I've added JST connectors between the Circuit Playground and the NeoPixels to make it easy to mount and adjust the dragon. And it has a capacitive touch on/off switch made from copper tape.

• 1 x Circuit Playground Express
• 1 x NeoPixel Strip
• 1 x NeoPixel Strand
• 1 x 26 awg Wire
• 1 x Power Supply
• 2 x 3-Pin Connectors
• 1 x Copper Tape

Materials Needed for a Paper Mache Dragon

• Newspaper and masking tape
• Cotton cloth (an old pillowcase or bed sheet works great)
• White flour and white glue
• 16 g wire (coat hanger wire)
• Hot glue
• Acrylic paints
• Polymer clay for the claws & teeth
• Mounting board
• Ostrich egg shell

I also used an assortment of tools including:

• Soldering iron & accessories
• Wire cutters
• Dremel / rotary tool
• Miter saw for making the mounting board
• Drill with 1/2 inch drill bit

Wiring Diagram

We've got three different sets of pixels. The individual pixels (4 pixels from the NeoPixel strand) will become the eyes and the fire light inside the mouth. The long NeoPixel strip will become the dragon's spines. The lights on the face of the Circuit Playground will illuminate the dragon's egg.

NeoPixel Strand (4 pixels):

• Red wire to VOUT
• Middle wire to A2
• Remaining wire to GND

NeoPixel Strip (20 pixels):

• 5V to VOUT
• DIN to A1
• GND to GND

Also solder a long wire to pin A4, which will connect to the on/off capacitive touch copper tape switch.

Code with MakeCode

We'll use Microsoft's drag-and-drop code editor to create the animations. MakeCode is an easy way to get up and running with the Circuit Playground Express. No prior coding knowledge is needed, and it's an easy way to experiment and learn to think like a coder.

Once your code is written, you'll simply plug your Circuit Playground Express into your computer via its USB port and click the "reset" button. All the lights will turn green and your Circuit Playground will appear as a drive on your computer called CPLAYBOOT. Drag your downloaded code onto this drive to program the Circuit Playground Express. Easy!

If you get a flash drive names CIRCUITPY, no worries, press the reset button twice and CPLAYBOOT should show up. It might take a time or two but it does work.

Head over to this Intro to MakeCode guide for more info on getting started with MakeCode.

If you want to skip right to the end and work backwards, here's the completed MakeCode project.

Paper Dragon MakeCode

Code Design & User Interface

We have three different physical sets of lights:

1. Circuit Playground's onboard lights, which will illuminate the egg
2. Our 30/m NeoPixel strip, which will become the dragon's spines
3. Our 4" pitch NeoPixel strand, which will become the eyes and the lights inside the mouth

We'll need to address all these separately in the code, and for the NeoPixel strand we'll need to get even trickier, since we want the eyes (pixels #0 and #1) to act differently than the mouth lights (pixels #2 and #3).

For my dragon, I want a white flickering, pulsing light inside the egg. I want the spines to have a flickering flame effect and the inside of the mouth to be the same, so they both appear to be lit by the dragon's internal fires. And my dragon will have beautiful whirling rainbow eyes.

We'll also code a capacitive touch on/off switch, wired to pin A4. Since our dragon is plugged into the wall, a software switch works fine - we can turn the lights on and off with code. If you're making a battery powered dragon, you may want to add a physical on/off switch, since the way we're doing it here leaves the Circuit Playground Express powered on all the time and that will drain your battery.

Light Effects Code

Head to www.makecode.com and select the Circuit Playground Express. Create a new project and give it a name. I called mine Paper Dragon.

From the LOOPS tab, drag an instance of on start into your workspace (if it's not there already). There should also be a forever loop. Anything in the on start loop happens once, when your project boots up, and anything in the forever loop will happen over and over, forever.

Variables

The first thing we'll do is create our variables. These are software containers that hold values for us. I made six different variables. Strip and strand will refer to the two different physical LED strips/strands. Switch will be used in our software on/off switch. Eyes and rainbow will be used to control the rainbow eyes, and index will be used for counting.

NeoPixel Setup

Click the LIGHT tab, and a new tab will appear beneath it labeled NEOPIXEL. Anything in the LIGHT tab will refer to the lights on the face of the Circuit Playground (for our egg), and anything in the NEOPIXEL tab will refer to the light strands we add (for our spines and eyes and mouth).

Drag two instances of set strip to create strip on A1 with 30 pixels into your on start loop. Change the values to reflect your actual physical setup. In my case, my 20-pixel strip for the spines is soldered to A1, and my 4-pixel strand for the eyes and mouth is soldered to A2.

Next we'll set the brightness of the onboard pixels to 255, so they're nice and bright and will show up through the egg shell. From the LIGHT tab, drag an instance of set brightness to 20 and change to 255 (maximum brightness). You'll be able to adjust this later on.

The last thing we'll do in the on start loop is to set our switch variable to true. Doing this will make sure that the lights default to on when we plug the dragon in. From the VARIABLES tab, drag set switch to 0 in to your on start loop. You may need to choose the switch variable from the dropdown. Then go to the LOGIC tab and scroll to the bottom to find true.

Fire Light Flicker Animation

From LIGHT > NEOPIXEL drag two instances of strip set pixel color at 0 to red. Change the second one to refer to strand.

From the LIGHT tab, find the hue 255 sat 255 val 255 block. Use it to replace the red in both instances.

This little bit of awesomeness will give us lots of control over the colors. Hue refers to what we usually think of as a color: red, orange, green, etc. Red is at 0, yellow is around 50, blue 160 and it cycles back around to red at 255.

Saturation (sat) controls how intense the color is. For example, given a hue of 0 (red), saturation=0 comes out plain white, 100 is sort of pinkish, and 255 is full, bright red.

Value (val) refers to the amount of color. Think of it as intensity or brightness.

There's lots of info about HSV colors available on Wikipedia if you want to know more.

Spines

For the dragon's spines, we want a flickering fire effect. To achieve this, we'll add a bit of randomness to the hue and value fields, as well as to which pixel we're affecting. The more randomness we can add, the more natural the flame effect will seem.

From the MATH tab, drag three instances of pick random 0 to 10 into your workspace. Place one into the set pixel color field, one into hue, and one into val. We'll leave sat alone for now since we want our flames to be really orangey and fully saturated.

Change the first pick random to reflect how many LEDs you have in your spine strip. Change hue to read 5 to 20, to get a smattering of reds and oranges. Change the val to 100-200.

I arrived at all these values through trial-and-error. Change them to get the effect you like. Messing with the hue range can give you icy-blue flames, or golden yellow flames, or wicked poison green flames. It's your dragon! Let your code reflect her personality.

Download your code to your Circuit Playground and see how you like it. Does it look flamey enough? Mine didn't. I wanted more flickers, more randomness, and more than one LED changing at once. So I copy/pasted the code block to double it, then changed the hue values in the second block to 10-25. Now I have both a random reddish-orange flicker and a random orange-yellow flicker happening. This looks fantastic. I'm happy with the spines!

Mouth

I want a really similar fire effect inside the dragon's mouth. I've got two pixels hidden in the throat to achieve this. The NeoPixel strand has 4 lights on it. The first two lights (numbered 0 and 1) are glued into the eye sockets, so that leaves the last two (numbered 2 and 3) to illuminate the mouth.

Copy/paste the strand set pixel color.. block so you have two of them. Assign one to pixel 2 and one to pixel 3. Then, copy/paste the hue / sat / val block from the block above. Leave val at 255, and choose a random hue for inside the mouth. I chose 0-20, giving me a slightly redder color than the spines.

Download the code again and test to see if you like it.

Eyes

I want my eyes to be beautiful whirling rainbows, in synch with each other. To make both pixels (0 and 1) on our strand animate together, we'll use a for loop. For loops are used to refer to an array, or block of pixels, all at once.

Drag an instance of for index from 0 to 4 into your forever loop. Replace the index variable with the eyes variable we made earlier, and change the 4 to 1.

Copy/paste your strand set pixel block from above and drag it inside the for loop. Change the pixel color variable to eyes, and then the hue value to the rainbow variable we made earlier. Then, add a change rainbow by 1 block from the VARIABLES tab.

This will slowly rotate the hue of pixels 0 and 1 through the rainbow. Download your code and be sure it's all working!

With the eyes and mouth doing their thing, I decided I wanted a little more randomness in the spines. I added a strip set brightness block from the NEOPIXEL tab and chose some random colors for the brightness. Now it's even flicker-ier!

Egg

Now let's add lights to the face of the Circuit Playground Express for inside the egg. I want a nice flickery white. The easiest way to do this is to play with the saturation of the pixels. Pulling the saturation all the way down to 0 will take all the color out, leaving us with a simple white color.

Since we have 10 lights on the face of the Circuit Playground, we'll use another for loop to address all 10 pixels. Drag (or copy/paste) a for loop and this time make it read 0 to 10, since we have 10 pixels.

From the LIGHT tab, drag two instances of set pixel color at 0 to red into this loop, and also a set brightness block.

Replace the pixel number with pick random 0 to 10, to apply the flicker randomly to all the pixels. Replace the red with hue / sat / val again. Set the sat to 0 for white, and add some randomness to val for a flicker.

Add more variety to the brightness as shown.

Finally, slow the animation down by adding a pause 100 ms from the LOOPS tab. I like mine running a 225 ms pause.

That's all the lighting effects. Next we'll move the code into a function for safe keeping, and code the capacitive touch on/off switch.

On/Off Switch

First, let's get a little organized. We'll take all the light-effects code we just wrote and move it into a function. A function is basically a container that holds on to your code for you, and keeps it safe and out of your way. We can give it a name and then just call the name when we want the code to run.

Click the ADVANCED tab and find FUNCTIONS. In this tab, make a new function. I called mine dragonLights. The new code block will appear in your workspace. Drag everything that was inside the forever loop into this new function. Move it out of the way.

Now we've got space inside the forever loop to work on the switch. Remember how we made a switch variable back in step one? It's time to put that to use. We'll tell MakeCode to run the dragonLights code if switch is set to true, or to turn all the lights off if it's set to false.

Head to the LOGIC tab and drag a conditional statement into your blissfully empty forever loop. Add a comparison block, and then drag in the switch variable from the VARIABLES tab. Make it read if switch = true then.

Then, from the ADVANCED > FUNCTIONS tab, drag call function dragonLights into the first slot in the conditional loop.

To make the lights turn off if switch <> true, we'll need three lines of code since we have three different sets of LEDs.

Drag set all pixels to red from the LIGHT tab and set it to black. This will turn off the lights on the face of the Circuit Playground (the egg lights).

Put a strip clear and a strand clear into this block from the NEOPIXEL tab.

That should do it! All three sets of lights will now go off if switch is NOT set to true.

The last thing we need to do is to build a way to toggle the switch variable. From the INPUT tab, drag an instance of on button A click into your workspace. Change button A to pin 4, since that's where we're going to solder on the capacitive touch switch.

Now build the switch code as shown. It's easiest to copy/paste the conditional block from the forever loop to start, delete the code that's in there, then add set switch from the VARIABLES tab.

You'll need to mess with the + and - buttons in the else section to get it to read else if instead of else.

Now, each time pin 4 is touched, the switch variable will toggle between true and false. If it's true, the lights will come on and if it's false, they'll go off.

Download your code and test it out. You don't need to have anything wired to pin A4 just yet -- it should work simply by touching the pad.

Troubleshooting

If you're having trouble getting the code to download, head over to the Circuit Playground Express Intro Guide for help.

Make the Dragon

I made this dragon with lots of help and techniques from the fantastic book Paper Mache Dragons by Dan Reeder. It was my first time (as an adult) working with paper mache, and his book is both amusing and inspiring. I won't go into a lot of detail about the paper mache build process in this guide. Dan is the expert! Watch his videos and get his book.

Since my dragon is wall-mounted, it's really only a little more than half a dragon. It has one full leg and one full arm. The head is complete, but the body and tail are bas-relief style, sitting flat against the mounting board.

Step 1: Layout

I got a piece of cardboard about the size I wanted the finished project to be. I took a sharpie and sketched out my dragon - where her head would be, the shape of her tail, and where I wanted the egg to sit. This changed a bit throughout the project but it really helped a lot to have a full-sized reference template.

Step 2: Body Pieces

I used crumpled newspaper, coat hanger wire and lots of masking tape to rough out the shapes for the head, neck, body, arm, leg, and tail. I went ahead and made the body and tail full-sized at this point, and cut them in half for the bas-relief effect later on. It's just easier to make things round-ish at this stage. I left good sized wire loops at the ends so I had something to attach them together with later on.

Step 3: Teeth and Claws

I made my teeth and claws out of glow-in-the-dark Fimo polymer clay. I didn't know how many teeth I'd need so I just made lots, and varied the sizes from about 1/2" to about 1.5". For claws, I needed just three for each limb sized around 2-3" long, but I made a few extras of varying sizes anyway. I'm sure they'll come in handy for another project.

Bake them in the oven according to the directions on the package. Teeth and claws, teeth and claws. Grrr.

Step 4: Paper Mache

Mix some warm water and white flour until it's a medium-thick paste. Soak strips of newspaper and wrap them all around your body pieces. Make sure there are at least 3-4 layers of newspaper everywhere (more, if you're making a larger, heavier dragon). Let them all dry completely.

Step 5: Assemble the Pieces

Cut the body and tail in half, leaving only the left half of the dragon, and empty out the paper mache shell so there's room for the wiring to get through. This will create a flat side that will sit nicely against the mounting board. Use copious amounts of masking tape and the wire loops to attach all the bits together. The layout sketch is very useful at this point to make sure you're getting the size and shape you want.

Cut the jaw off the head and tape it back on in the position you like, then add the teeth with hot glue. Empty any extra newspaper out of the inside of the mouth and poke a hole at the back of the head so it's easy to get the wires and LEDs in later on.

Step 6: Hands & Claws

Use more newspaper and masking tape to make a hand and a foot on the ends of the limbs. Spend a little time getting all the bumps and knuckles just right. The wire mounting point will ensure that you can bend these around a bit and get the placement just right over the egg. Glue the claws on with hot glue.

Step 7: Dragon Egg

I used a real ostrich egg shell for this. Did you know you can buy blown ostrich eggs on Amazon? We live in the future. They diffuse light beautifully.

Mark where you want to cut the egg. Don't draw on the egg with a sharpie! The sharpie soaks in and then doesn't come off (even with 99% alcohol). Instead, place a piece of masking tape around the egg's International Date Line and then mark on that.

A vice is helpful for holding the egg still. Cut along the line carefully with a rotary tool and cutting wheel. You'll want a mask and eye protection, and very good ventilation! These things smell like a mixture of burning hair and week-old battlefield when you cut into them.

My egg had a hole in the bottom where the yolk had been blown out, so I cut to one side of that instead of directly through the center. Also, this way, if you mess up one side, you've got another chance with the other side.

Step 7: Wings & Horns

Add any extra details like wings and horns using tape-wrapped wire for supports. I wrapped these in cloth mache (cloth soaked in white glue) before attaching them. We'll add "skin" for the dragon with cloth mache later on, after we've added the electronics.

Electronics Assembly

To keep this project as magical as possible, we want to hide all the wires inside or behind the dragon. This calls for a little extra wire. I like this 26awg silicone stranded wire. It doesn't break and it's really easy to work with. I keep a whole drawer full of the stuff in lots of various colors.

It will make your life a bit easier to use some JST connectors to connect the Circuit Playground to the lights inside the dragon. We'll solder the connectors on, then run longer wires to the two different LED strips. Then we can mount the dragon to the board and thread the connectors through a couple small holes we'll drill in the mounting board.

Solder two female 3-pin connectors as shown:

• 2 red (or right-side) wires to VOUT
• 2 middle / green wires to A0 and A1
• 2 blue (or left-side) wires to GND

Not all JST connectors are color coded, so if yours are just plain black, you'll want to double check to be sure the other end of the connectors are soldered the same way (i.e. not upside-down). When the connectors are plugged into the LED strips, you'll want to be sure VOUT goes to + and GND goes to - on the strips.

Find the IN end of the LED strand. It should have a male connector on it. Cut the connector off.

Measure the distance from the head of your dragon to where you want to place the Circuit Playground Express, taking into account some extra wire length so the wires stay hidden inside the dragon. Add a few more inches to this for good measure. It's easy to bunch up extra wire inside the dragon or behind the mounting board, but hard to add more wire if it's too short, so be generous here. Cut a red, yellow, and black wire to length.

Solder your three long wires to each of the three wires on the LED. Solder red to the red-striped wire, yellow to the middle wire, and black to the remaining wire.

Then, go to the other end of the three long wires and solder the connector back on in the same order. Plug your connector in and make sure your strand lights up.

Now do the same thing with your NeoPixel strip. Solder red to +, yellow to IN and black to G, and add a male connector back on at the end of the extension wires.

Once you're sure the strip is working, it's helpful to seal up the end of the strip with your solder connections with hot glue. Just squirt a little inside the silicone casing.

Glowing Spines

I used hot glue for the spines. Hot glue is magic. It conducts light really well, just like light pipe or side-glow fiber optics. We'll create the shapes first, then glue them onto each NeoPixel.

Heat up your glue gun and get some wax paper or other non-stick surface. The backing from sticky-back vinyl stickers works great for this. Make a whole bunch of teardrop shapes in a variety of sizes out of the hot glue, and let them dry and cool completely.

While these are drying, take a utility knife and carefully cut a square hole over each NeoPixel through the silicone sleeve, so the pixels are fully exposed.

Arrange your glue spines so they flow from large to small, and place them upright inside the hole on the NeoPixel strip. Use some more hot glue to glue them in place.

One cool feature of hot glue is that if you make a mistake, you can use 99% alcohol at the joint and the glue will become immediately and completely un-stuck. It's like an undo button! If you get your spines in the wrong order, or are unhappy with one, it's easy to take it off and replace it just by pouring some alcohol over the pixel. (Be sure not to do this while the lights are turned on, though!)

Glue a spine over each pixel on your strip. Test to be sure you like the way they transmit light.

Lastly, take some hot glue and seal up the end of the strip so moisture can't get in there.

Now it's time to fit your strip into your dragon. For the areas where the strip goes along the mounting board, cut notches along the dragon's back for each of the spines to poke through. Take your time with this, and get it right. Judicious use of a heat gun can help if your spines are being unruly, but don't get them too hot or they'll start to droop. You can also trim them with scissors or a knife so they come to a sharp point at the top.

I think imperfection is actually on our side here. I love the individuality of each dragon spine.

For the areas where the strip is on top of the dragon, you can lay the strip on the paper mache and use masking tape between the pixels to secure it. I wanted it to look like the spines were coming right out of the back of my dragon's head, so about half my pixels are inside the paper mache and half are on top.

Add tape until you have a smooth neckline that doesn't give away the shape of the pixel strip.

Eyes & Mouth

Find the two LEDs you've coded to be the dragon's eyes. Mount them inside the head using hot glue. The other two LEDs will live in the dragon's throat, providing an indirect fiery flicker inside the mouth. Hot glue them in place somewhere around the dragon's tonsil area so they don't wiggle around.

You can cut a slit in the neck and bury the wires inside, or just tape them down to the underside of the dragon's body. Use tape to hide and secure all the wires that go to both of the LED strips.

Finish the Dragon

Now that all the electronics are securely placed, it's time to add skin and paint to finish the dragon. Cloth mache is nearly the same technique as paper mache, only you're using cloth dipped in white glue instead of paper dipped in flour.

Start by doing the gums and inside of the mouth, and get it all painted and finished before permanently attaching the jaw. Then do the body, wings, and head. Get the legs and claws adjusted as best you can and let it all dry. The dragon will still have a little bit of flexibility once it's dry, but it's best to get the position as perfect as possible ahead of time, so you don't crack the skin or paint.

If you get glue on the teeth or spines or eyes, it wipes off really easily when it's wet.

When the cloth mache is fully dry, paint your dragon with acrylic paints. I like the shine of metallic paints as they really pick up the light from the NeoPixels. Wipe off any paint that gets on the spines or claws before it dries.

Mounting

I made a mounting board from left over strips of cedar siding that I stained in various colors, for a rustic reclaimed-wood look. I glued the whole thing to a sheet of 1/4" birch plywood for stability.

I placed my dragon on the mounting board and marked where the Circuit Playground Express should be mounted, and also a good spot behind the dragon to thread the wires through so they don't show on the outside. I used a 1/2" drill bit to drill two holes, large enough for the JST connectors to fit through.

I drilled one more hole near the Circuit Playground's mounting spot large enough for the USB power cord to fit through.

Finally, I secured the Circuit Playground down to the mounting board with some hot glue. I also used copious amounts of hot glue to attach the dragon itself to the mounting board.

I connected all the connectors, threading the wires behind the mounting board, and threaded the power cord through as well, plugging it in to the Circuit Playground's USB connector.

At this point, I soldered a long wire onto pin A4 and threaded it through the power cord hole to the back of the mounting board. This wire connects the on/off switch to the Circuit Playground Express.

I used my vinyl cutter to cut a fancy rune out of copper tape. I left a long tail that wraps around the edge of the mounting board, and soldered the long wire from A4 to the copper tape tail. Then I firmly affixed the copper tape rune to the front of the board.

I plugged the power in and tested to be sure everything works. Once I was confident, I glued down the ostrich egg with hot glue.

She is beautiful. She sometimes turns herself on or off during thunderstorms. I wonder if someday she will hatch that egg and I will begin calling myself Daenerys of the House Targaryen, the First of Her Name, The Unburnt, Queen of the Andals, the Rhoynar and the First Men, Queen of Meereen, Khaleesi of the Great Grass Sea, Protector of the Realm, Lady Regent of the Seven Kingdoms, Breaker of Chains and Mother of Dragons.