Getting Started with MakeCode
If you're new to MakeCode, head to this guide to get started. 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.
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.
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.
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.
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.
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.
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:
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.
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.
Here's what the finished code looks like. If you want to check it against the final live code, here's a link.
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!!
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.
