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'm using the tilt and shake functions on the Circuit Playground Express to trigger animations. Tilt your head left and a "photon" animation runs from left to right. Tilt your head right and the same animation runs from right to left. If you shake your head (or hop up and down like a bunny) then the twinkle animation is triggered.
Check out this guide for more info on working with neopixel strands and building your own animations.
Go to https://makecode.adafruit.com/ and select "New Project".
We soldered our light strand to pin A1. Tell the code by adding an on start loop (Loops > on start). This block will run ONCE when the board powers up, so it's the perfect place to define our setup.
Drag the on start block onto the workspace. We don't need the "forever" block so you can delete it.
Next go to "Variables" add a new variable called (strip). Then, drag set (item) to 0 into the on start block.
Change the default(item)variable to the one you just made: (strip).
Go to the "Neopixel" bin (you may need to click the "Light" bin to make it appear). Drag create strip on (A1) with (24) pixels into the block you just made, replacing the (0) . Change the (24) to reflect the number of pixels you have in ONE ear (I have 20).
Go to "input" and grab the on (shake) block.
Go back to the "Neopixel" bin and choose (strip) show animation for (500) ms
You can choose from six different pre-programmed animations. I chose the Twinkle animation. You can also specify here how long you'd like the animation to run when you shake / hop. I liked 2 seconds -- experiment to find what works for you.
To make the lights turn off at the end of the specified time, place a Neopixel > (strip) clear block after the animation block.
Download Code
Let's test to see if it's working.
- 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, try double-clicking the reset button instead of single-clicking.
Click the pink Download button on your MakeCode screen and the code you just made will download to your computer. Drag it onto the CPLAYBOOT device.
Shake your Circuit Playground and see the neopixel strands twinkle!
Add Tilt Animations
Let's make the lights react when you tilt your head to the side. We'll use the "Photon" option for this. It's a little more complicated to use than the pre-canned animations, but you have a lot more control as well.
Photon moves a light or series of lights along the light strand from one end to the other. You can control a lot of factors like color, speed and tail length.
Drag another instance of on (shake) from the "Inputs" bin. Change (shake) to (tilt left)
To start the Photon animation, drag an instance of (strip) photon pen (down) from the "Neopixels" bin.
NOTE: there are also instances of the photon functions in the "Light" bin. These don't have a variable attached, which means these animations will run on the face of the Circuit Playground and not on your Neopixel strip. Be sure you've got the right one!
From the "Loops" bin, drag a repeat (4) times block inside the on (tilt left) block. Change the (4) to the number of neopixels in ONE strip (I have 20).
This will make the photon animation repeat for each neopixel you have, creating the apparent motion.
Add Neopixel > (strip) photon forward by (1) block inside the loop block. Drag a pause (500) ms block below it.
These blocks will control your animation speed. The first block advances the light by one pixel and the second controls how quickly this happens. I changed mine to pause (10) ms because I want the animation to run really fast.
Get another instance of (strip) photon (pen down). The quickest way to do this is to click on the block and copy it to your clipboard, and then paste it into your workspace (ctrl-c, ctrl-v). Change (pen down) to (eraser). From here you can drag it below your loop function within the on (tilt left) block.
Copy and paste the loop function too, and drag that below the new (eraser) function you just made.
Change (strip) photon forward by (1) to (strip) photon forward by (-1). This will make the animation disappear (eraser) in the reverse direction as it was originally drawn.
Shifting Color Hues
Each hue on the neopixel strip is assigned a value: red is 0, yellow is around 60, and the colors cycle back around to red at 255.
We can use a variable to make the colors change periodically. If we start with red (hue 0) and add 5, we get an orangey-red. Add 5 more, and then 5 more, and the color will cycle through to orange and yellow and so on, all the way around the rainbow. MakeCode is smart enough to automatically wrap back to 0 when it reaches 255.
Let's use the (item) variable, which is already set up for us.
Drag Neopixel > (strip) photon set pen hue (0) into your loop as shown in the photo. Drag Variables > (item) to replace the (0).
Drag Variables > change (item) by (1) below that. Set the (1) to (5). This will change each LED's hue by 5 steps each time a pixel is colored. A value of 5 makes a nice gradient, but play with it to get a value you like.
Download the code and drag it to CPLAYBOOT to test your animations. You can download and test as many times as you want until you get it just right.
Once (tilt left) is working the way you want, we can copy/paste most of the blocks to add a (tilt right) animation.
Click the on (tilt left) block and copy/paste another instance of it onto your worktop. Change on (tilt left) to (tilt right).
Change the FIRST instance of (strip) photon forward by (1) to (-1) and the SECOND instance to (1). This will make the animation run from right to left, instead of left to right.
Here's the completed project that you can play with directly.
Page last edited March 08, 2024
Text editor powered by tinymce.
