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.
Text editor powered by tinymce.