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.
Let's take a look at each of the different blocks to see what's happening. Head to makecode.com to get started.
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 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).
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
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.
hue, sat, val block in conjunction with a
pick random block allows us to choose specific color ranges and have them flicker at random.
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.
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
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 (
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
Under the INPUT tab, we can find this block. I've set up a simple toggle using our
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.
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.