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!

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!