I've built some code that makes a 20-light strand of NeoPixels twinkle and shift through a rainbow spectrum. 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 maker.makecode.com and select "New Project".
Select the Gemma M0 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!
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. Then, the Gemma emulator will simulate what your code is doing on the left. Nifty!
We'll start with the on_start loop, which will run some code when the Gemma first boots up. For now, drag the forever loop down out of the way.
Click on the LIGHT block at the top of the list. Inside are a bunch of choices having to do with NeoPixels. First we'll tell our Gemma that we soldered a light strand with 20 lights onto pin D1. 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.
We soldered onto D1, not D0, so change the first dropdown to D1. Since we have 20 lights in our strand, change the number in the set strip snippet to 20. Then choose your brightness. For costumes I like around 150 -- bright enough to see but not so bright you'll blind people.
The very easiest way to get your lights going is with one of the pre-made animations that come with MakeCode. Back in the LIGHTS tab, drag out an instance of strip show animationonto your workspace, and put it in the forever loop. You'll notice that your Gemma emulator now has a strip of LEDs that are playing a rainbow animation.
Play around with the other canned effects and see if there's one you like. If so, you're done! Skip ahead to download the code onto your Gemma and get rolling.
If you're like me, and you want to customize a bit more and get exactly the effect you want, read on...
Photon Twinkle Rainbow
We'll use the Photon functions (also under the LIGHT 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 a slowly shifting rainbow animation that sparkles with LED "glitter". We'll use variables to change the color and to make the glitter sparkles appear randomly throughout the crown.
Find the forever loop in your workspace. Whatever you put in this loop will run over and over, forever. Drag an instance of photon set pen hue and photon forward by 1 into your forever loop.
You can see the animation you've created in the emulator on the left, but it's a little hard to tell what's happening. So this might be a good time to download the code onto your Gemma so you can see what it actually looks like in real life. You can do this as many times as you want, until you get it looking just exactly right.
Start by giving the file a name and saving it to MakeCode. I called mine "Fairy Crown". Then click the Download button, and plug your Gemma into your computer via the USB port.
Click the Reset button on the face of the Gemma and a drive will appear on your computer called GEMMABOOT. This means it's in bootloader mode and you can program it. Drag the file you just downloaded onto that drive.
Another way to tell if Gemma is in bootloader mode is that you'll see a red and green light on the Gemma's face. Once you've downloaded the code to Gemma, the light will be magenta and the code will be running. To get back into bootloader mode for another download, just click the reset button again.
Troubleshooting
If the GEMMABOOT drive is not appearing, first check to be sure that the on/off switch on the face of the Gemma is switched on. It's easy to miss!
Next, try using 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).
If it's still not working, head over to the Gemma M0 intro guide for more suggestions.
If you can drag the code onto GEMMABOOT but your LED strand isn't lighting up, check to be sure that your code reflects the pin you soldered to (did you remember to change from D0 to D1?). 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.
Customization
Once you've got it working, Let's go ahead and add some customizations! Right now it's a nice orangey golden color because we gave it a hue of 10. Changing the value of hue will allow us to choose any fully saturated color in the rainbow. 0 is red and 255 is .. well, red, again, coming full circle. Play with the hue to select a color you like. My favorite yellow is around 60, green is 100, blue 160 and purple is 200.
Since we can express the color with one simple number, it's easy to tell the code to adjust this number up or down on-the-fly, giving us a rainbow that will shift and rotate at the speed we decide. To do this, we'll make a variable.
Click the VARIABLES tab and make a new variable. Call it hue. Drag this new variable into your workspace and use it to replace the 10 in the set hue to 10 code snippet. Then, drag an instance of change hue by 1 into your forever loop at the bottom.
Download the code again and see what happens on your LED strip. Now, each time Photon runs, you get a new color! Play with the change hue byvalue to make the colors change faster or slower.
Let's make it a little more interesting by adding some randomness.
Go into the MATH tab and find pick random 0 to 10. Drag that into your workspace and use it to replace the 1 in photon forward by 1.
Download the code again to see what happens.
Well, it's a glittery rainbow all right. But it's a bit frantic. Maybe we can slow it down a bit.
Head over to the LOOPS tab and choose pause 100 ms. Drag it into your forever loop at the bottom. Download the code again. Better? Definitely better... but the twinkles happen pretty regularly. I think it would look better if we also randomized the timing of the sparkles.
We know how to do that. Grab another instance of pick random from the MATH tab (or you can just copy and paste the one you have onscreen already). This will look for milliseconds, so 0 to 10 will probably be too fast. I did a little trial-and-error testing and found that I liked 100 to 200 ms for a good randomized twinkle.
This is starting to look pretty cool! But let's explore one more idea to make it even more twinkly. Right now the Photon animation always starts from the beginning of the strand and goes in one direction. We can add a photon flip to make it go the other way, sometimes, which will hide the mechanics of the animation even more. I like twinkles that go both ways around my head better than just one way.
Head back to the LIGHT tab and scroll down until you find photon flip. Drag it into the end of your forever loop. Now the direction of the photon will switch every time it runs. Download the code again.
I'm happy with this -- I was going for a slowly shifting, twinkling rainbow and that's exactly what we've got. Customize and tweak the variables and code until yours makes you happy too.
