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 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. 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 set strip to create strip on A1 with 30 pixels and drag it onto your workspace inside the on_start loop. |
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 num_leds. Drag an instance of set num_leds to 0 into your on_start loop at the top. Then go back to the VARIABLES tab and grab an instance of num_leds, and use it to replace the number in the create strip block. Set num_leds to 160 (or however many pixels you've got on your umbrella). |
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 rainbow, one called raindrops, and one called colorsense. Don't do anything else with them yet. |
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 on button A click into your workspace. Drag a second and third instance out as well, and change the dropdown to read button B and buttons A+B. Whatever you put inside each loop will be triggered by the action you chose. |
|
|
Click the VARIABLES tab. Drag an instance of set rainbow to 0 into the button A input loop. (You may need to find it in the dropdown menu). Drag another instance into the button B loop and set it to raindrops. Set buttons A+B to colorsense. |
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 true. Replace each of the 0 fields in the three modes with true.
Next we'll create the modes themselves. We'll run them inside the forever loop so they run continuously until we press a different button. |
|
|
Click the LOGIC tab again and find the if / then / else block. Drag it inside your forever loop. Now we can tell the Circuit Playground Express what to do when each different mode we set up is "true". |
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 strip show animation (rainbow)from the NEOPIXEL tab into your forever loop, inside the if/then statement. Then, head back to the LOGIC tab. Find the Comparison block 0=0and drag it into your if/then statement, replacing the true that was there as the default. Then grab another instance of true from the LOGIC tab and replace the second 0.
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 rainbow variable we made earlier. Drag it into the first comparison spot, replacing the 0. Now the code basically says, "If rainbow = true, then play the rainbow animation" -- and remember, pressing button A makes rainbow = true. We're coding like pros! Let's download it and see if it works. |
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 + button at the bottom of your if/then statement to add another slot. Then drag two instances of strip set pixel color at 0 to red inside the slot you created.
Select the conditional statement from the rainbow mode slot and copy it to your clipboard. Paste an instance of it directly to your workspace. Now you can drag this new instance into the new slot you're working and change the variable to raindrop. Anything that happens in this slot will happen if raindrop = true (when you press button B). |
|
|
We have two instances of strip set pixel color so we can turn the pixels both on (white, or whatever color you'd like your raindrops to be) and off (black). Select the colors you want here.
I want my raindrops to spatter and disappear randomly, so we can add randomness from our MATH tab to get this effect. Replace the 0 in both of these blocks with pick random 0 to 10 from the MATH tab. |
|
|
Head back to the VARIABLES tab and drag an instance of num_leds to replace the 10 in each of these blocks. Now we'll have a random number chosen from our entire LED strip instead of just the first 10 pixels. (See? I told you variables were useful!) |
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 set rainbow to true and place it inside the loop, changing it so it reads set raindrops to false. Make another one for the colorsense mode. Repeat in the other input blocks, so that each block sets its own mode to true and the other two modes to false.
To be sure the old mode goes away, let's also add an instance of strip clear to each input as well. This will turn all the lights off for just a moment. |
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 repeat 4 times loop from the LOOPS tab and put it into your on buttons A+B click block at the end. Change the 4 to 3.
Now drag 2 instances of set pixel color to red from the LIGHT tab (not the NEOPIXELS tab this time. Remember, we want to affect the onboard lights, not the strip). Change first the red to white (or whatever color you'd like the blinking to be) and the second red to black (for off).
Grab 2 instances of pause 100ms from the LOOPS tab and place them in between. Change 100ms to 500ms, to make them blink on and off every half-second. |
|
|
Now we'll sense the color and set our NeoPixel strip to match. Drag an instance of NEOPIXEL > strip set pixel color into your input loop outside the repeat loop. (If you put it inside, it would sense three times).
Finally, go to INPUT and drag out an ambient color variable, and use it to replace the red color. |
|
|
Back in our FOREVER loop, we need to repeat what we did before and tell the Circuit Playground to watch for when colorsense is true. You can use the copy/paste method again to make your FOREVER loop look like the example. I also added a strip stop all animations block inside this loop, just in case the animations get wonky.
In the last else block, I placed a strip clear. In this case, the umbrella will be dark unless a button is pressed. If you want an animation that happens when no button has been pressed, you can place it here. |
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?
This guide was first published on Apr 23, 2014. It was last
updated on Apr 23, 2014.
This page (Code with MakeCode) was last updated on Jan 21, 2019.
