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.
The first thing we'll do is create our variables. These are software containers that hold values for us. I made six different variables.
strand will refer to the two different physical LED strips/strands.
Switch will be used in our software on/off switch.
rainbow will be used to control the rainbow eyes, and
index will be used for counting.
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
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
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.
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
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!
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.
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
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.
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 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
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!
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
hue / sat / val again. Set the
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.