The easiest way to get started with programming the Circuit Playground Express is with MakeCode, a visual programming tool. Start by reading the guide below on using MakeCode, then head over to makecode.adafruit.com and start a new project.

Here is the badge program I wrote in MakeCode. It uses the badge’s four conductive pads to change animations on the Circuit Playground Express NeoPixel ring.

Let's Make Some Code

Start by dragging an if/else block into your forever loop. We'll use this to set up the different animation modes we want to use. Grab a 0 = 0 conditional block from the Logic category and drop it into the if line.

Make a variable for the animation mode. In the Variables category, click "Make a Variable" and name it "mode". Click "OK", and your new mode variable should appear in the Variables window. Drag it onto the first slot of your 0 = 0 condition, replacing the first 0.

Next, let's assign the sparkle animation as the first mode in our program. Change the 0 to 1. From the Light category, grab the show animation block and drop it under the if line. Now, when the mode is set to 1, the Circuit Playground will show the sparkle animation.

Because we have 4 conductive inputs, let's set up 4 different animation modes. Click the + on the if/else block to add another condition, and repeat the step above to assign animations to modes 2, 3, and 4. Set the else condition to show the rainbow animation, this will be our default mode.

Next, we'll set each of our four conductive inputs to select one of the modes we just created. From the Inputs category, drag an on button click block onto the workspace. Use the drop down menu to change the button A to pin A2.

From the Variables category, drag a Set item to 0 block into the slot. Click on item and change it to our mode variable. Then change 0 to 1 for the sparkle animation. Now, when pin A2 is touched, the Circuit Playground Express will show the sparkle animation. You can check it by clicking the A2 pin in the MakeCode simulator!

Repeat the steps above to set up pins A3, A6, and A7 to show the other three animation modes when touched.

We're almost done! Let's add a way to show the default animation. Since we set else in our if/else block to the rainbow animation, if we set the mode to anything other than 1, 2, 3, or 4, the rainbow animation will play. So let's add another On Button Click block to the workspace, but this time set it so that when Button A is clicked, the mode is set to 0.

You're done! Plug your Circuit Playground Express into your computer, and it will show up as a drive named CPLAYBOOT. Download your code and drag it onto the drive to load it. Check it by pressing the conductive pins and the button we set up. If everything looks good, move on to building the badge!