Code with MakeCode

Click the Circuit Playground Express and then New Project. You'll see your workspace, with a Circuit Playground on the left, some tabs in the middle and your workspace on the right. Click the LOOPS tab, and find on_start. Drag it into your workspace.

Let's tell the Circuit Playground Express that we attached some lights to pin A1. Click the LIGHT tab and another sub-tab will appear labeled NEOPIXEL. Anything in the LIGHT tab refers to the lights on the face of the Circuit Playground Express itself.  Anything in the NEOPIXEL tab will refer to lights that you add. Find set strip to create strip on A1 with 30 pixels and drag it onto your workspace inside the on_start loop.

Click the VARIABLES tab and create a new variable called num_leds. Drag an instance of set num_leds to 0 into your on_start loop at the top. Then go back to the VARIABLES tab and grab an instance of num_leds, and use it to replace the number in the create strip block. Set num_leds to 160 (or however many pixels you've got on your umbrella).  

Click the VARIABLES tab and create a variable called rainbow, one called raindrops, and one called colorsense. Don't do anything else with them yet.

Head to the INPUT tab and drag an instance of on button A click into your workspace. Drag a second and third instance out as well, and change the dropdown to read button B and buttons A+B. Whatever you put inside each loop will be triggered by the action you chose.

Click the VARIABLES tab. Drag an instance of set rainbow to 0 into the button A input loop. (You may need to find it in the dropdown menu). Drag another instance into the button B loop and set it to raindrops. Set buttons A+B to colorsense.

Click the LOGIC tab and scroll down until you find true. Replace each of the 0 fields in the three modes with true.  

Next we'll create the modes themselves. We'll run them inside the forever loop so they run continuously until we press a different button.

Click the LOGIC tab again and find the if / then / else block.  Drag it inside your forever loop. Now we can tell the Circuit Playground Express what to do when each different mode we set up is "true".

Drag an instance of strip show animation (rainbow)from the NEOPIXEL tab into your forever loop, inside the if/then statement. Then, head back to the LOGIC tab. Find the Comparison block 0=0and drag it into your if/then statement, replacing the true that was there as the default.  Then grab another instance of true from the LOGIC tab and replace the second 0. 

It can be a little tricky to drag these blocks into each other.  Look for the highlighted outline when you're hovering with your mouse, to know you're dragging to the right spot.

Lastly, head back to the VARIABLES tab and grab an instance of the rainbow variable we made earlier. Drag it into the first comparison spot, replacing the 0. Now the code basically says, "If rainbow = true, then play the rainbow animation" -- and remember, pressing button A makes rainbow = true.  We're coding like pros!  Let's download it and see if it works.

First click the + button at the bottom of your if/then statement to add another slot. Then drag two instances of strip set pixel color at 0 to red inside the slot you created.

Select the conditional statement from the rainbow mode slot and copy it to your clipboard.  Paste an instance of it directly to your workspace.  Now you can drag this new instance into the new slot you're working and change the variable to raindrop. Anything that happens in this slot will happen if raindrop = true (when you press button B).

We have two instances of strip set pixel color so we can turn the pixels both on (white, or whatever color you'd like your raindrops to be) and off (black). Select the colors you want here.

I want my raindrops to spatter and disappear randomly, so we can add randomness from our MATH tab to get this effect. Replace the 0 in both of these blocks with pick random 0 to 10 from the MATH tab.

Head back to the VARIABLES tab and drag an instance of num_leds to replace the 10 in each of these blocks. Now we'll have a random number chosen from our entire LED strip instead of just the first 10 pixels. (See?  I told you variables were useful!)

Find your input blocks. You can use the copy/paste method here -- copy an instance of set rainbow to true and place it inside the loop, changing it so it reads set raindrops to false. Make another one for the colorsense mode. Repeat in the other input blocks, so that each block sets its own mode to true and the other two modes to false.

To be sure the old mode goes away, let's also add an instance of strip clear to each input as well. This will turn all the lights off for just a moment.

First we'll make the NeoPixel light #0 on the Circuit Playground Express' face blink 3 times. Grab a repeat 4 times loop from the LOOPS tab and put it into your on buttons A+B click block at the end. Change the 4 to 3.

Now drag 2 instances of set pixel color to red from the LIGHT tab (not the NEOPIXELS tab this time. Remember, we want to affect the onboard lights, not the strip). Change first the red to white (or whatever color you'd like the blinking to be) and the second red to black (for off). 

Grab 2 instances of pause 100ms from the LOOPS tab and place them in between. Change 100ms to 500ms, to make them blink on and off every half-second.

Now we'll sense the color and set our NeoPixel strip to match. Drag an instance of NEOPIXEL > strip set pixel color into your input loop outside the repeat loop.  (If you put it inside, it would sense three times). 

Finally, go to INPUT and drag out an ambient color variable, and use it to replace the red color.

Back in our FOREVER loop, we need to repeat what we did before and tell the Circuit Playground to watch for when colorsense is true. You can use the copy/paste method again to make your FOREVER loop look like the example. I also added a strip stop all animations block inside this loop, just in case the animations get wonky.  

In the last else block, I placed a strip clear.  In this case, the umbrella will be dark unless a button is pressed. If you want an animation that happens when no button has been pressed, you can place it here.