Microsoft's MakeCode editor is a great way to get your Circuit Playground Express to do things without having to muck about in actual code. It's a fun drag-and-drop editor that's easy to use and sneakily teaches you how to write code while you're making pretty things that light up.

This sample code makes a flickering flame effect with red, orange, and yellow. When "shake" is triggered, the lights flare up to a bright yellow, then slowly dim back down to the flicker.

You can download the completed code and get up and running right away, or you can follow along and create your own code, adding your own customizations as you go.

Code Walkthrough

Let's take a look at each of the different blocks to see what's happening. Head to makecode.com to get started.

On Start

Click the Circuit Playground Express and then New Project. You'll see your workspace, with a Circuit Playground on the left, some tabs in the middle and your workspace on the right. Click the LOOPS tab, and find on_start. Drag it into your workspace.

Whatever you put into the on_start loop will run once, when you first boot up your Circuit Playground Express.

I've created two variables: bright and on. The bright variable will be used to determine how bright our lights are, and the on variable will be used with an on/off switch hooked up to the two onboard buttons.

Brightness will be a changing number between 0 and 255. Our on/off switch will be a toggle, so I've set it to true (found under the LOGIC tab).

Flame Function

A function is a container for a block of code. I've made a function for our flickering animation, since this is the most complicated part of the code. Putting it inside a function will keep it together and out of the way of the rest of the code. The FUNCTIONS tab is under ADVANCED. I called my function flame.

There's a lot going on here. The power lies in the hue, sat, val block that's embedded in the set pixel color block. Both can be found under the LIGHTS tab. 

Using the hue, sat, val block in conjunction with a pick random block allows us to choose specific color ranges and have them flicker at random. 

Forever Loop

Whatever we put in the forever loop will run over and over, forever. This is sort of the main control area of the code.

Since most of the heavy lifting was done in our flame function, we can keep our forever loop pretty simple.

First we'll tell it to reset the brightness to full bright.

This if/else block is found under the LOGIC tab. If our fireball is turned on (if on = true), the flame function will play. If it's turned off (if on = false), all the lights will turn to black (off). 

Check your emulator on the left. You should see the lights on the face of the Circuit Playground start to flicker in your chosen colors.

Changing Your Fireball Colors

Change your colors in the flame function block by changing the numbers in the hue area. For example, if you want greens and yellows, make the three hue blocks read 60-70, 70-80, and 80-90. You can also change the saturation (sat) and make the colors paler or more vibrant. The value (val) numbers will change the brightness of the lights. I have mine on full brightness (255).

Experiment here until you get colors you like. The changes will show up on the emulator on the left side of the screen.

You can also change the speed of the flicker by increasing or decreasing the pause time.

On/Off Switch

Under the INPUT tab, we can find this block. I've set up a simple toggle using our on variable. 

Try it out on the emulator to be sure it works.

 

For this project, the buttons will be a little bit hard to reach. I don't want to have to futz around and hit the wrong button when I'm trying to quickly turn my fireball on or off. So, I did a copy/paste with this block and changed the button A dropdown to button B. With both blocks present, I can press either button and the lights will toggle on or off.

This is a little user-experience nicety that only takes a second to code, but will save you endless futzing time when you're at an event.

On Shake - the Flare-up Feature

Finally, we want to make the fireball flare up when you activate the motion sensor on the Circuit Playground.

This block is also in the INPUT tab. The first part of the code makes the initial flash, setting all pixels to bright yellow.

Then, the second half of the code makes the yellow fade out until it goes dark, at which time the flame function will kick back in.

You can add a pause block inside your repeat block to slow the fade down. But I like it at this speed. It feels nice and responsive.

Give your code a name (I called mine Fireball) and save it. Click the Download button and a file will download to your computer. Plug your Circuit Playground Express into your USB port and click the reset button. You should see all the lights on the face of your Circuit Playground Express turn green, and a drive will appear on your computer called CPLAYBOOT.  If you see a drive called CIRCUITPY, press the reset button a second time to get to CPLAYBOOT.

Drag the downloaded file onto this drive to program the Circuit Playground Express.

Once you've got your lights hooked up, shake the Circuit Playground to see the lights flare up!

If you're having trouble with the download process, head over to the Circuit Playground Express guide for some more detailed instructions and troubleshooting ideas.

This guide was first published on Feb 03, 2021. It was last updated on Mar 08, 2024.

This page (Code with MakeCode) was last updated on Mar 08, 2024.

Text editor powered by tinymce.