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.
The MakeCode project linked below works in a similar way to the Flora-and-Arduino project but uses the Circuit Playground's onboard buttons and sensors so you don't have to do as much wiring. 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.
Our umbrella has three different color modes: a color-sensing mode, a raindrops animation, and a rainbow animation. This will make our MakeCode project a bit complex, so if it's your first time using MakeCode, head over to the MakeCode Intro Guide and play around with a couple of the beginner projects to get a feel for how it all works. Once you're ready to go, head over to www.makecode.com, roll up your sleeves and let's dive in.
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
Whatever you put into the
on_start loop will run once, when you first boot up your Circuit Playground Express. Whatever you put in the
forever loop will run over and over again, forever.
A variable is a placeholder or container for a number. We use them so we can change numbers willy-nilly, on the fly, or in multiple places at once. We'll set up several variables now so we can use them later on in our code. The first one we'll call
num_leds and it will refer to the number of LEDs in our strip. This way, if you ever decide to add more LEDs or take some away, you'll only need to change this number in one place in your code, and the rest of the code will read the variable and know what you mean.
This seems a bit overly complicated when you're first starting out, but getting comfortable using variables in this way will make a lot more complex code possible down the road. And it will eventually make your life easier, I promise!
Our umbrella code has three different color modes, so let's go ahead and make a variable for each color mode now so we can refer to them easily in the future.
Click the VARIABLES tab and create a variable called
The Circuit Playground Express has a whole lot of ways to trigger effects. The easiest to use for this project are the onboard buttons. We've got
button A and
button B, and another trigger for
buttons A+B pressed at the same time. We also have three modes, so it looks like this will work out perfectly.
I've decided to assign button A to rainbow mode, button B to raindrop mode, and the double-button press to color sense mode. Select your own inputs to customize your code to work the way you want.
We want to be able to turn the modes on and off. We'll use a
true/false modifier to tell the Circuit Playground Express which mode we want at what time.
MakeCode already has a few onboard animations built in, and one of them is a Rainbow animation. Perfect! We can use this as one of our modes.
Give your code a name (I called mine FloraBrella) 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.
Now, press button A. Did a rainbow appear? It's like MAGIC! Yay.
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.
Once you've got it working, let's add some more modes.
MakeCode has a Twinkle animation that you could use as a raindrop mode. Just repeat the steps above but select the Twinkle animation instead of the Rainbow animation. It's pretty, but I don't think it looks all that much like raindrops. So I created a simple mode that randomly adds and removes white lights and looks a bit more like rain spatter to me.
Let's download and test our code to see if we like it! Download to the Circuit Playground and press button B. Pretty raindrops! Press button A. A rainbow! This is fun. Press B again and... nothing happens. What's going on here?
We've told our animations to trigger when
rainbow = true or
raindrops = true. We need a way to turn the animations back off (
false) when we're not using them, so they don't try to all run at the same time. One way to do this is to make each input / button press turn the other modes off while turning its favorite mode on. This will make it so we can toggle between modes.
Download again and try it now. Success! We can toggle between the two modes. Let's go ahead and add our third mode -- color sensing.
The Circuit Playground Express has an onboard color sensor we can use to capture a color and make the umbrella match. We'll make the onboard NeoPixel next to the sensor blink 3 times to indicate the color sensing is about to happen, then tell the NeoPixel strip to show that color.
We'll do the sensing in the input (
on click) loop since we only want it to run once (not forever, over and over).
Download your code and play around with it. See if it does what you want. If it doesn't quite meet your specifications, mess around and change stuff! You can always come back to the original project if you break it, but breaking code is the best way to learn to fix it, in my experience.
What animations will your umbrella show?