# Cartoon Network and Make Code - Rose Quartz Shield Umbrella

## Overview

https://youtu.be/DfkEwuA-ub0

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.

![](https://cdn-learn.adafruit.com/assets/assets/000/074/825/medium800/makecode_rose_quartz_umbrella.jpg?1556051105)

### Adafruit Products in This Project
### 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 Strip w/ Alligator Clips - 30 LEDs/meter

[Adafruit NeoPixel LED Strip w/ Alligator Clips - 30 LEDs/meter](https://www.adafruit.com/product/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 Clips** has **30 total LEDs in a "30 LED per meter" spacing** , and is 1 meter long,...

Out of Stock
[Buy Now](https://www.adafruit.com/product/3812)
[Related Guides to the Product](https://learn.adafruit.com/products/3812/guides)
![Adafruit NeoPixel LED 1 meter Strip with Alligator Clips wired to Circuit Playground, lighting up rainbow](https://cdn-shop.adafruit.com/product-videos/640x480/3812-06.jpg)

### Adafruit Micro Lipo - USB LiIon/LiPoly charger

[Adafruit Micro Lipo - USB LiIon/LiPoly charger](https://www.adafruit.com/product/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 3.7V/4.2V lithium polymer or lithium ion rechargeable battery into the JST plug on the other end. There are...

In Stock
[Buy Now](https://www.adafruit.com/product/1304)
[Related Guides to the Product](https://learn.adafruit.com/products/1304/guides)
![Top view of Adafruit Micro Lipo - USB LiIon/LiPoly charger - v1 above a 2-pin JST cable.](https://cdn-shop.adafruit.com/640x480/1304-06.jpg)

### Lithium Ion Polymer Battery - 3.7v 1200mAh

[Lithium Ion Polymer Battery - 3.7v 1200mAh](https://www.adafruit.com/product/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 has a capacity of 1200mAh for a total of about 4.5 Wh. If you need a larger battery, <a...></a...>

In Stock
[Buy Now](https://www.adafruit.com/product/258)
[Related Guides to the Product](https://learn.adafruit.com/products/258/guides)
![Lithium Ion Polymer Battery 3.7v 1200mAh with JST 2-PH connector](https://cdn-shop.adafruit.com/640x480/258-02.jpg)

### Stuff You'll Need

- 1 yard x 6 inches of white fun fur
- Scissors
- Hot glue gun
- Clear Packing Tape
- Translucent pink umbrella - [I ordered this one from Totes](https://www.totes.com/p/totes-kids-bubble-umbrella-2236?color=PIN&size=1SZ&gclid=EAIaIQobChMInPzf0d6H4QIVgksNCh0D0gMpEAQYByABEgIa2_D_BwE)

# Cartoon Network and Make Code - Rose Quartz Shield Umbrella

## Wiring Diagram

![](https://cdn-learn.adafruit.com/assets/assets/000/074/843/medium800/makecode_umbrella_wiring_bb.png?1556054594)

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!

![](https://cdn-learn.adafruit.com/assets/assets/000/074/826/medium800/makecode_purple_umbrella.jpg?1556051330)

# Cartoon Network and Make Code - Rose Quartz Shield Umbrella

## 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&nbsp;[makecode.adafruit.com](https://makecode.adafruit.com/)&nbsp;and then choose&nbsp; **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.&nbsp;&nbsp;

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&nbsp; **CPLAYBOOT**.&nbsp; Simply drag your downloaded code onto this drive to program the Circuit Playground Express. Easy!

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

Head over to this&nbsp;[Intro to MakeCode](https://learn.adafruit.com/makecode/what-is-makecode)&nbsp;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.

[Rose Quartz Umbrella MakeCode](https://makecode.com/_3gLexRbwxWKj)
## 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&nbsp; **LIGHT** &nbsp;tab to make the&nbsp; **NEOPIXEL** &nbsp;tab appear beneath it. Anything in the&nbsp; **NEOPIXEL** &nbsp;tab will refer to the strip of lights you attached, and anything in the&nbsp; **LIGHT** &nbsp;tab refers to the lights on the face of the Circuit Playground Express.&nbsp;

Drag an instance of&nbsp;`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.

![](https://cdn-learn.adafruit.com/assets/assets/000/074/666/medium800/makecode_mc_00_onstart.jpg?1555711874)

Also drag an instance of&nbsp;`strip set brightness`&nbsp;into your `on start` loop.&nbsp; 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.

![](https://cdn-learn.adafruit.com/assets/assets/000/074/667/medium800/makecode_mc_01_forever.jpg?1555712364)

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.&nbsp;

![](https://cdn-learn.adafruit.com/assets/assets/000/074/668/medium800/makecode_mc_02_on3g.jpg?1555712379)

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.

![](https://cdn-learn.adafruit.com/assets/assets/000/074/669/medium800/makecode_mc_03_animation.jpg?1555712531)

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

If you're having trouble or don't see the&nbsp; **CPLAYBOOT** &nbsp;drive, head over to the&nbsp;[Circuit Playground Express guide](https://learn.adafruit.com/adafruit-circuit-playground-express/makecode)&nbsp;for some troubleshooting tips.

# Cartoon Network and Make Code - Rose Quartz Shield Umbrella

## 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**.&nbsp; 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.

![](https://cdn-learn.adafruit.com/assets/assets/000/074/673/medium800/makecode_00_wiredup.jpg?1555715452)

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.

![makecode_01_funfur.jpg](https://cdn-learn.adafruit.com/assets/assets/000/074/674/medium640/makecode_01_funfur.jpg?1555715483)

![makecode_02_funfurlights.jpg](https://cdn-learn.adafruit.com/assets/assets/000/074/675/medium640/makecode_02_funfurlights.jpg?1555715525)

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.&nbsp; Add more glue as needed to hold the fur in place.

![makecode_03_hotglue.jpg](https://cdn-learn.adafruit.com/assets/assets/000/074/676/medium640/makecode_03_hotglue.jpg?1555715620)

![makecode_04_trim.jpg](https://cdn-learn.adafruit.com/assets/assets/000/074/677/medium640/makecode_04_trim.jpg?1555715626)

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.

![makecode_05_packingtape.jpg](https://cdn-learn.adafruit.com/assets/assets/000/074/678/medium640/makecode_05_packingtape.jpg?1555715752)

![](https://cdn-learn.adafruit.com/assets/assets/000/074/680/medium800/makecode_06_taped.jpg?1555715882)

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.

![](https://cdn-learn.adafruit.com/assets/assets/000/074/827/medium800thumb/makecode_luminancer_umbrella.jpg?1556051532)


## 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 Strip w/ Alligator Clips - 30 LEDs/meter

[Adafruit NeoPixel LED Strip w/ Alligator Clips - 30 LEDs/meter](https://www.adafruit.com/product/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 Clips** has **30 total LEDs in a "30 LED per meter" spacing** , and is 1 meter long,...

Out of Stock
[Buy Now](https://www.adafruit.com/product/3812)
[Related Guides to the Product](https://learn.adafruit.com/products/3812/guides)
### Adafruit Micro Lipo - USB LiIon/LiPoly charger

[Adafruit Micro Lipo - USB LiIon/LiPoly charger](https://www.adafruit.com/product/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 3.7V/4.2V lithium polymer or lithium ion rechargeable battery into the JST plug on the other end. There are...

In Stock
[Buy Now](https://www.adafruit.com/product/1304)
[Related Guides to the Product](https://learn.adafruit.com/products/1304/guides)
### Lithium Ion Polymer Battery - 3.7v 1200mAh

[Lithium Ion Polymer Battery - 3.7v 1200mAh](https://www.adafruit.com/product/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 has a capacity of 1200mAh for a total of about 4.5 Wh. If you need a larger battery, <a...></a...>

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

## Related Guides

- [Adafruit Circuit Playground Express](https://learn.adafruit.com/adafruit-circuit-playground-express.md)
- [Using WebUSB with Arduino and TinyUSB](https://learn.adafruit.com/using-webusb-with-arduino-and-tinyusb.md)
- [Circuit Playground Express Rocket Lamp](https://learn.adafruit.com/cpx-rocket-lamp.md)
- [Make a Snow Globe with Circuit Playground Express & MakeCode](https://learn.adafruit.com/make-a-snowglobe-with-circuit-playground-makecode.md)
- [Zelda: Breath of the Wild – 3D Printed Bladesaw](https://learn.adafruit.com/bladesaw.md)
- [Circuit Playground Express TV Zapper](https://learn.adafruit.com/circuitpython-tv-zapper-with-circuit-playground-express.md)
- [Circuit Playground Gizmo Ornaments](https://learn.adafruit.com/display-ornaments-with-circuit-playground.md)
- [Chatty Light-Up Circuit Playground Express Mask](https://learn.adafruit.com/chatty-light-up-cpx-mask.md)
- [Steven Universe Wearable, Fusable Gem](https://learn.adafruit.com/steven-universe-wearable-fusable-gem.md)
- [Extending CircuitPython: An Introduction](https://learn.adafruit.com/extending-circuitpython.md)
- [Halloween Sentry-Bot with CRICKIT for CPX](https://learn.adafruit.com/halloween-sentry-bot.md)
- [Using Piezo Buzzers with CircuitPython & Arduino](https://learn.adafruit.com/using-piezo-buzzers-with-circuitpython-arduino.md)
- [Neopixel Jewel 10 Minute Necklace](https://learn.adafruit.com/10-minute-neopixel-necklace.md)
- [CircuitPython BLE Advertising Beacons](https://learn.adafruit.com/circuitpython-ble-advertising-beacons.md)
- [The Tilt Trumpet](https://learn.adafruit.com/the-tilt-trumpet.md)
- [AdaBox 008](https://learn.adafruit.com/adabox008.md)
