# Cartoon Network MakeCode: Garnet's Palm Gems from Steven Universe

## Overview

https://youtu.be/FHR3Jvewnxo

![](https://cdn-learn.adafruit.com/assets/assets/000/069/797/medium800/makecode_CN_SU_LOGO_LOCKUP_RGB2x.png?1548269361)

Make your own color-shifting Fusion Gems to turn Ruby and Sapphire into Garnet!

Use MakeCode to create two different projects -- a solo Circuit Playground Express gem that transforms colors, or a pair of them that react to each other!

Plus, you can create the Steven Universe theme song in MakeCode using a function and the built-in synthesizer engine!

![](https://cdn-learn.adafruit.com/assets/assets/000/070/023/medium800thumb/makecode_palmgemFusion.jpg?1548444264)

https://youtu.be/smQ3SWpaUJc

## Parts

You can build this project with a single Circuit Playground Express (CPX), or do an optional two CPX version!

### Part: Circuit Playground Express
quantity: 2
Round, Awesome Microcontroller Board
[Circuit Playground Express](https://www.adafruit.com/product/3333)

### Adafruit Circuit Playground Express or Bluefruit Enclosure

[Adafruit Circuit Playground Express or Bluefruit Enclosure](https://www.adafruit.com/product/3915)
We've got nice cases for many of our beloved boards, but the [Circuit Playground Express](https://www.adafruit.com/product/3333) and [Circuit Playground Bluefruit](https://www.adafruit.com/product/4333) has been left out of couture enclosure...

In Stock
[Buy Now](https://www.adafruit.com/product/3915)
[Related Guides to the Product](https://learn.adafruit.com/products/3915/guides)
![Top down view of a clear acrylic Adafruit Circuit Playground Express or Bluefruit Enclosure.](https://cdn-shop.adafruit.com/product-videos/640x480/3915-06.jpg)

### 3 x AAA Battery Holder with On/Off Switch, JST, and Belt Clip

[3 x AAA Battery Holder with On/Off Switch, JST, and Belt Clip](https://www.adafruit.com/product/3286)
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, plus it has a nifty on-off...

In Stock
[Buy Now](https://www.adafruit.com/product/3286)
[Related Guides to the Product](https://learn.adafruit.com/products/3286/guides)
![Angled shot of 3 x AAA battery holder with on-off switch, JST PH connector, and belt clip.](https://cdn-shop.adafruit.com/640x480/3286-00.jpg)

### Alkaline AAA batteries - 3 pack

[Alkaline AAA batteries - 3 pack](https://www.adafruit.com/product/3520)
Battery power for your portable project! These batteries are good quality at a good price, and work fantastic with any of the kits or projects in the shop that use AAA's. This is a pack of **3 AAA batteries**.  
  
These batteries are Alkaline (MnO2) chemistry, with a...

In Stock
[Buy Now](https://www.adafruit.com/product/3520)
[Related Guides to the Product](https://learn.adafruit.com/products/3520/guides)
![Angled shot of 3 PKcell AAA batteries. ](https://cdn-shop.adafruit.com/640x480/3520-00.jpg)

### USB cable - USB A to Micro-B

[USB cable - USB A to Micro-B](https://www.adafruit.com/product/592)
This here is your standard A to micro-B USB cable, for USB 1.1 or 2.0. Perfect for connecting a PC to your Metro, Feather, Raspberry Pi or other dev-board or microcontroller

Approximately 3 feet / 1 meter long

In Stock
[Buy Now](https://www.adafruit.com/product/592)
[Related Guides to the Product](https://learn.adafruit.com/products/592/guides)
![USB cable - USB A to Micro-B - 3 foot long](https://cdn-shop.adafruit.com/640x480/592-01.jpg)

# Cartoon Network MakeCode: Garnet's Palm Gems from Steven Universe

## Solo Fusion Gem Code in MakeCode

https://youtu.be/keLE1XlLTLQ

## Solo Gem Fusion
![](https://cdn-learn.adafruit.com/assets/assets/000/069/938/medium800/makecode_garnetAll_soloMC.png?1548431211)

## Getting Started with MakeCode

If you're new to MakeCode, [head to this guide to get started](https://learn.adafruit.com/makecode). Once you're able to upload MakeCode to your Circuit Playground Express, return here.

## Code Design

We'll break up our code into two sections: Lights and Music. In the light section, we'll use blocks from the  **Light ** category as well as tell the program what to do when buttons from the **Input** category are pressed.

### Startup

In MakeCode, you can set up parameters for your project that only need to be stated once at startup -- these things go into the **on start** block. To start out drag an **on start** block out from the **Loops** category and onto your MakeCode canvas.

![](https://cdn-learn.adafruit.com/assets/assets/000/069/939/medium800/makecode_mcs01.png?1548431640)

## Brightness and Show Ring Setup

Next, get a **set brightness** block and a **show ring** block from the **Light** category and place them into the **on start** block. This will set the default brightness of the ten NeoPixel ring that surrounds the Circuit Playground Express, and allow us to specify the color pattern.

We'll give it an extra bit of brightness by setting the value to **30**.

Click on the "pie wedge" color pickers to choose a color and then click the NeoPixels in the circle to set them to half red and then half blue.

![](https://cdn-learn.adafruit.com/assets/assets/000/069/941/medium800/makecode_mcs02.png?1548431873)

## Button 'B' Click

Next, we'll create the Garnet fusion effect and a way to initiate it! Add an **on buttonA click** block from the **Input** category. Change the dropdown to be **button B**. This block will be used to detect when you click the button on the right side of the Circuit Playground Express, and then we'll specify what to do.

### Animation

The first thing we want to happen is to run a swirling color animation. From the **Light** category, pick the **show animation for 500ms** block and add it to the **on button B click** block. In the animation block, click on the little colorful icon and choose a different animation -- we'll pick the comet animation as shown below. We also want to tell it to run for a little bit longer than the default half of a second -- set the value to 1500ms, which is a second and a half.

### Ring Color

Once the animation stops we want to set the ring to a magenta color. Add a **show ring** block and change the color of each NeoPixel to magenta. (Note, the graphic shows up as a lighter, less saturated pink than it will in reality.)

### Flash Effect

We also want to do a dramatic bright flash effect. To do so, add a **set brightness** block (hint: you can right-click the one in your **on start** block and choose the **duplicate** menu option) then set it up to **120**. This is pretty bright!

Add a **pause 100ms** block from the **Loops** menu next and change the value to **500ms**.

Then, set the brightness back down with another duplicate of the **set brightness** block, set to a value of **30.**

![](https://cdn-learn.adafruit.com/assets/assets/000/069/942/medium800/makecode_mcs03.png?1548432405)

You can test this out now by downloading the code to your Circuit Playground Express that's plugged in over USB. It will start up, display red and blue NeoPixels, then you can press the right button and watch your fusion effect!

## Unfuse the Gem

Now that we can fuse to Garnet, lets unfuse to Ruby and Sapphire! You can right-click and duplicate the entire existing **on button B click** block and then use that as the starting point. Drag the bottom three blocks to the left side of MakeCode in order to trash them, as we won't do the set brightness flash effect.

Then change the animation to 300ms of **sparkle** and set the colors back to red and blue as shown here.

![](https://cdn-learn.adafruit.com/assets/assets/000/069/944/medium800/makecode_mcs04.png?1548434046)

## Music

Let's add to the fun of the fusion by adding music and sound effects next! You can easily add a pre-made song from the **Music** category, but we'll go a bit deeper by re-creating the Steven Universe theme song.

First, we can set the song tempo (beats per minute) in the **on start** block by adding a **set tempo to \_\_ (bpm)** block. Later, you can adjust the value to speed up or slow down playback tempo.

![](https://cdn-learn.adafruit.com/assets/assets/000/069/948/medium800/makecode_msc05.png?1548435385)

### Functions

To keep our code a bit organized, we'll use **function** blocks. These can hold a set of code blocks on their own, yet be accessed from elsewhere, such as within a button click block. 

Click on the **Advanced** button and then the **Functions** button. Then click on **Make a Function...** and type the name **bleepSong** when prompted, then click **OK.**

![](https://cdn-learn.adafruit.com/assets/assets/000/069/949/medium800/makecode_mcs06.png?1548435571)

![](https://cdn-learn.adafruit.com/assets/assets/000/069/951/medium800/makecode_mcs07.png?1548435626)

Now, you can start adding individual notes of your song from the **Music** catagory to the **bleepSong** function. Drag in the **play tone at Middle C for 1/2 beat** block.

I made a little bleep-y arpeggio by playing C-G-C 1/6th notes as shown here:

![](https://cdn-learn.adafruit.com/assets/assets/000/069/954/medium800/makecode_mcs08.png?1548435903)

When you want to run the code that is inside of a function, you'll use the **call function \_\_\_\_** block found inside of **Advanced \> Functions.** Here, I've placed this block inside the **on button A click** block after the animation runs. Now, when the button is pressed, the animation will play, then the bleepSong code will play, and finally, the **show ring** block will run.

![](https://cdn-learn.adafruit.com/assets/assets/000/069/955/medium800/makecode_mcs09.png?1548436086)

You can imagine that without the function block our code could get pretty messy!

## Theme Song

You can repeat this technique in order to create the theme song from Steven Universe! Here's the version I came up with, the only difference from the **bleepSong ** is that it is much longer, and it also uses the **rest for \_\_\_** blocks.

![](https://cdn-learn.adafruit.com/assets/assets/000/069/956/medium800/makecode_mcs11.png?1548436322)

Here's what the finished code looks like. If you want to check it against the final live code, [here's a link](https://makecode.com/_AMR4iMf022Xy).

You can upload it to your CPX and try it out! Press B to fuse to Garnet, and then A to un-fuse to Ruby and Sapphire!!

![](https://cdn-learn.adafruit.com/assets/assets/000/069/961/medium800/makecode_garnetAll_soloMC.png?1548437886)

Next, we'll build a double Gem version using infrared communications! Or, skip that page and go straight to building the palm holder on the final page.

# Cartoon Network MakeCode: Garnet's Palm Gems from Steven Universe

## Dual Fusion Gems Code in MakeCode

https://youtu.be/smQ3SWpaUJc

![](https://cdn-learn.adafruit.com/assets/assets/000/069/966/medium800/makecode_garnetAll_duoMC.png?1548439577)

Now that you've created the solo gem fusion, it's easy to modify it to work on a dual gem setup. You'll use two Circuit Playground Express boards and then code them in a way that they can send messages to each other!

This will allow you to press the B button on one of them, for example, and they will both go into the Garnet fusion sequence fully synchronized!

## No Music

Currently, there is a bug when using IR (infrared) communications and music blocks in the same code. So for this version, we'll start from [the previous code](https://makecode.com/_AMR4iMf022Xy) and then delete the music related blocks and functions.

![](https://cdn-learn.adafruit.com/assets/assets/000/069/967/medium800/makecode_mcd01.png?1548440057)

## Infrared Communications

We want to send and receive messages using IR between the two Circuit Playground Express boards.

### Send

Click the **Network** category and add an **infrared send number 0** block to the **on button A click** block as shown.

![](https://cdn-learn.adafruit.com/assets/assets/000/069/971/medium800/makecode_mcd02.png?1548440339)

![](https://cdn-learn.adafruit.com/assets/assets/000/069/972/medium800/makecode_mcd03.png?1548440342)

This means that whenever you click button A, an IR message will be sent out containing the number **0** as its message. We'll now duplicate this block and add it to the **button b** block, but change the message to be a number **1.**

![](https://cdn-learn.adafruit.com/assets/assets/000/069/973/medium800/makecode_mcd04.png?1548440471)

### Receive

OK, now we are sending out unique messages with the two different buttons, but we need to also tell the Circuit Playground Express boards what to do when they receive a message!

From the **Network** category, add an **on infrared received num** block.

![](https://cdn-learn.adafruit.com/assets/assets/000/069/974/medium800/makecode_mcd02.png?1548440597)

### Conditionals and Comparisons

 

When the **on infrared received** block receives a message, we want to check to see if the message is a **0** , meaning the **A button** was pressed, or if the message is a **1** , meaning the **B button** was pressed.

 

The way we do this is with a conditional block found in the **Logic** category called **if true then...else** and a comparison block called **0 = 0.**

 

Add them to the received block as shown here.

![makecode_mcd08.png](https://cdn-learn.adafruit.com/assets/assets/000/069/980/medium640/makecode_mcd08.png?1548441145)

![makecode_mcd09.png](https://cdn-learn.adafruit.com/assets/assets/000/069/981/medium640/makecode_mcd09.png?1548441150)

![makecode_mcd010.png](https://cdn-learn.adafruit.com/assets/assets/000/069/982/medium640/makecode_mcd010.png?1548441155)

![makecode_mcd011.png](https://cdn-learn.adafruit.com/assets/assets/000/069/983/medium640/makecode_mcd011.png?1548441164)

Now, we can tell the conditional block what to do in the two different cases. We'll duplicate the existing animation and light block contents of our **on button A click** block and place it into the **if** section, and then do the same with the **on button B click** block and place it in the **else section.** We don't need to duplicate the **infrared send** blocks.

![](https://cdn-learn.adafruit.com/assets/assets/000/069/991/medium800/makecode_mcd12.png?1548441510)

Now, as you can see, when a button is placed on one Circuit Playground Express, it will send an IR message to the second one and they will both run through the same animation and light code together!

Upload the [final code](https://makecode.com/_5RHRCb1JRU7a) to both of your Circuit Playground Express boards (one at a time) and then plug both into power and try it out! Garnet's Fusion is complete!!

Tip: You can even try it out in the simulator! Just press one of the virtual buttons and a second CPX will appear.

![](https://cdn-learn.adafruit.com/assets/assets/000/069/998/medium800/makecode_mcd13.png?1548441659)

# Cartoon Network MakeCode: Garnet's Palm Gems from Steven Universe

## Build the Palm Gems

![](https://cdn-learn.adafruit.com/assets/assets/000/070/007/medium800/makecode_IMG_3655_2k.jpg?1548443688)

You can hold the CPX boards in your palms and use a USB power or AAA battery box, or, dress things up a bit with Circuit Playground Express enclosures and some watch bands or straps for a more secure option suitable for a costume!

![](https://cdn-learn.adafruit.com/assets/assets/000/070/008/medium800/makecode_IMG_3664_2k.jpg?1548443701)

To assemble, first open the CPX enclosure and thread the band, strap, or string through the slots.

 

Then, place the CPX into the case and close it.

 

Now, plug the AAA battery pack into the CPX.

 

Hook the battery pack to the strap, and secure it to your hand.

![makecode_IMG_3663_2k.jpg](https://cdn-learn.adafruit.com/assets/assets/000/070/009/medium640/makecode_IMG_3663_2k.jpg?1548443779)

![makecode_IMG_3662_2k.jpg](https://cdn-learn.adafruit.com/assets/assets/000/070/010/medium640/makecode_IMG_3662_2k.jpg?1548443801)

![makecode_IMG_3654_2k.jpg](https://cdn-learn.adafruit.com/assets/assets/000/070/011/medium640/makecode_IMG_3654_2k.jpg?1548443818)

![makecode_IMG_3660_2k.jpg](https://cdn-learn.adafruit.com/assets/assets/000/070/012/medium640/makecode_IMG_3660_2k.jpg?1548443863)

![](https://cdn-learn.adafruit.com/assets/assets/000/070/016/medium800/makecode_IMG_3661_2k.jpg?1548443886)

![](https://cdn-learn.adafruit.com/assets/assets/000/070/022/medium800thumb/makecode_palmgemFusion.jpg?1548444244)

https://youtu.be/XhGEoNdY2Cw


## 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 Circuit Playground Express or Bluefruit Enclosure

[Adafruit Circuit Playground Express or Bluefruit Enclosure](https://www.adafruit.com/product/3915)
We've got nice cases for many of our beloved boards, but the [Circuit Playground Express](https://www.adafruit.com/product/3333) and [Circuit Playground Bluefruit](https://www.adafruit.com/product/4333) has been left out of couture enclosure...

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

[3 x AAA Battery Holder with On/Off Switch, JST, and Belt Clip](https://www.adafruit.com/product/3286)
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, plus it has a nifty on-off...

In Stock
[Buy Now](https://www.adafruit.com/product/3286)
[Related Guides to the Product](https://learn.adafruit.com/products/3286/guides)
### Alkaline AAA batteries - 3 pack

[Alkaline AAA batteries - 3 pack](https://www.adafruit.com/product/3520)
Battery power for your portable project! These batteries are good quality at a good price, and work fantastic with any of the kits or projects in the shop that use AAA's. This is a pack of **3 AAA batteries**.  
  
These batteries are Alkaline (MnO2) chemistry, with a...

In Stock
[Buy Now](https://www.adafruit.com/product/3520)
[Related Guides to the Product](https://learn.adafruit.com/products/3520/guides)
### USB cable - USB A to Micro-B

[USB cable - USB A to Micro-B](https://www.adafruit.com/product/592)
This here is your standard A to micro-B USB cable, for USB 1.1 or 2.0. Perfect for connecting a PC to your Metro, Feather, Raspberry Pi or other dev-board or microcontroller

Approximately 3 feet / 1 meter long

In Stock
[Buy Now](https://www.adafruit.com/product/592)
[Related Guides to the Product](https://learn.adafruit.com/products/592/guides)
### Adafruit + Cartoon Network Cosplay Introductory Kit

[Adafruit + Cartoon Network Cosplay Introductory Kit](https://www.adafruit.com/product/4355)
Are you interested in making cosplay and Halloween projects with a Circuit Playground Express, but overwhelmed with what to buy? Better yet, do you love Cartoon Network characters and shows?

Here's a beginner pack to get started, no matter your skill level. This...

No Longer Stocked
[Buy Now](https://www.adafruit.com/product/4355)
[Related Guides to the Product](https://learn.adafruit.com/products/4355/guides)
### Adafruit + Cartoon Network Cosplay Basics Kit

[Adafruit + Cartoon Network Cosplay Basics Kit](https://www.adafruit.com/product/4358)
Are you interested in making cosplay and Halloween projects with a Circuit Playground Express, but overwhelmed with what to buy? Better yet, do you love Cartoon Network characters and shows?

Here's a intermediary pack to get started, no matter your skill level. This...

No Longer Stocked
[Buy Now](https://www.adafruit.com/product/4358)
[Related Guides to the Product](https://learn.adafruit.com/products/4358/guides)
### Adafruit + Cartoon Network Cosplay "The Works" Kit

[Adafruit + Cartoon Network Cosplay "The Works" Kit](https://www.adafruit.com/product/4359)
Are you a super Cartoon Network fan and interested in making cosplay and Halloween projects with a Circuit Playground Express, but overwhelmed with what to buy? 

Here's a huge kit to get started, no matter your skill level. This kit includes beautiful and...

No Longer Stocked
[Buy Now](https://www.adafruit.com/product/4359)
[Related Guides to the Product](https://learn.adafruit.com/products/4359/guides)

## Related Guides

- [Adafruit Circuit Playground Express](https://learn.adafruit.com/adafruit-circuit-playground-express.md)
- [Circuit Playground Express Rocket Lamp](https://learn.adafruit.com/cpx-rocket-lamp.md)
- [Welcome to CircuitPython!](https://learn.adafruit.com/welcome-to-circuitpython.md)
- [CircuitPython Sin Complicaciones para la Circuit Playground Express y la Bluefruit](https://learn.adafruit.com/circuitpython-sin-complicaciones-para-la-circuit-playground-express.md)
- [Circuit Playground D6 Dice](https://learn.adafruit.com/circuit-playground-d6-dice.md)
- [Mini Golf Course with Circuit Playground and Crickit](https://learn.adafruit.com/mini-golf-course-with-makecode-circuit-playground-crickit.md)
- [Scratch 3 Walkthrough and Demo](https://learn.adafruit.com/guide-to-scratch-3.md)
- [Crickit Powered Minerva Owl Robot](https://learn.adafruit.com/crickit-powered-owl-robot.md)
- [Hello World of Robotics with Crickit](https://learn.adafruit.com/hello-world-of-robotics-with-crickit.md)
- [Remote Control Tree Ornament with Circuit Playground Express](https://learn.adafruit.com/remote-control-tree-ornament-with-circuit-playground-express.md)
- [Sensor Plotting with Mu and CircuitPython](https://learn.adafruit.com/sensor-plotting-with-mu-and-circuitpython.md)
- [NYE Circuit Playground Drop](https://learn.adafruit.com/nye-circuit-playground-drop.md)
- [CircuitPython Hardware: LED Backpacks & FeatherWings](https://learn.adafruit.com/micropython-hardware-led-backpacks-and-featherwings.md)
- [No-Touch Hand Wash Timer for Circuit Playground Express and CLUE](https://learn.adafruit.com/no-touch-hand-wash-timer-for-cpx-and-clue.md)
- [How to Choose a Microcontroller](https://learn.adafruit.com/how-to-choose-a-microcontroller.md)
- [Con Badge with Circuit Playground Express](https://learn.adafruit.com/circuit-playground-express-con-badge.md)