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.
Let's tell the Circuit Playground Express that we attached some lights to pin A1. Click the LIGHT tab and another sub-tab will appear labeled NEOPIXEL. Anything in the LIGHT tab refers to the lights on the face of the Circuit Playground Express itself. Anything in the NEOPIXEL tab will refer to lights that you add. Find |
Variables
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.
Click the VARIABLES tab and create a new variable called |
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 |
Inputs
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.
Head to the INPUT tab and drag an instance of |
|
Click the VARIABLES tab. Drag an instance of |
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.
Click the LOGIC tab and scroll down until you find
Next we'll create the modes themselves. We'll run them inside the |
|
Click the LOGIC tab again and find the |
Rainbow Mode
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.
Drag an instance of
It can be a little tricky to drag these blocks into each other. Look for the highlighted outline when you're hovering with your mouse, to know you're dragging to the right spot. |
|
Lastly, head back to the VARIABLES tab and grab an instance of the |
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.
Raindrop Mode
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.
First click the
Select the conditional statement from the |
|
We have two instances of
I want my raindrops to spatter and disappear randomly, so we can add randomness from our MATH tab to get this effect. Replace the |
|
Head back to the VARIABLES tab and drag an instance of |
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.
Find your input blocks. You can use the copy/paste method here -- copy an instance of
To be sure the old mode goes away, let's also add an instance of |
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.
Color Sensing Mode
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).
First we'll make the NeoPixel light #0 on the Circuit Playground Express' face blink 3 times. Grab a
Now drag 2 instances of
Grab 2 instances of |
|
Now we'll sense the color and set our NeoPixel strip to match. Drag an instance of NEOPIXEL >
Finally, go to INPUT and drag out an |
|
Back in our FOREVER loop, we need to repeat what we did before and tell the Circuit Playground to watch for when
In the last |
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?