We'll use Microsoft's drag-and-drop code editor to create the animations. MakeCode is an easy way to get up and running with the Circuit Playground Express. No prior coding knowledge is needed, and it's an easy way to experiment and learn to think like a coder.
For this project we'll be using maker.makecode.com, which is the beta version of MakeCode. At the time of writing, it has a few more features that will give us more control over our pixels, but it does change frequently so if something's not where you expect, look around.
Once your code is written, you'll simply plug your Circuit Playground Express into your computer via its USB port and click the "reset" button. All the lights will turn green and your Circuit Playground will appear as a drive on your computer called CPLAYBOOT. Drag your downloaded code onto this drive to program the Circuit Playground Express. Easy!
If you get a flash drive names CIRCUITPY, no worries, press the reset button twice and CPLAYBOOT should show up. It might take a time or two but it does work.
Head over to this Intro to MakeCode guide for more info on getting started with MakeCode.
If you want to skip right to the end and work backwards, here's the completed MakeCode project.
Code Design & User Interface
I love flexibility and variety, so I want to write some code that allows me to easily choose between different LED animation modes and lots of different color options. I'm a huge fan of being able to match my necklace to my hat on the fly. My corset should be just as robust.
With this in mind, here's what I want from my code:
- Matching animations for both the NeoPixel strips on the corset and the pixels on the face of the Circuit Playground, with separate brightness controls
- Around 5-6 different animation modes
- An easy way to choose any color I want
- Easy switching between modes using the Circuit Playground's onboard buttons
I decided to leave out a few other ideas, like being able to change brightness on-the-fly, or adding motion or sound reactivity, but those types of modes would be pretty easy to add in with MakeCode. Go nuts!
Here's how my finished code works. I've got six different LED modes:
- Twinkle - white sparkles that appear and disappear randomly
- RainbowFade - all LEDs are the same color and slowly fade through the spectrum
- OneColor - LEDs are all one solid color
- Gradient - Animation based on and around one color
- RainbowSwirls - Animation based on the whole spectrum
- Off
Each time button A is pressed, the modes cycle in order. Each time button B is pressed, the modes cycle in reverse order.
Modes 2, 3, and 4 all use the hue variable to select a base color. I click to RainbowFade and wait for my preferred color to appear, then hit button A once more to switch modes to OneColor. The LEDs will "freeze" on that color, giving me the ability to color the corset in any hue on the spectrum just by timing my button press. If I miss, I can click button B to go back.
One more button A press switches me to Gradient, which will start an animation using the same color I just selected, all thanks to the hue variable. One more press switches me to RainbowSwirls, which seamlessly adds in the rest of the colors on the spectrum. Pretty cool!
Using Functions
Six different modes? This code is gonna get complicated!
A good way to stay organized in MakeCode (and coding in general) is to use functions. A function is basically a container that holds a few lines of code, so we can give it a name and then refer it to easily later on. We'll put each of our LED modes inside its own function, so when we're ready to play each mode back, all we'll need to do is call its name.
We'll start by getting our variables and LED strips set up, then create our modes one by one and move them into their own functions. Then, we'll build a mode-switching machine and assign our buttons to switch modes. Ready to start?
Head to maker.makecode.com, choose New Project and select the Circuit Playground Express. You'll find yourself in the MakeCode Editor. From here, you can click on any of the colored tabs and drag blocks of code onto your workspace, then preview it using the emulator pictured on the left.
