MakeCode is Microsoft's ritzy drag-and-drop code editor. It makes it easy to get up and running with the Gemma M0.
Find the Gemma M0 code editor at maker.makecode.com
Here's my completed project, which runs a green, blue and purple gradient along the LED strand. Click the Download link at the bottom, plug your Gemma M0 into your computer, click or double-click the reset button and drag the file onto the resulting GEMMABOOT drive.
Or, follow along below to create your own project from scratch.
Code It Yourself
Head to https://maker.makecode.com and select New Project. Choose the Gemma M0 board. Give your project a name. I called mine Bike.
Click the LIGHT tab. Another tab titled MORE... will appear. Click on that one to find lots of options for attaching and controlling a NeoPixel strand soldered to the Gemma M0. Drag an instance of set strip to create WS2812 strip on LED with 30 pixels out into your workspace and place it inside the on start loop, which is usually there by default in a new project. (If it's not there, you can find it under the LOOPS tab). Change the pin to D1 instead of LED, and enter 100 pixels, or however many you've got on the bike.
Note: NeoPixels are also called WS2812 pixels, and DotStars are called APA102 -- make sure you've got the right ones selected.
Next, drag an instance of strip set brightness into your on start loop. Set the brightness to whatever you'd like. I want them as bright as possible, so I chose 255.
Above the LIGHT tab there's another tab called PIXEL. Anything in here controls the onboard NeoPixel on the face of the Gemma M0. I want this turned off on my bike -- no stray status lights for me, thank you -- so I dragged an instance of set pixel color into my on start loop and made it black. This will make sure the pixel stays off.
I want to be able to animate and change the colors of my NeoPixels over time. The way to do this is to assign the color a variable, and then change the variable this way or that, causing the lights to animate. Go to the VARIABLES tab and create a new variable called hue. Then, drag an instance of set hue to 0 into your on start loop and pick a starting hue. I want a purple-pink-blue gradient, so I chose 140 as a starting hue which will give me a nice blue color.
Go back to the LIGHT > MORE... tab and drag an instance of set strip pixel color at 0 to red into your forever loop. Things in this loop will run forever, over and over. Then drag an instance of strip rotate by 1 beneath it. Change the 1 to a 3. This snippet will create the animation on the strip, as soon as we tell it what to do.
Hue, Saturation and Value
Hue, saturation and value are a means of defining a specific color using just numbers, on a scale of 0-255.
Hue refers to the color on the spectrum -- red, blue, purple, etc. Red is at 0, blue is at around 140, purple comes in at around 180, and the spectrum loops around back to red at 255.
Saturation refers to how pastel or how vivid the colors are: 0 is a plain white, no matter what your hue is -- any completely unsaturated color just turns white. 255 is fully vivid and saturated with color.
Value, for our purposes, refers to the brightness or intensity of the color. The higher the value, the more red or blue is added.
You can read far more than you ever wanted to know about this on Wikipedia. What matters to us is that we can mess with the NeoPixel colors in all sorts of fun ways using hue, saturation and value.
Under the LIGHT tab you'll find a block for hue 255 saturation 255 value 255. Drag this into your set strip pixel color block, replacing the red. Then, go into your VARIABLES tab and grab an instance of your new favorite variable, hue. Use this variable to replace the 255 in the hue 255 block. Now we can mess with the pixel hue by changing the hue variable.
So, let's do exactly that. Grab an instance of change hue by 1 from your VARIABLES tab and put it into your forever loop. I made mine a little more dramatic by changing the hue by 2. Try some different values in here to see what you like.
You may have noticed that over on the left, a little NeoPixel emulator strip has appeared beneath your Gemma M0. This emulator will run whatever your code is doing. This is a really easy way to preview your animations and decide if you like the effect, without having to download the code every time. My emulator is starting to look good, but it's running a bit faster than I'd like. Let's slow it down a bit.
Under the LOOPS tab, find pause 100 ms and drag it into your forever loop. Check the emulator again. Do you like it better? Find a speed that works for you. You can also randomize the timing (pick random under the MATH tab) if you'd like.
Almost there! We've created a customizable rainbow animation on our strip. However, I don't want a full rainbow -- I just want a partial rainbow, or a gradient animation. We can limit our hue variable to only show hues in one part of the spectrum using an if / then statement.
We'll start with a hue of 80 (green), then increase by 2 until we reach 240 (magenta), at which time we will place a limit and tell the code to circle back around to 80.
Under the LOGIC tab, find an if true then block and drag it into your forever loop. Grab a comparison block to replace the true, then change the = to >=. Now we don't have to worry about hitting our limit number exactly.
From the VARIABLES tab, grab another hue variable and use it in the first comparison spot. Set the second comparison spot to 240. Drag an instance of set hue to 0 and place it inside the if / then block, and set the value to 80 for a nice green.
Now the hue number will count up from 80 (since you set it to 80 in the setup block) by 2's, until it reaches 240, at which point it will pop back down to 80. This effectively makes the NeoPixels change from green (80) to magenta (240) and then back again. Success! We've got our gradient.
It's easy to change these values to get the color gradient you want.
Plug your Gemma M0 into your computer using a USB cable. Click the tiny Reset button in the middle of the board and the onboard pixel will turn green. When the lights turn green, a new drive will appear on your computer called GEMMABOOT.
In MakeCode, click the Download button to download your code to a file. Drag this file onto the GEMMABOOT drive. That's it! Plug in your light strand and make sure you love the animation. If not, go back and tweak it until you love it. Our next step will be to seal up the Gemma so you won't be able to easily change the code once you've done this.
