Head to www.makecode.com and select the Circuit Playground Express. Create a new project and give it a name. I called mine Paper Dragon.

From the LOOPS tab, drag an instance of on start into your workspace (if it's not there already). There should also be a forever loop. Anything in the on start loop happens once, when your project boots up, and anything in the forever loop will happen over and over, forever.

Variables

The first thing we'll do is create our variables. These are software containers that hold values for us. I made six different variables. Strip and strand will refer to the two different physical LED strips/strands. Switch will be used in our software on/off switch. Eyes and rainbow will be used to control the rainbow eyes, and index will be used for counting. 

NeoPixel Setup

Click the LIGHT tab, and a new tab will appear beneath it labeled NEOPIXEL. Anything in the LIGHT tab will refer to the lights on the face of the Circuit Playground (for our egg), and anything in the NEOPIXEL tab will refer to the light strands we add (for our spines and eyes and mouth). 

Drag two instances of set strip to create strip on A1 with 30 pixels into your on start loop. Change the values to reflect your actual physical setup. In my case, my 20-pixel strip for the spines is soldered to A1, and my 4-pixel strand for the eyes and mouth is soldered to A2

Next we'll set the brightness of the onboard pixels to 255, so they're nice and bright and will show up through the egg shell. From the LIGHT tab, drag an instance of set brightness to 20 and change to 255 (maximum brightness). You'll be able to adjust this later on.

The last thing we'll do in the on start loop is to set our switch variable to true. Doing this will make sure that the lights default to on when we plug the dragon in. From the VARIABLES tab, drag set switch to 0 in to your on start loop. You may need to choose the switch variable from the dropdown. Then go to the LOGIC tab and scroll to the bottom to find true

Fire Light Flicker Animation

From LIGHT > NEOPIXEL drag two instances of strip set pixel color at 0 to red. Change the second one to refer to strand

From the LIGHT tab, find the hue 255 sat 255 val 255 block. Use it to replace the red in both instances. 

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.  

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

Spines

For the dragon's spines, we want a flickering fire effect. To achieve this, we'll add a bit of randomness to the hue and value fields, as well as to which pixel we're affecting. The more randomness we can add, the more natural the flame effect will seem.

From the MATH tab, drag three instances of pick random 0 to 10 into your workspace. Place one into the set pixel color field, one into hue, and one into val. We'll leave sat alone for now since we want our flames to be really orangey and fully saturated. 

Change the first pick random to reflect how many LEDs you have in your spine strip. Change hue to read 5 to 20, to get a smattering of reds and oranges. Change the val to 100-200.  

I arrived at all these values through trial-and-error. Change them to get the effect you like. Messing with the hue range can give you icy-blue flames, or golden yellow flames, or wicked poison green flames. It's your dragon! Let your code reflect her personality.

Download your code to your Circuit Playground and see how you like it. Does it look flamey enough? Mine didn't. I wanted more flickers, more randomness, and more than one LED changing at once. So I copy/pasted the code block to double it, then changed the hue values in the second block to 10-25. Now I have both a random reddish-orange flicker and a random orange-yellow flicker happening. This looks fantastic. I'm happy with the spines!

Mouth

I want a really similar fire effect inside the dragon's mouth. I've got two pixels hidden in the throat to achieve this. The NeoPixel strand has 4 lights on it. The first two lights (numbered 0 and 1) are glued into the eye sockets, so that leaves the last two (numbered 2 and 3) to illuminate the mouth. 

Copy/paste the strand set pixel color.. block so you have two of them. Assign one to pixel 2 and one to pixel 3. Then, copy/paste the hue / sat / val block from the block above. Leave val at 255, and choose a random hue for inside the mouth. I chose 0-20, giving me a slightly redder color than the spines.

Download the code again and test to see if you like it.

Eyes

I want my eyes to be beautiful whirling rainbows, in synch with each other. To make both pixels (0 and 1) on our strand animate together, we'll use a for loop. For loops are used to refer to an array, or block of pixels, all at once.

Drag an instance of for index from 0 to 4 into your forever loop. Replace the index variable with the eyes variable we made earlier, and change the 4 to 1

Copy/paste your strand set pixel block from above and drag it inside the for loop. Change the pixel color variable to eyes, and then the hue value to the rainbow variable we made earlier. Then, add a change rainbow by 1 block from the VARIABLES tab.

This will slowly rotate the hue of pixels 0 and 1 through the rainbow. Download your code and be sure it's all working!

With the eyes and mouth doing their thing, I decided I wanted a little more randomness in the spines. I added a strip set brightness block from the NEOPIXEL tab and chose some random colors for the brightness. Now it's even flicker-ier!  

Egg

Now let's add lights to the face of the Circuit Playground Express for inside the egg. I want a nice flickery white. The easiest way to do this is to play with the saturation of the pixels. Pulling the saturation all the way down to 0 will take all the color out, leaving us with a simple white color.

Since we have 10 lights on the face of the Circuit Playground, we'll use another for loop to address all 10 pixels. Drag (or copy/paste) a for loop and this time make it read 0 to 10, since we have 10 pixels. 

From the LIGHT tab, drag two instances of set pixel color at 0 to red into this loop, and also a set brightness block.

Replace the pixel number with pick random 0 to 10, to apply the flicker randomly to all the pixels. Replace the red with hue / sat / val again. Set the sat to 0 for white, and add some randomness to val for a flicker.

Add more variety to the brightness as shown.

Finally, slow the animation down by adding a pause 100 ms from the LOOPS tab. I like mine running a 225 ms pause.

That's all the lighting effects.  Next we'll move the code into a function for safe keeping, and code the capacitive touch on/off switch.

This guide was first published on Apr 02, 2019. It was last updated on Apr 02, 2019.
This page (Light Effects Code) was last updated on Oct 25, 2020.