I've built some code that triggers a color-changing Photon animation when I jump or move quickly. This is fun to work with and customize to suit your movements, and you can get some great results with a little trial-and-error. Here's a link to the finished project if you want to skip ahead and work backwards.
To follow along and learn how I did it, point your browser at www.makecode.com
Select the Circuit Playground board, since that's the one we're working with today. While you're here, take a second to notice all the other development boards MakeCode will work with. So many possibilities! Select "New Project".
You'll find yourself in the MakeCode editor window. From here, you can drag and drop snippets of code from the different blocks listed in the middle, into the workspace on the right.
We'll start with the on_start loop, which will run some code when the Circuit Playground Express first boots up. For now, drag the forever loop down and out of the way.
Click on the LIGHT block at the top of the list. The code in this block deals with the Circuit Playground's onboard lights. When you click this tab, a new block called NEOPIXEL appears. Click on this one. The options in this block deals with any light strips you add, so that's what we'll be using today.
First we'll tell our Circuit Playground that we soldered a light strand with 20 lights onto pin A1. Then we'll tell it how bright we want our lights to be. Drag the two code snippets indicated out onto your workspace and place them inside the on_start loop.
Change the default 30 to 20 since we have 20 lights. Then set the brightness to whatever you'd like. This tutu is pretty diffused with all the layers of tulle and satin, so I turned my brightness all the way up to 255.
Adding Motion Reactivity
The Circuit Playground has a 3-axis accelerometer on board. This gives us lots of different options for motion reaction. You can find them under the INPUT tab. I used the 3g input for my tutu, but you can play with all the different options and see what works with your movement.
Click the INPUT tab. Drag an instance of on shake into your workspace and open up the menu under shake. Choose 3g for now, but take note of all the things you can choose from for customization later on.
We've set up our light strand, set the brightness, and made a motion trigger. Now we need to tell our lights what we want them to do when we move. I decided on a photon of colored light shooting across the tutu whenever I jump.
Photon Rainbow
We'll use the Photon functions (also under the NEOPIXEL tab, just scroll down a bit) to create some custom animations. Photon is a very clever tool that's super hackable. I keep on discovering that I can create new fun effects whenever I play with it.
For this project, I want an animation that dramatically changes the color of the tutu whenever I jump. We'll use a variable to change the color every time the animation runs.
Drag an instance of strip photon set pen hue and strip photon forward by 0 into your on 3g loop.
Now is a great time to start testing your code. You can download it as many times as you'd like and see what it's doing in real time on the Circuit Playground Express.
Start by giving the file a name and saving it to MakeCode. I called mine "Tutu". Then click the Download button, and plug your Circuit Playground into your computer via the USB port.
Click the Reset button on the face of the Circuit Playground. All the onboard lights will turn green and a drive will appear on your computer called CPLAYBOOT. This means it's in bootloader mode and you can program it. Drag the file you just downloaded onto that drive.
Move your Circuit Playground quickly -- give it a shake -- and see what happens. We set a hue of 10 (orange) so each time you shake it, an orange light appears. This isn't quite what we want -- we want the whole strip to light up. To accomplish this, we need to add another loop.
Go to the LOOPS tab and select repeat 4 times. Drag this onto your workspace and place it inside your on 3g block with the photon commands inside, as shown. Since we have 20 lights, change the 4 to 20. Now the photon will move forward by 1 light, 20 times in a row -- which means all our lights will get used.
Download again and see what happens now. Looking better! We've got the whole strip lighting up whenever we shake the Circuit Playground. But it's going wicked fast, and not changing colors yet. Let's slow it down and add some color variation.
Go to LOOPS and drag an instance of pause 100 ms onto your workspace, inside your repeat loop. Change 100 to 20 for now. This will determine the speed of your animation, and you can adjust it to suit your preference. I like a pause of just 20 ms, it makes for a nice active photon.
Next we'll make a variable. Variables allow us to change a number on-the-fly. We've got photon hue set as a number right now (10) and we can change this up or down to change the color of the lights.
Click the VARIABLES tab and make a new variable. Call it hue.
Drag an instance of the new hue variable into the strip photon set pen hue block, to associate our variable with the hue of the photon pen.
Then drag an instance of change item by 1 onto your workspace. Put it inside the repeat loop along with the pause. Select your new variable hue from the dropdown in change item by 1 to make it change hue by 1. Then change the 1 to a 3 for now. Here's another place to customize -- the higher the number, the more each light will change color. 3 gives a nice color gradient.
Lastly, let's give our variable hue a starting color. Drag an instance of VARIABLES > set item to 0 into your on start loop. Set it to the hue variable. Choose a number between 0 and 255 to pick a starting color.
Troubleshooting
If the CPLAYBOOT drive is not appearing, here are some things to try:
- Be sure you have a Circuit Playground Express. The Classic will not work with MakeCode.
- Use a different USB cable. Some cables are "charge-only" and won't pass data. Also try using a different USB port on your computer (mine is sometimes twitchy).
- With the Circuit Playground plugged into your computer, press the tiny reset button. The lights should all turn green. If they don't, try double-clicking the reset button.
If it's still not working, head over to the Intro to Circuit Playground Express guide for more suggestions.
If you can drag the code onto CPLAYBOOT but your LED strand isn't lighting up, check to be sure that your code reflects the pin you soldered to (Did you solder to A1? Does your code reflect that?). Also be sure you've soldered your connector to the IN end of the LED strand -- it won't work if you soldered to the OUT end.
