The Circuit Playground Express can be programmed a number of ways: it will run Arduino code, CircuitPython, or you can program it with MakeCode.
Microsoft MakeCode for Adafruit is a web-based code editor for physical computing. It provides a block editor, similar to Scratch or Code.org, and also a JavaScript editor for more advanced users.
This means you can drag and drop light animations and functionality using the Circuit Playground Express' onboard sensors without ever writing a single line of code. Just snap the blocks together and watch your lights dance.
For this project, I used the Circuit Playground's onboard lights to run a pretty rainbow color animation and the onboard button to turn the lights on and off. The Circuit Playground Express has a lot of sensors and inputs on board, and this guide will show you how to make your flower respond to a button press, a loud sound, a dark room or a variety of other triggers to make your lights turn on and off.
Go to https://makecode.adafruit.com/ and select "New Project".
Give it a name. I called mine "Flower."
First we'll add the light animation. Click the LIGHT tab and drag an instance of show frame of animation into your workspace, and drop it inside the forever loop that's already on the desktop. (If it's not there, you can find it under the LOOPS tab).
Anything placed inside this block will run over and over, forever.
Check out the simulator on the left side of the screen. Are the lights animating rainbow? That means you've done it right. This is easy.
Next we'll make the lights turn on and off using our onboard button. You'll be able to press the center of your flower to make it light up or power down. We can use the simulator to test this too.
First we need to make a variable. A variable is a sort of "box" that holds a value, so the code can make something change states or remember what state a thing is in. In this case we want to make a toggle switch with our button, so we need to keep track of whether the light is currently ON (so we can turn it off), or whether it's OFF (so we can turn it on).
Create a variable in the VARIABLES tab and give it a name that makes sense with its function. I called my variable lightson.
Then drag an onstart loop from the LOOPS tab and put set lightson to 1 inside that loop. This way the lights will come on when the Circuit Playground starts up.
Drag an instance of on button A click from the INPUT tab into the workspace. Anything inside this block will run whenever the A button (or whatever input you choose) is clicked.
While you're here, take a look under the dropdowns to see all the different input options you've got. I kept it simple using button A, but you can trigger your code with any of these inputs just by selecting them. It's a good idea to start with a button press to be sure your code is working properly, then try out some of the harder-to-test inputs later on.
Let's make the lights turn off when the button is pressed. Drag set all pixels to (color) into the workspace and choose the color black to make the lights go off.
Then add set lightson to 0 from the VARIABLES tab so the code remembers the light is off.
Grab an if/then block from the LOGIC tab and put it into your FOREVER loop with the animation inside. Then grab the first of the conditional blocks (0 = 0) and replace the true variable. This block allows "reading" the variable and act on what it says.
Replace the first 0 in your conditional block with the variable you made, and change the second 0 to a 1. Now, whenever lightson is holding the value of 1, the animation will play.
Try clicking the simulator button and see if it's working.
Finally, let's add some logic to the input so the button turns the lights on OR off depending on the state of the variable.
Drag an if/then/else block out and put it inside the input loop. Add the same conditional block (you can copy the one from the FOREVER loop if you want). Put the existing commands from the INPUT tab into the top half. This will turn the lights off if lightson is set to 1.
To turn the lights back on, drag or copy an instance of set lightson to 1 from the VARIABLES tab (or copy it from the on start loop).
Test your code by clicking the button A in the simulator. Are your lights turning on and off each time you press? Success!
If not, go back and double check that your code looks right. It's easy to accidentally swap a 1 or a 0.
The rainbow was not quite bright enough for me, and it was moving a little faster than I like, so I made a few more tweaks to control the speed and brightness. This is optional, but it can really help dial in the way you want your lights to look.
To control the brightness of the LEDs, drag set brightness to 20 from the LIGHT tab into your FOREVER loop as shown, and drag the slider to whatever you'd like. Full brightness is 255.
To control the speed of the animation, you can add a little delay. Drag pause 100ms from the LOOPS tab to just below the show frame of animation block. Change the numeric delay to see your lights speed up or slow down.
Download the Code
- Plug your Circuit Playground Express into your computer with a USB cable.
- Click the reset button.
- Green lights will appear on the Circuit Playground's face and it will appear in your list of devices, called CPLAYBOOT.
If you don't see this or get a drive called CIRCUITPY, try double-clicking the reset button instead of single-clicking to get to a drive named CPLAYBOOT. Putting code on a CIRCUITPY drive will not program it.
Click the Download button on your MakeCode screen and the code you just made will download to your computer. Drag it onto the CPLAYBOOT device.
If all goes well, you will see a pretty rainbow animation. Click the A button and the lights will turn on and off.
Here's the completed project that you can play with directly.
Things to Try
- Select a different animation from the animations and see how that looks in your flower
- Try changing the INPUT block to one of the other types of triggers: you can trigger the lights with a shake, with a loud sound, with light or darkness, or several other interesting inputs. The Circuit Playground Express is versatile! Some work better than others!
- See of you can get a different animation to play each time the button is pressed
- See if you can set different brightness levels using the button or onboard switch
Page last edited August 25, 2025
Text editor powered by tinymce.
