# Dance-Reactive Tutu Sparkle Skirt

## Overview

https://youtu.be/jImwi-fUaBc

You can dance if you want to. You can leave the world behind.

Make a tutu that reacts to your dancing. This is a great project to do with kids, or to make for all your fabulous dancer friends. (Because.. if your friends don't dance.. well, they're no friends of mine.)   

The magic lies in Microsoft MakeCode's drag-and-drop code editor in combination with Adafruit's Circuit Playground Express and its onboard sensors. Play with triggering animations when you jump, cartwheel, tilt left or right, or shake and shimmy. This is really way too much fun.

![](https://cdn-learn.adafruit.com/assets/assets/000/068/898/medium800/wearables_dance_reactive_tutu.jpg?1546988146)

### Materials Needed
### Circuit Playground Express

[Circuit Playground Express](https://www.adafruit.com/product/3333)
 **Circuit Playground Express** is the next step towards a perfect introduction to electronics and programming. We've taken the original Circuit Playground Classic and made it even better! Not only did we pack even more sensors in, we also made it even easier to...

In Stock
[Buy Now](https://www.adafruit.com/product/3333)
[Related Guides to the Product](https://learn.adafruit.com/products/3333/guides)
![A Black woman's manicured hand holds a round microcontroller with lit up LEDs.](https://cdn-shop.adafruit.com/640x480/3333-05.jpg)

### Adafruit NeoPixel LED Dots Strand - 20 LED 4" Pitch

[Adafruit NeoPixel LED Dots Strand - 20 LED 4" Pitch](https://www.adafruit.com/product/3631)
Attaching NeoPixel strips to your costume can be a struggle as the flexible PCBs can crack when bent too much. So how to add little dots of color? Use these stranded NeoPixel dots! They're very small, so they're easy to embed into any structure, costume, or wearable. Each dot is...

In Stock
[Buy Now](https://www.adafruit.com/product/3631)
[Related Guides to the Product](https://learn.adafruit.com/products/3631/guides)
![Adafruit NeoPixel LED Dots Strand - 20 LEDs at 4 inch Pitch](https://cdn-shop.adafruit.com/640x480/3631-04.jpg)

### 3 x AAA Battery Holder with On/Off Switch and 2-Pin JST

[3 x AAA Battery Holder with On/Off Switch and 2-Pin JST](https://www.adafruit.com/product/727)
This battery holder connects 3 AAA batteries together in series for powering all kinds of projects. We spec'd these out because the box is slim, and 3 AAA's add up to about 3.3-4.5V, a very similar range to Lithium Ion/polymer (Li-Ion) batteries and have an on-off switch. That makes...

In Stock
[Buy Now](https://www.adafruit.com/product/727)
[Related Guides to the Product](https://learn.adafruit.com/products/727/guides)
![Front angled shot of 3 x AAA battery holder with on-off switch and 2-pin JST PH connector.](https://cdn-shop.adafruit.com/640x480/727-07.jpg)

### You Will Also Need

- A tutu.  [I used this one from Amazon](https://www.amazon.com/gp/product/B06Y1T1C9T/ref=oh_aui_detailpage_o07_s00?ie=UTF8&psc=1) -- it has 3 layers of tulle and one layer of satin
- Elastic or ribbon for ties
- A needle and thread and/or sewing machine
- A [soldering iron](https://www.adafruit.com/product/180) & [solder](https://www.adafruit.com/product/145)
- [Wire cutters](https://www.adafruit.com/product/152) and [wire strippers](https://www.adafruit.com/product/147)

If you're new to making things light up, you can get all the electronics tools you need in one convenient kit! This kit also comes with a stand for your soldering iron, and an "eraser" -- solder sucker that makes it easy to fix any mistakes you make with wiring.

### Ladyada's Electronics Toolkit

[Ladyada's Electronics Toolkit](https://www.adafruit.com/product/136)
Starting out on your electronics adventure?  
Want to wield the mighty soldering iron?  
Tired of saying "I'd totally get into electronics if I only knew what tools to get..."?

Working with substandard equipment is a terrible way to learn electronics: a lot of...

Out of Stock
[Buy Now](https://www.adafruit.com/product/136)
[Related Guides to the Product](https://learn.adafruit.com/products/136/guides)
![Collection of many electronic hand tools and soldering equipment](https://cdn-shop.adafruit.com/640x480/136-09.jpg)

# Dance-Reactive Tutu Sparkle Skirt

## Wiring Diagram

The LED strand has 3 wires. The red-striped wire goes to the Circuit Playground's  **Vout** pin, the middle wire goes to **A1** , and the third wire goes to **G**.  

Be sure you are wiring to the **IN** end of the strip.  LED strips have an **IN** and **OUT** end and they won't work if you wire them the wrong way. If you look closely at the back of the pixels you can make out an arrow pointing in the direction of data flow (from in to out). This is really hard to see, so it's usually reliable to start from the end of the strip that has the male connector. If you find your project isn't working, you may have a strip that's manufactured differently -- try starting at the other end.

![](https://cdn-learn.adafruit.com/assets/assets/000/068/875/medium800/wearables_tutu_wiring_bb.png?1546967668)

# Dance-Reactive Tutu Sparkle Skirt

## Code with MakeCode

I've built some code that triggers a color-changing Photon animation when I jump or move quickly.  This is fun to work with and customize to suit your movements, and you can get some great results with a little trial-and-error.  Here's a link to the finished project if you want to skip ahead and work backwards.  

[Tutu Code on MakeCode.com](https://makecode.com/_8bRAqbRP879X)
To follow along and learn how I did it, point your browser at [www.makecode.com](http://www.makecode.com)

Select the Circuit Playground board, since that's the one we're working with today.  While you're here, take a second to notice all the other development boards MakeCode will work with. So many possibilities!  Select "New Project".

![wearables_makecode_00_select.jpg](https://cdn-learn.adafruit.com/assets/assets/000/068/900/medium640/wearables_makecode_00_select.jpg?1546989320)

You'll find yourself in the MakeCode editor window. From here, you can drag and drop snippets of code from the different blocks listed in the middle, into the workspace on the right. 

We'll start with the `on_start` loop, which will run some code when the Circuit Playground Express first boots up. For now, drag the `forever` loop down and out of the way.

Click on the  **LIGHT**  block at the top of the list.  The code in this block deals with the Circuit Playground's onboard lights. When you click this tab, a new block called **NEOPIXEL** appears. Click on this one.  The options in this block deals with any light strips you add, so that's what we'll be using today. 

 

First we'll tell our Circuit Playground that we soldered a light strand with 20 lights onto pin  **A1**. Then we'll tell it how bright we want our lights to be. Drag the two code snippets indicated out onto your workspace and place them inside the `on_start` loop.

![wearables_makecode_01_stripcreation.jpg](https://cdn-learn.adafruit.com/assets/assets/000/068/904/medium640/wearables_makecode_01_stripcreation.jpg?1546989583)

![wearables_makecode_02_setup.jpg](https://cdn-learn.adafruit.com/assets/assets/000/068/906/medium640/wearables_makecode_02_setup.jpg?1546989773)

Change the default `30` to `20` since we have 20 lights.  Then set the brightness to whatever you'd like.  This tutu is pretty diffused with all the layers of tulle and satin, so I turned my brightness all the way up to `255`.

### Adding Motion Reactivity

The Circuit Playground has a 3-axis accelerometer on board.  This gives us lots of different options for motion reaction.  You can find them under the **INPUT** tab. I used the `3g` input for my tutu, but you can play with all the different options and see what works with your movement.

Click the **INPUT** tab. Drag an instance of `on shake` into your workspace and open up the menu under shake. Choose `3g` for now, but take note of all the things you can choose from for customization later on.

![wearables_makecode_03_onshake.jpg](https://cdn-learn.adafruit.com/assets/assets/000/068/907/medium640/wearables_makecode_03_onshake.jpg?1546990013)

![wearables_makecode_04_3g.jpg](https://cdn-learn.adafruit.com/assets/assets/000/068/908/medium640/wearables_makecode_04_3g.jpg?1546990066)

We've set up our light strand, set the brightness, and made a motion trigger. Now we need to tell our lights what we want them to do when we move. I decided on a photon of colored light shooting across the tutu whenever I jump.

## Photon Rainbow

We'll use the `Photon` functions (also under the **NEOPIXEL** tab, just scroll down a bit) to create some custom animations.  `Photon` is a very clever tool that's super hackable. I keep on discovering that I can create new fun effects whenever I play with it.   

For this project, I want an animation that dramatically changes the color of the tutu whenever I jump.  We'll use a variable to change the color every time the animation runs.

Drag an instance of `strip photon set pen hue` and `strip photon forward by 0` into your `on 3g` loop.  

 

Now is a great time to start testing your code.  You can download it as many times as you'd like and see what it's doing in real time on the Circuit Playground Express.

![wearables_makecode_04_photon.jpg](https://cdn-learn.adafruit.com/assets/assets/000/068/909/medium640/wearables_makecode_04_photon.jpg?1546990400)

![wearables_makecode_05_photonforward.jpg](https://cdn-learn.adafruit.com/assets/assets/000/068/910/medium640/wearables_makecode_05_photonforward.jpg?1546990585)

Start by giving the file a name and saving it to MakeCode. I called mine "Tutu". Then click the Download button, and plug your Circuit Playground into your computer via the USB port. 

 

Click the Reset button on the face of the Circuit Playground. All the onboard lights will turn green and a drive will appear on your computer called  **CPLAYBOOT**.  This means it's in bootloader mode and you can program it. Drag the file you just downloaded onto that drive.

![wearables_makecode_07_download.jpg](https://cdn-learn.adafruit.com/assets/assets/000/068/911/medium640/wearables_makecode_07_download.jpg?1546990875)

![wearables_makecode_08_greenlights.jpg](https://cdn-learn.adafruit.com/assets/assets/000/068/912/medium640/wearables_makecode_08_greenlights.jpg?1546991056)

Move your Circuit Playground quickly -- give it a shake -- and see what happens. We set a hue of 10 (orange) so each time you shake it, an orange light appears. This isn't quite what we want -- we want the whole strip to light up. To accomplish this, we need to add another loop.

Go to the **LOOPS** tab and select `repeat 4 times`. Drag this onto your workspace and place it inside your `on 3g` block with the `photon` commands inside, as shown. Since we have 20 lights, change the `4` to `20`.  Now the photon will move forward by 1 light, 20 times in a row -- which means all our lights will get used.

![wearables_makecode_09_repeat.jpg](https://cdn-learn.adafruit.com/assets/assets/000/068/913/medium640/wearables_makecode_09_repeat.jpg?1546991265)

![wearables_makecode_10_repeat.jpg](https://cdn-learn.adafruit.com/assets/assets/000/068/915/medium640/wearables_makecode_10_repeat.jpg?1546991441)

Download again and see what happens now.  Looking better!  We've got the whole strip lighting up whenever we shake the Circuit Playground.  But it's going wicked fast, and not changing colors yet.  Let's slow it down and add some color variation.

Go to **LOOPS** and drag an instance of `pause 100 ms` onto your workspace, inside your `repeat` loop. Change `100` to `20` for now.  This will determine the speed of your animation, and you can adjust it to suit your preference. I like a pause of just 20 ms, it makes for a nice active photon.

![wearables_makecode_11_pause.jpg](https://cdn-learn.adafruit.com/assets/assets/000/068/916/medium640/wearables_makecode_11_pause.jpg?1546991781)

![wearables_makecode_12_pause.jpg](https://cdn-learn.adafruit.com/assets/assets/000/068/917/medium640/wearables_makecode_12_pause.jpg?1546991795)

Next we'll make a variable. Variables allow us to change a number on-the-fly. We've got `photon hue` set as a number right now (`10`) and we can change this up or down to change the color of the lights. 

Click the **VARIABLES** tab and make a new variable. Call it `hue`. 

Drag an instance of the new `hue` variable into the `strip photon set pen hue` block, to associate our variable with the hue of the photon pen.

 

Then drag an instance of `change item by 1` onto your workspace. Put it inside the `repeat` loop along with the `pause`.  Select your new variable `hue` from the dropdown in `change item by 1` to make it `change hue by 1`. Then change the `1` to a `3` for now. Here's another place to customize -- the higher the number, the more each light will change color. 3 gives a nice color gradient.

 

 

![wearables_makecode_13_variable.jpg](https://cdn-learn.adafruit.com/assets/assets/000/068/918/medium640/wearables_makecode_13_variable.jpg?1546992015)

![wearables_makecode_changehue.jpg](https://cdn-learn.adafruit.com/assets/assets/000/068/924/medium640/wearables_makecode_changehue.jpg?1546992710)

Lastly, let's give our variable hue a starting color. Drag an instance of **VARIABLES** \> `set item to 0` into your on start loop.  Set it to the `hue` variable. Choose a number between 0 and 255 to pick a starting color.

![wearables_makecode_15_sethue.jpg](https://cdn-learn.adafruit.com/assets/assets/000/068/920/medium640/wearables_makecode_15_sethue.jpg?1546992305)

![wearables_makecode_16_sethue.jpg](https://cdn-learn.adafruit.com/assets/assets/000/068/921/medium640/wearables_makecode_16_sethue.jpg?1546992319)

## Troubleshooting

If the **CPLAYBOOT** drive is not appearing, here are some things to try: 

- Be sure you have a Circuit Playground Express.  The Classic will not work with MakeCode.
- Use a different USB cable.  Some cables are "charge-only" and won't pass data.  Also try using a different USB port on your computer (mine is sometimes twitchy).  
- With the Circuit Playground plugged into your computer, press the tiny reset button.  The lights should all turn green.  If they don't, try double-clicking the reset button.

If it's still not working, head over to the Intro to [Circuit Playground Express](https://learn.adafruit.com/adafruit-circuit-playground-express) guide for more suggestions.

If you can drag the code onto **CPLAYBOOT** but your LED strand isn't lighting up, check to be sure that your code reflects the pin you soldered to (Did you solder to  **A1**?  Does your code reflect that?).  Also be sure you've soldered your connector to the **IN** end of the LED strand -- it won't work if you soldered to the **OUT** end.

# Dance-Reactive Tutu Sparkle Skirt

## Electronics Assembly

The LED strand comes with a connector at each end. In most strands, the male connector is at the **IN** end and the female connector is at the **OUT** end. Check to be sure your strand goes along with this convention. Data needs to come from the **IN** end.

Since I'm using just one strand for this project, I've cut the connector at the **OUT** end off and soldered it to my Circuit Playground. This way I can permanently attach the lights to my tutu, but still be able to easily disconnect the Circuit Playground, in case I want to update the code or use the Circuit Playground in another project when I'm not wearing the tutu.

Find the end of the LED strand that has the female connector. This should be the  **OUT**  end of the strip. Double check this is right by looking for an arrow on the back of the LEDs pointing in the direction of data flow.

 

Use a pair of wire cutters to cut this connector off with a few inches of wire still attached.

![wearables_01_cutconnector.jpg](https://cdn-learn.adafruit.com/assets/assets/000/068/876/medium640/wearables_01_cutconnector.jpg?1546967783)

Separate the three wires on the connector and strip about 1/4" from each one using a pair of wire strippers.

![wearables_02_stripwires.jpg](https://cdn-learn.adafruit.com/assets/assets/000/068/878/medium640/wearables_02_stripwires.jpg?1546968040)

Wrap the bare ends of the wires through the holes on the Circuit Playground as shown, and use a soldering iron to solder them in place. The  **red ** wire will go to  **VOUT** , the  **middle wire**  goes to  **A1** , and the  **remaining wire**  goes to  **G**.

![wearables_03_soldered.jpg](https://cdn-learn.adafruit.com/assets/assets/000/068/879/medium640/wearables_03_soldered.jpg?1546968316)

Plug your LiPoly battery or your AAA battery holder into your Circuit Playground and see if the onboard light comes on. If it doesn't, be sure your AAA battery holder on/off switch is also turned on and that your batteries are charged. Also be sure you're using alkaline batteries and not rechargeables. The Circuit Playground Express will run best on non-rechargeable batteries since their voltage is a bit higher.

![wearables_04_battery.jpg](https://cdn-learn.adafruit.com/assets/assets/000/068/880/medium640/wearables_04_battery.jpg?1546968555)

Plug in your light strand and shake the Circuit Playground around a bit. Play with holding it in different orientations to get a feel for how the animations you coded are triggered.   

![wearables_05_test.jpg](https://cdn-learn.adafruit.com/assets/assets/000/068/881/medium640/wearables_05_test.jpg?1546968635)

# Dance-Reactive Tutu Sparkle Skirt

## Build the Tutu

I bought a tutu from Amazon.com that has 3 layers of tulle and a satin layer. I think they meant for the satin to go on the inside, but I turned it around so the satin was the top layer for better LED diffusion.  

 

To make the tutu into a tie-on skirt, find the seam in the tulle and cut through all four layers. (You could leave it as a pull-on skirt if you'd like, but this way it's easier to get in and out of and fits a wide range of sizes)

![wearables_06_abaggedtutu.jpg](https://cdn-learn.adafruit.com/assets/assets/000/068/883/medium640/wearables_06_abaggedtutu.jpg?1546979219)

![wearables_06_cutseam.jpg](https://cdn-learn.adafruit.com/assets/assets/000/068/884/medium640/wearables_06_cutseam.jpg?1546979242)

The edge you just cut is now the center front. I rounded both front edges of only the satin layer to make the tutu lay nicely on my hips, creating a "bustle" type look. Save the pieces you cut off! We'll use this extra fabric to make the battery pocket. If you'd like, finish the lower edge of the tulle with a serger or make a small hem.

![wearables_07_roundcorners.jpg](https://cdn-learn.adafruit.com/assets/assets/000/068/885/medium640/wearables_07_roundcorners.jpg?1546979386)

Cut two pieces of white elastic or ribbon to make the ties. Sew one to each side of the tutu at the top, underneath the satin layer.

![wearables_08_addelastic.jpg](https://cdn-learn.adafruit.com/assets/assets/000/068/886/medium640/wearables_08_addelastic.jpg?1546979501)

![wearables_09_elastic2.jpg](https://cdn-learn.adafruit.com/assets/assets/000/068/887/medium640/wearables_09_elastic2.jpg?1546979522)

Grab one of the scraps of satin you cut from the front corner of the tutu. Trace around the Circuit Playground and battery pack to make a pocket. Cut it out along your lines. Finish the edges if desired.

 

Stitch the sides and bottom to the TOP layer of tulle, just underneath the satin layer, making sure not to catch the other layers when you sew.

![wearables_10_batterypocket.jpg](https://cdn-learn.adafruit.com/assets/assets/000/068/888/medium640/wearables_10_batterypocket.jpg?1546980008)

![wearables_11_batterypocket2.jpg](https://cdn-learn.adafruit.com/assets/assets/000/068/889/medium640/wearables_11_batterypocket2.jpg?1546980079)

![wearables_12_batteryinpocket.jpg](https://cdn-learn.adafruit.com/assets/assets/000/068/890/medium640/wearables_12_batteryinpocket.jpg?1546980099)

With the electronics in the pocket, plug in your light strand. We want to attach the lights on the outside of the bottom (innermost) layer of tulle. To get there, make a small hole in the middle and top layers of tulle so you can slip the connector through and plug it into your Circuit Playground Express.

 

Sew around the wires between the pixels to attach the pixels artfully to the tulle. I like to try and stagger them a bit, so the lights look more random and it doesn't look so much like a strand.

![wearables_12_sewpixels.jpg](https://cdn-learn.adafruit.com/assets/assets/000/068/891/medium640/wearables_12_sewpixels.jpg?1546980206)

![](https://cdn-learn.adafruit.com/assets/assets/000/068/894/medium800/wearables_14_done.jpg?1546980459)

Download your code and dance around a bit. See if you like it. If not, make some changes. Make it yours!

Remember that the orientation of the Circuit Playground Express inside the pocket will change your results if you use the `tilt left` or `tilt right` functions. Make sure it's sitting in there vertically for best results. If it's slipping around a lot, try making the pocket a little smaller, or you can sew the Circuit Playground in place using some of the unused holes around the edge.


## Featured Products

### Circuit Playground Express

[Circuit Playground Express](https://www.adafruit.com/product/3333)
 **Circuit Playground Express** is the next step towards a perfect introduction to electronics and programming. We've taken the original Circuit Playground Classic and made it even better! Not only did we pack even more sensors in, we also made it even easier to...

In Stock
[Buy Now](https://www.adafruit.com/product/3333)
[Related Guides to the Product](https://learn.adafruit.com/products/3333/guides)
### Adafruit NeoPixel LED Dots Strand - 20 LED 4" Pitch

[Adafruit NeoPixel LED Dots Strand - 20 LED 4" Pitch](https://www.adafruit.com/product/3631)
Attaching NeoPixel strips to your costume can be a struggle as the flexible PCBs can crack when bent too much. So how to add little dots of color? Use these stranded NeoPixel dots! They're very small, so they're easy to embed into any structure, costume, or wearable. Each dot is...

In Stock
[Buy Now](https://www.adafruit.com/product/3631)
[Related Guides to the Product](https://learn.adafruit.com/products/3631/guides)
### 3 x AAA Battery Holder with On/Off Switch and 2-Pin JST

[3 x AAA Battery Holder with On/Off Switch and 2-Pin JST](https://www.adafruit.com/product/727)
This battery holder connects 3 AAA batteries together in series for powering all kinds of projects. We spec'd these out because the box is slim, and 3 AAA's add up to about 3.3-4.5V, a very similar range to Lithium Ion/polymer (Li-Ion) batteries and have an on-off switch. That makes...

In Stock
[Buy Now](https://www.adafruit.com/product/727)
[Related Guides to the Product](https://learn.adafruit.com/products/727/guides)

## Related Guides

- [Adafruit Circuit Playground Express](https://learn.adafruit.com/adafruit-circuit-playground-express.md)
- [CircuitPython Hardware: PCA9685 PWM & Servo Driver](https://learn.adafruit.com/micropython-hardware-pca9685-pwm-and-servo-driver.md)
- [Glowing Interactive Crystal Staff ](https://learn.adafruit.com/glowing-interactive-crystal-staff.md)
- [Circuit Playground Express Spooky Laughing Box](https://learn.adafruit.com/spooky-circuit-playground-express-mystery-box.md)
- [Light Up Paper Dragon Wall Sconce](https://learn.adafruit.com/light-up-paper-dragon-wall-sconce.md)
- [Steven Universe Cosplay Shirt & Gem](https://learn.adafruit.com/steven-universe-cosplay-shirt-gem.md)
- [CRICKIT WobblyBot](https://learn.adafruit.com/crickit-wobblybot.md)
- [Creating Custom LED Animations](https://learn.adafruit.com/creating-custom-led-animations.md)
- [Make It Sense](https://learn.adafruit.com/make-it-sense.md)
- [Personal UV HotSpot Parasol](https://learn.adafruit.com/personal-blacklight-uv-parasol.md)
- [Using DS18B20 Temperature Sensor with CircuitPython](https://learn.adafruit.com/using-ds18b20-temperature-sensor-with-circuitpython.md)
- [Android GBoard Morse Code Control with Circuit Playground Express](https://learn.adafruit.com/android-gboard-morse-code-at-with-circuitplayground-express.md)
- [DAC Hacks for Circuit Playground Express & other ATSAMD21 Boards](https://learn.adafruit.com/circuit-playground-express-dac-hacks.md)
- [Con Badge with Circuit Playground Express](https://learn.adafruit.com/circuit-playground-express-con-badge.md)
- [Make It Glow: How to Solder NeoPixels, A Beginner's Guide](https://learn.adafruit.com/make-it-glow-how-to-solder-neopixels-a-beginners-guide.md)
- [CPX Mystery Dreidel](https://learn.adafruit.com/cpx-mystery-dreidel.md)