Code with MakeCode

MakeCode is Microsoft's drag-and-drop code editor. It makes it easy for beginners and kids to get up and running with the Adafruit Circuit Playground Express. So many options are accessible and easy with MakeCode and it's really fun to customize and play around with making blinky lights and sounds.

Here's the completed project. Click the Download link at the bottom, plug your Circuit Playground Express into your computer via USB cable and drag the UF2 file onto the resulting CPLAYBOOT flash drive. 

Or, follow along below to create your own project from scratch.

Code It Yourself

Head to https://www.makecode.com and choose the Circuit Playground Express. Select "New Project" and give it a name. I called mine "Steven's Gem."

Click the INPUT tab and find the on loud sound block. Drag it out into your workspace. Anything inside this block will happen whenever the Circuit Playground Express's onboard microphone hears a loud sound.

Click the LIGHT tab and look for the ring of lights. Drag this into your workspace and place it inside the on loud sound block you just made. Steven's gem is red, so I left mine red.  But you can make yours whatever color you want.

Then, back in the LIGHT tab, drag an instance of set animation for 500ms below the ring. Select the sparkle animation from the dropdown. This will add some white twinkly sparkles to your gem.

Check out the Circuit Playground emulator on the left. Click the sound icon to simulate making a sound. The gem lights up in red and sparkles! But.. it's over so quickly. Let's make it last a little longer.

From the LOOPS tab drag an instance of repeat 4 times into the on loud sound loop at the top. The two blocks from the LIGHT tab should pop inside it. Change the number in the repeat loop to go for as long as you want. I made mine 20 so it goes and goes and goes.

Finally, let's tell the lights to go off after the animations are done. That way you can surprise more people with your awesome belly button gem. From the LIGHT tab, drag a set all leds to red block into your workspace. Put it inside the on loud sound loop at the bottom, making sure it's outside the repeat loop. If it's inside, it will make the lights turn black (off) 20 times instead of staying black after 20 times.

Plug your Circuit Playground Express into your computer using a USB cable. You will see a rainbow animation appear the first time it boots up. Click the tiny Reset button in the middle of the board and the lights will all turn red, then green. When the lights turn green, a new drive will appear on your computer called CPLAYBOOT.

Note: If you get a drive named CIRCUITPY, no worries, press the reset button again (a total of two times) and you should get the CPLAYBOOT drive.

In MakeCode, click the Download button to download your code to a file. Drag this file onto the CPLAYBOOT drive. The Circuit Playground Express will reboot and eject itself. 

Clap your hands or shout to test it. Does the gem light up when you get excited? It does!

You can go back and change the colors to anything you want. You can also change the trigger - try making it trigger when you shake the Circuit Playground, or when you press one of the buttons. Try adding sounds too. Once you're happy with how it works, let's make the outside of the gem.

Troubleshooting

If you're having trouble, head over to the Circuit Playground Express tutorial for some troubleshooting ideas.

This guide was first published on Apr 02, 2019. It was last updated on Apr 02, 2019. This page (Code with MakeCode) was last updated on Jan 29, 2020.