Let's add more animation modes. We'll build each mode in the forever loop, so we can tweak the values and make it to our liking while watching the emulator, then once we're happy, move it into its own function for safe keeping. It's also helpful to download the code onto your Circuit Playground whenever you want to see how something looks, and also test with the NeoPixel strip attached. The animations look pretty different in real life -- and of course you can always come back and change things when your corset is finished.

OneColor Mode

The OneColor mode will be almost identical to the RainbowFade mode. The only difference is that we won't change the hue. Copy the two set strip blocks from the RainbowFade function and paste them into the forever loop. Check the emulator. All the lights are red, because we haven't defined hue so it's defaulting to 0 which translates to red. 

This was an easy one. Make a function called OneColor and move all the code in the forever loop over.

Gradient Mode

Next we'll create the Gradient animation. We'll take the value assigned to hue and add a small random number to it, assign this new hue to a pixel, and then rotate the strip. Each pixel will carry its random color like an ant marching down the strip, surrounded by colors that are all slightly, randomly different. 

From LIGHT > MORE drag an instance of set strip pixel color at 0 to red. Replace the 0 with the hue variable, and the red with the hue / sat / val block (from the LIGHT tab).

Notice that this is different from the blocks we used in the previous functions. Those blocks affected all the lights on the strip at once, and this block affects just one pixel at a time.

We're going to add a whole lot of randomness here. We'll change the hue, saturation, and value all by a random amount to get a really nice variety of colors and shades.

Drag out 4 instances of MATH > pick random 0 to 10. Place one in each of the spaces for hue, sat, and val

Next, grab a 0 - 0 block from the top of the MATH tab. Replace the 10 in thepick random 0 to 10 you assigned to the hue space with this block.

Then place your fourth pick random block into the second slot in this latest block. Change the pick random values to match the picture.

Add the hue variable as shown. Add a strip rotate by 1 block from the MORE tab. Add a random element to the speed of the animation by choosing LOOPSpause 100 ms and placing pick random 0 to 100 (from MATH) inside it. 

Check the emulator. It's a little hard to see with just red, so for testing purposes, let's assign a temporary value to our hue variable. Add set hue to 50 at the beginning of your forever loop. 

This got complicated pretty fast! It's the result of a whole lot of trial-and-error, and of playing with the different blocks in different configurations until I found a combination I love. Download the code onto your Circuit Playground to see the animation in real life, then change it all around until its yours and you love it.

Once you're happy, copy/paste your blocks to also apply them to strip2 (your NeoPixel strip). 

Create a function and move all the code except for set hue to 50 into the function. That block was just for testing, so delete it for now. We don't want to lock hue into any particular number just yet.

RainbowSwirls Mode

RainbowSwirls mode is almost exactly the same as Gradient mode. I want to keep the randomness (though I'll tweak the numbers a bit) and the format and speed. The main difference is that we're going to add change hue by 1 to the end so the hue moves through all the colors in the spectrum, instead of being based on just one color.

Copy all the code from the Gradient function back into your FOREVER loop. Change the randomness values of the hue as shown, and add change hue by 1 from the VARIABLES tab in at the bottom. Watch it on the emulator to see what happens.

Once you're happy with the rainbow animation, move the code into its own function called RainbowSwirls.

Twinkle Mode

I added one more mode, which gives a twinkly white glittery effect. The easy way to do this is to use one of MakeCode's preprogrammed animations. Look under LIGHT > MORE and drag an instance of strip show animation for 500 ms into your forever loop. Add a pause from the LOOPS tab to control the speed.

This is easy, and there are five other canned animations you can use as modes as well.  However... I find this particular canned animation to be a bit frenetic for this project. It also can't be interrupted for the 500 ms that it's running, which makes the button presses not work very well - you tend to get "stuck" in the canned animations. I spent a bunch of time playing around and came up with my own twinkle animation. 

This code makes random pixels blink on in a variety of muted colors and whites. I achieved this by choosing random hues with low saturation (remember, saturation 0 is colorless), and then it makes other random pixels blink off. I found that for the long NeoPixel strip2, this created a satisfying amount of lights, but for the Circuit Playground's 10 lights on strip, I needed to double the "off" commands or the whole thing just sort of stayed lit up.

The one new thing here is the strip length block, which is found in the MORE tab near the bottom. This is a handy little block of code that will automatically remember how many lights you said the strip has and apply that number -- like an automatic variable. 

This code picks a random light from 0 to strip length, and sets a random pale hue, saturation and value to it. The next block picks a different random light and turns the pixel off. We end up with pale pastel lights twinkling merrily all over the corset.

That's all our functions! Next we'll build our mode-switching engine and tell the buttons how to navigate through all the modes.

This guide was first published on Mar 19, 2019. It was last updated on Mar 08, 2024.

This page (More Functions) was last updated on Mar 08, 2024.

Text editor powered by tinymce.