Overview

Make a light-up umbrella inspired by Rose Quartz's shield, from Steven Universe on Cartoon Network. This is a fun, easy project that doesn't require any previous knowledge of coding, soldering, or sewing. You can customize the light animations and input triggers with a few clicks. Shield yourself from the rain and dazzle all your friends!

It's also easy to take this project apart when the rainy season is over, and use your Circuit Playground and NeoPixels again for another fun project.

Adafruit Products in This Project

Circuit Playground Express

PRODUCT ID: 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...
$24.95
IN STOCK

Adafruit NeoPixel LED Strip w/ Alligator Clips - 30 LEDs/meter

PRODUCT ID: 3812
Adding glowy color to your projects has never been easier: no more soldering or stripping wires, clip 'em on and glow! This Adafruit NeoPixel LED Strip with Alligator...
$14.95
IN STOCK

Adafruit Micro Lipo - USB LiIon/LiPoly charger

PRODUCT ID: 1304
Oh so adorable, this is the tiniest little lipo charger, so handy you can keep it any project box! Its also easy to use. Simply plug in the gold plated contacts into any USB port and a...
OUT OF STOCK

Lithium Ion Polymer Battery - 3.7v 1200mAh

PRODUCT ID: 258
Lithium ion polymer (also known as 'lipo' or 'lipoly') batteries are thin, light and powerful. The output ranges from 4.2V when completely charged to 3.7V. This battery...
$9.95
IN STOCK

Stuff You'll Need

Wiring Diagram

Clip the three alligator clips to the Circuit Playground Express as follows:

  • Red (5v) goes to VOUT
  • White (DIN) goes to A1
  • Black (GND) goes to GND

Then plug the battery into the JST port and you're good to go!

Code with MakeCode

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.

To get started, go to makecode.adafruit.com and then choose New Project. You'll find yourself in the MakeCode Editor. From here, you can click on any of the colored tabs and drag blocks of code onto your workspace, then preview it using the Circuit Playground Express pictured on the left.  

Once your code is written, 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.  Simply drag your downloaded code onto this drive to program the Circuit Playground Express. Easy!

Note: If you see a drive called CIRCUITYPY then press the reset button again (or twice in a row) to get to CPLAYBOOT.

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.

Set Up the Lights

First, let's tell the Circuit Playground that we have a strand of lights wired up to pin A1, and how many pixels we're using. We'll also set the brightness of our lights. This needs to be done in the on start loop, so if you don't already see that in your workspace, click the LOOPS tab and grab an instance of it.

Click the LIGHT tab to make the NEOPIXEL tab appear beneath it. Anything in the NEOPIXEL tab will refer to the strip of lights you attached, and anything in the LIGHT tab refers to the lights on the face of the Circuit Playground Express. 

Drag an instance of create strip on A1 with 30 pixels into your on start loop. We're using A1 and we've got 30 pixels, so we don't need to change anything here.

Also drag an instance of strip set brightness into your on start loop.  Set your brightness to whatever you'd like. I set mine all the way up to 255 for maximum brightness.

That's it for setup. Now let's make the LEDs do something. From the NEOPIXEL tab, drag an instance of strip show animation for 500 ms into your forever loop. Anything in this loop will run over and over, forever, while the Circuit Playground is switched on.

Change 500 ms to 100 ms. We want to add some different animations that happen when the umbrella spins. If this is set to 500 ms, then the Circuit Playground will only "listen" for the spin every 500 ms (half a second). Changing it to 100ms means the spin trigger will be much more responsive.

Now let's add an input, telling the Circuit Playground to play a different animation when the umbrella is spinning. Drag an instance of INPUT > on shake into your workspace and change the dropdown to read 3g. Now, when the board spins around and accelerates, it will trigger whatever we put into this block. 

Choose an animation from the NEOPIXEL tab. I like the comet animation, since it really looks great with the spiral shape of the lights inside the umbrella. I want it to play for 5 seconds, so I changed 500ms to 5000ms. Play with the different animations and see what you like best.

Save your work, and click the Download button in the lower left corner. Plug in your Circuit Playground Express and press the reset button. The onboard NeoPixels should all turn green, and you'll see a new drive appear on your computer called CPLAYBOOT.  Drag the file you downloaded onto this drive. You're done!

If you're having trouble or don't see the CPLAYBOOT drive, head over to the Circuit Playground Express guide for some troubleshooting tips.

Build It

After you've uploaded the code to your Circuit Playground Express, attach the NeoPixels as shown in the wiring diagram: black to G, white to V1, and red to VOUT.  Plug your battery in and be sure the lights come on. Swing the Circuit Playground around and see if you can trigger the comet animation.

Get some white fun fur. Short pile will work best. Fun fur is a really great way to diffuse NeoPixels and make them look fancy without doing a lot of work. Place the NeoPixels along the edge and fold over to make a pocket. Cut along the fold line.

Hot glue the fun fur around the NeoPixel strip, placing the glue very close to the strip. The hot glue won't actually stick to the NeoPixel silicone sleeve very well, so just glue the fun fur to itself.

Then, use sewing scissors to shape the fur. I made points every 5-6 inches, to look like Rose's shield design.  Add more glue as needed to hold the fur in place.

Place the fur-covered strip inside your umbrella. Use clear packing tape to secure the end close to the center, and use the umbrella's struts to hold the rest of the strip in place.

Secure the other end with more tape, and use some more clear tape to fix the Circuit Playground and battery to the inside of the umbrella's surface as well. The tape will also help hold your alligator clips in place.

Pick your umbrella up and give it a spin, and watch the colors change. You can go back to the MakeCode project and try adding lots of different lights and sounds, so your umbrella reacts exactly the way you want.

This guide was first published on Apr 24, 2019. It was last updated on Apr 24, 2019.