Click on the LOOPS tab and drag an instance of on start onto the workspace. (It may already be there) Anything inside this bracket will happen just once, when the Circuit Playground is powered up.  You'll also see a FOREVER loop. Anything in this bracket will happen over and over, forever.

First we'll create our variables. Click the VARIABLES tab and add a variable called strip, one called strip2, one called hue and one called ledMode.

strip will refer to Circuit Playground's onboard NeoPixels. strip2 will refer to the side-light NeoPixel strip soldered to the Circuit Playground. hue is the variable we'll use to manipulate the color, and ledMode will hold the number of the mode we're in.

Click on the LIGHT tab and then the MORE tab that appears underneath it. Drag two instances of set strip to create WS2812 on LED with 30 pixels into your on start loop (or drag one instance and copy/paste to get two). Replace the blue bar of the first one with onboard strip. Set up the second instance to read set strip2 to create WS2812 strip on A1 with 650 pixels

Now let's set the brightness. Drag or paste two instances of set brightness into your on start loop. Set strip's brightness to something really low - I chose 15. These pixels are shining right out from the front of the corset and we don't want to blind people. Set strip2's brightness to around 100. You can always change this later to make it brighter or dimmer.

As you've noticed, we're going to have to do a lot of copy/paste to get both the onboard pixels and the NeoPixel strip working in tandem. No worries! Just note that it's easy to miss one of these dropdowns, so if your code isn't working the way you expect later on you might have forgotten to refer to both strip and strip2.

Head to the VARIABLES tab and drag an instance of set ledMode to 0 into your on start loop. This tells the code which mode you want to start with. Later on you can change it to whichever mode number you want, and your corset will boot up in that mode.

That's it for the on start block. Let's make our first animation mode! We'll start with RainbowFade.

We'll build each mode inside the FOREVER loop so we can proof it on our emulator or download it to see how it looks on the NeoPixel strips. Once we're happy, we'll move the code into a function block so we can refer to it later.

Open the LIGHTS > MORE tab again and drag two instances of set strip all pixels to red into your forever loop.  Change one to strip2.

Click the LIGHT tab and find hue 255 sat 255 val 255. Drag two instances to replace the red in the blocks you just made.

This little bit of awesomeness will give us lots of control over the colors. Hue refers to what we usually think of as a color: red, orange, green, etc. Red is at 0, yellow is around 50, blue 160 and it cycles back around to red at 255.

Saturation (sat) controls how intense the color is. For example, given a hue of 0 (red), saturation=0 comes out plain white, 100 is sort of pinkish, and 255 is full, bright red. 

Value (val) refers to the amount of color.  Think of it as intensity or brightness. We'll leave both value and saturation at 255 in this code, but you can play with these values to get pastel colors or dimmer colors if you want.

There's lots of info about HSV colors available on Wikipedia if you want to know more. 

We're only concerned with the hue for this code. Remember how we made a hue variable earlier? Time to dust that puppy off and put her to use. 

Click the VARIABLES tab and drag two instances of the hue variable onto your workspace, replacing the 255 next to the word "hue" in both these blocks. Then drag an instance of change hue by 1 into the forever loop. 

Take a look at the emulator. It should show all pixels fading through the spectrum. Success! We made a RainbowFade animation.

If you want, you can change the speed of the animation using LOOPS > pause 100ms (change the 100 to whatever you'd like to change the speed). I didn't bother with this since I like the speed it's got.

Once you're totally happy with your animation, let's move the code into a function. Click the FUNCTIONS tab and make a function called RainbowFade.

Move all the code in your FOREVER loop into the RainbowFade function. Now we can activate it just by calling RainbowFade. We'll do that a bit later.

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

This page (On Start & Functions) was last updated on Mar 08, 2024.

Text editor powered by tinymce.