Wind Face Emoji Prop

2018-02-27 | By Adafruit Industries

License: See Original Project Circuit Playground

Courtesy of Adafruit

Guide by John Park

Overview

Ever wanted to cosplay as the Wind Blowing emoji but didn't feel like you could pull it off without an interactive, light up cloud prop? Then this is the project for you! No more excuses, go out and build that costume, and add this simple prop!!

You can program your Circuit Playground Express using the visual, drag-and-drop, browser-based GUI of MakeCode -- almost no typing required! Then, add a battery and some puffy, cloud-like batting or cotton balls, and every time you blow on the cloud you can change the weather with your mother nature-like powers!

1 x Circuit Playground Express program it with MakeCode!

1 x Lithium Ion Polymer Battery 3.7V 500mAh -- or any other capacity LiPo you like!

1 x USB Micro Lipo Charger Tiny battery recharger, plugs into any USB port

In addition to the above parts, you'll need a milk carton or piece of cardboard, and some white tape, such as electrical tape.

If you'd like to watch the live build and walkthrough of the code, check out the livestream:

Codeit with MakeCode

First, make sure you are familiar with creating programs with MakeCode and uploading them to your Circuit Playground Express. This guide is a great starting place!

emoji makecode

Copy Code

let lit = 0
let maxBright = 0
let fade = 0
input.onLoudSound(function () {
    if (lit == 0) {
        for (let fade = 0; fade <= maxBright; fade++) {
            light.setBrightness(fade)
            loops.pause(15)
        }
        loops.pause(1000)
        lit = 1
    } else {
        for (let fade = 0; fade <= maxBright; fade++) {
            light.setBrightness(maxBright - fade)
        }
        loops.pause(1000)
        lit = 0
    }
})
light.setBrightness(0)
light.setAll(0xccffff)
maxBright = 120
fade = 0
lit = 0

This is what the final code will look like. You can download the program shown here and upload it to your Circuit Playground Express. To build it step-by-step, check out the sections below.

All new MakeCode projects begin with a single loop block on the canvas -- a forever block. We won't be using this, so go ahead and delete it.

Start Up

Let's set up a few things that will be initialized when you power on your board or reset it. These thing will go in a type of loop called the on start block.

Since we'll be working with NeoPixel brightness to fade on and off the light, we want to make sure the board starts up with the brightness at zero. From the Light category, add the set brightness block to your on start loop and then set the value to 0.

Also found in the Light category, add a set all pixels to color block. Then change the color swatch to light blue. This is the color that will be used when we later brighten the NeoPixels.

Variables

We'll use a few variables to refer to different values used throughout the code. Head to the Variables category and then click the Make a Variable button.

Type in the name of a variable that we'll use to set the maximum brightness value for the NeoPixels -- maxBright. This number will be used a few time throughout the code, so it's convenient to only have a single place to set the value and not need to change it in multiple places if you want to experiment.

Also create variables called fade and lit. The fade variable will be used to store a number as it increase or decreases during brightening and dimming. The lit variable will be used to store the state of the board in the current loop of the program -- has it been lit or not?

Then, from the Variables category, add a set ____ to 0 block for each of the three variables we've made and add those to the start block. You can leave the fade and lit at the default 0, but change the maxBright to 120.

On Loud Sound

Remember how we got rid of the default forever loop? That's because we only need to do things when the prop has been blown on. To detect this, we'll use the on-board microphone and the on loud sound block.

If - Else

Next, we will create an if true - else loop found in the Logic category. This is where we'll test the state of the board (is it already lit or not) and add the code that tells it what to do in these two cases.

Instead of simply testing for "true" we'll swap in a comparison block from the Logic category called 0 = 0.

Drag in an instance of the lit variable to replace the first 0 in the comparison block. Now, the if - else statement block will check to see if lit = 0 or not.

Iterate

When the loud sound has been detected and the lit value is 0, we want to fade up the LEDs by incrementing the brightness value from 0 to 120 (or whatever maxBright value you choose). To do this iteration, add a for ____ from 0 to 4 block.

Change the dropdown to the fade variable.

We want to iterate from 0 to the maximum value, so replace the 4 with an instance of maxBright.

Then, add a set brightness block from the Light category inside the for loop. And, swap in an instance of the fade variable. This means that the for loop will tell brightness to equal 0 the first time through the loop, then 1, then 2, then 3... and so on up to 120!

To slow the fade down a bit, add a pause block from the Loop category, and set the value to a very short pause, 15 milliseconds. This is just enough to give a moderate fade speed without flickering.

Debounce

It's possible that the fade could complete while you're still blowing on the board, so to prevent it from immediately detecting this, we'll add a short delay. This is sometimes referred to as "debouncing" when used to prevent a single button press from registering as multiple presses due to small arcs of current as a physical button moves.

Add another pause block, this time set to 1000 milliseconds after the for loop.

Flip the Lit State

When our program started, it "knew" the NeoPixels weren't yet lit because we initially set the lit state variable to 0. Now, we need to change that state to 1, since the LEDs are on. Add a set ___ to 0 block from the Variables category after the 1 second pause. Change the dropdown to the lit variable and the value to 1. The bit will get flipped after the lights turn on, so that it will do the correct thing the next time you blow on the board!

Fade Down

We can now duplicate and reuse a bunch of the blocks for the else section of the if-else block. Right-click on the for loop and choose Duplicate.

Drag the duplicate copy of the code to the else section.

Invert the Fade

Instead of brightening from 0 to 120, this time we want to start at 120 and go down to 0. The for loop doesn't allow us to do this directly, but we can achieve the results with a bit of math.

From the Math category, drag in a 0 - 0 block to replace the fade variable in the set brightness block.

What we want to do this time, is start at 120 and remove 1 level of brightness each time through the loop. Use the maxBright and fade variables as shown here to do this.

Quick Fade

It's fun to blow out the lights quickly, so remove the pause 15 ms block from this section.

Again, we'll debounce and flip the lit state by adding the two blocks shown here.

You're code is now ready! Go ahead and download it, press the reset button on your Circuit Playground Express, and drag the .uf2 file onto the board.

Test it out! If you like, adjust the max brightness value, the color, and even the timing to suit your needs.

Next, well put together the prop!

Build the Cloud

Now that you've programmed your Circuit Playground Express, you can prepare it for use as a prop.

While the Circuit Playground Express works just fine as the bare board that it is, you may want to cover the back before going out for a day of cosplay. You can make a cover from any non-conductive material you like, such as waxed cardboard cut from an empty milk carton, a piece of thin plastic, even wood.

Here, we'll show how to use a milk carton and some electrical tape.

Your cloud is ready for action! Puff up the cloud to full cumulus beauty and demonstrate your mastery of mother nature's wind! You can always plug in the USB cable and reprogram it in MakeCode as you like to change the max brightness, color, or maybe even add some sound effects!