Circuit Playground Express with MakeCode

Lots of Coding Options

There are many options for programming the Circuit Playground Express! You can hand-code it with the traditional, text-based Arduino IDE, you can try your hand at the exciting new CircuitPython methods, or you can harness the incredibly user-friendly, yet powerful block-based interface of Microsoft's MakeCode web app!! (You can even go full circle and hand type code inside the MakeCode interface with Javascript!)

By simply dragging and dropping elemental code blocks, you can create Circuit Playground Express software in no time, and even test it out with the virtual Circuit Playground Express simulator built into the page.

Be sure you've gone through the tutorial here on the basics of MakeCode for Circuit Playground Express. 

Wand Lights and Sound

You're now ready to begin coding your own program with the MakeCode interface to use theCircuit Playground Express as a magic wand prop. 

Click the Projects button so you can start a new project.

Click the New Project... button to create the new empty project.

The new project should have only a single block in the layout area, the forever block. Any block of code you place inside the forever block will run over and over and over and over and over and over and over again. FOREVER! (Unless you create other inputs in your code that can change that, later.)

Rainbow Test

Try it out now. Click the LIGHT category. A collection of new blocks appears, all related to lighting up LEDs.

Click the block called show frame of _rainbow_ animation then drag and drop it inside the forever loop.

The animation block will snap inside the forever loop, and then after a moment, the Circuit Playground Express simulator will begin to play the rainbow animation.

In case the simulator doesn't play, click the play/stop button.

Notice what is happening here -- even though the show frame of _rainbow_ animation block only tells the Circuit Playground Express to play one frame, since it is inside the forever loop, it plays back a full animation over and over again.

Give your file a name in the name field, such as cpe_Wand.

As you did before, you'll Download the UF2 file, put Circuit Playground Express into bootloader mode by clicking the reset button, and then drag the UF2 file onto the CPLAYBOOT drive.

Now, the rainbow animation plays on your Circuit Playground Express!

User Input

What would happen if you required user input to initiate the show frame of _rainbow_ animation code? Let's find out! Click the INPUT category, then pick the on _button A_ _click_ block.

This adds the new input block to your layout. Drag and drop the show frame of _rainbow_ animation block out of the forever block and into the on _button A_ _click_ block.

Try this out on the simulator by clicking the left button a few times. Each time you do so, the rainbow animation progresses by one frame.

Download the UF2 file, put your Circuit Playground Express into booloader mode, and drag UF2 file to the CPLAYBOOT drive. 

Then, click the left button on your real world Circuit Playground Express to see the rainbow animation play back frame-by-frame!

NeoPixel LEDs can go from very dim to super bonkers bright! You can control them with a range of 0-256 levels of brightness. Adjust the overall brightness of all of the NeoPixels with the set brightness block. Click on the LIGHT category, then pick the set brightness block to add it to your layout area.

Setup

Notice how the new block is greyed out. This means that it isn't currently enabled. It needs to be part of a process that can run during some part of the program. Right now, this can either be any code blocks in the forever loop or any code blocks in the on _button A_ _click_ loop. Neither of these is what we want in the case of setting overall NeoPixel brightness. Sorry guys! For this, we'll use an on start loop. Any code blocks inside of on start will only be run once when the Circuit Playground Express first starts up. Think of it like an initialization phase.

Click on the LOOPS category, then chose the on start loop.

Rearrange the on start loop to the top of the layout graph, just to keep things logically and spatially organized. Then, drag the set brightness block into the on start loop.

Try adjusting the brightness value by typing 140 into the set brightness number value block. Then, upload the UF2 file to your Circuit Playground Express. 

When you press the left button the frame of animation will display as before, only this time it'll be much brighter!

Alternate Input

You can make your Circuit Playground Express do something while it waits to get instructions to do something else. What if we want to have the rainbow animation running unless the button is pressed, and then it'll play a sparkle animation for a moment?

You can do this by moving the show frame of _rainbow_ animation block into the forever loop, and then putting some new blocks into the on _buttonA_ _click_ loop.

First, move the show frame of _rainbow_ animation block into the forever loop.

If the LEDs are too bright, you can lower the set brightness value to something like 40 as seen here

Duplicate the show frame of _rainbow_ animation block by right-clicking on it and choosing the duplicate dropdown menu item. Then, drag the new block into the on _buttonA_ _click_ loop.

Change the animation pattern by clicking on _rainbow_ and selecting sparkle instead.

Try uploading this UF2 code to your Circuit Playground Express. Notice that the rainbow animation plays constantly, until you press the left button. Then, there is a momentary flash as a single frame of the sparkle animation plays. It then returns to playing the rainbow animation, since that's in the forever loop.

Well, that's not very fun! Let's use a different kind of loop to play a bit more of the sparkle animation upon each button press.

From the LOOPS category, create a repeat _4_ times/do loop. This is a really useful loop that will execute any contained code blocks x many times, with x being the integer number you fill in. In more traditional Arduino programming this might be represented as:

for(int i = 0; i<4; i++){

   //code to be repeated goes here

}

So you can see how convenient this loop block is!

Drag the show frame of _sparkle_ animation block into the repeat _4_ times/do loop.

The repeat/do and animation blocks are greyed out, since they don't sit inside of any loops that will be executed by the Circuit Playground Express. 

Move them as a unit into the on _buttonA_ _click_ loop.

Increase the number of repetitions from 4 to 24, then upload the program to the Circuit Playground Express and test it out by pressing the left button.

That's more like it! Now the rainbow animation plays until you click the left button, and you then get a moment of sparkle.

Shake It

To use our magic wand and sword props, it'll be much more fun to trigger the lights and sounds with motion instead of a button press. The Circuit Playground Express has a built in accelerometer that can be used to detect different types of motion. Lets swat out the button push input for a shake input.

Chose the shake loop from the INPUT category.

Drag the repeat/do loop (including it's contained show frame of animation block) into the shake loop.

Get rid of the empty on _buttonA_ _click_ loop by clicking on it and pressing delete on you keyboard.

Test the code on your board. Now, when you give it a good shake, the Circuit Playground Express will play back a bit of the sparkle animation, and then return to the rainbow!

Let's make the sparkles even more magical by setting them to maximum brightness!!

Make two duplicates of the set brightness block from the on start loop. Place one above the repeat _24_ times/do block, and one below it. Then, change tie value of the first one to 255. 

Test it on your board -- now, when you shake the Circuit Playground Express the sparkle animation will be super bright!

Don't look directly at the NeoPixels at full brightness, they're massively bright!

Picking Themes

For versatility, you can make your Circuit Playground Express work in different modes, depending on the prop with which you want to use it. Here's how you can use the selector switch on board to pick between two different color and animation themes, one for the wand and the second for the sword.

Slide Switch Input

Add an on switch moved _left_  loop. This is an input block, just like a button press or shake input, but uses the two position slide switch that's built onto the Circuit Playground Express. 

Duplicate the block and change the dropdown to make the on switch moved _right_ loop.

Variables

Next, we'll create a variable to help us check the state of the switch in other parts of the code. The variable is a named object that can store a value, in this case a number. Pick the set _item_ to block from the Make A Variable selections.

This block not only declares the variable, but can be used to change the value of the variable. 

Duplicate the set _item_ to block, and then place one inside each of the on switch moved loops. Also, set the value of the one in the on switch moved _right_ loop to instead of 0.

A nice thing about variables is that we can give them descriptive names that help you out. Let's rename the item variable to theme. That way you'll know whenever you see it in you code that this variable is used to store the value of which theme we're using: a means Wand, and a 1 means Sword.

Conditionals

You'll want to have the program logic react differently depending on the state of the slide switch.

  • If the switch is on the left, then it will play lights and sounds for the Wand when shaken
  • If the switch is on the right, then it will play lights and sounds for the Sword when shaken

To do this, you'll use a conditional operator called an if/then loop. Add an if/then loop from the LOGIC category.

 

We now need to create a block that lets the if/then loop know what condition needs to be met for it to evaluate as true or false. In our case, one loop will be true if theme equals 0, and the other will be true if theme equals 1.

From the LOGIC category, click on the 0 = 0 block.

Also, from the VARIABLES category, click on the theme block. This will allow you to compare the variable to a number (0 or 1).

Drag the theme variable onto the first in the 0 = 0 comparison block -- it'll replace the first 0. Then, drag the theme = 0 block on top of the true segment of the if/then loop.

This loop is now set so that whenever the theme is set to (the left position of the slide switch) it will run whatever code blocks are inside of the then section of the loop. 

Move the set of blocks out of the shake loop and into the if/then loop.

Then, put the whole thing back into the shake loop.

So, here's what this section of your code now does:

  1. Checks the slide switch
  2. Sets the variable called theme to a or depending on switch position
  3. Checks the accelerometer to feel for a shake
  4. Compares the value of theme to the number 0
  5. If the theme does equal 0, then it will bump up the brightness, play 24 frames of the sparkle animation, and then set the brightness back down

Try this out on your board now. You'll see that with the selector switch in the left position, it behaves the same as before, running the rainbow animation until shaken, at which point it plays the sparkle animation for a moment. With the switch in the right position, however, the shake has no effect.

Now that that's working, let's create a loop to play a different animation when the switch is in the right position.

Duplicate the entire if _theme_ = 0 loop, and then move the copy inside of the shake loop. Then, change the if statement value to 1, this means it will execute all code blocks inside of the if statement when the switch is to the right.

In this right switch loop, change the repeats to 300 and the animation to comet.

Test it out on the board -- you now get two different shake animations depending on the position of the switch!

Let's use the same method to change the animation inside of the forever loop. This way, if you're using the Circuit Playground Express for the magic wand, you can set the switch to the left for rainbows and sparkles, or, set the switch to the right for sword mode which includes comets and color wipes!

Match your block layout to the one shown here, then test it out on your board.

Sound

Now that you've gotten lights and action happening, it's time to add sound! 

To begin with, click the MUSIC category, then click on the MORE button, then chose the set speaker volume button. 

Add this block to the on start loop, so that the speaker volume is initialized on startup. To avoid bothering your neighbors, you can pick a low volume, such as 20 as seen here, or really blast it up to 255!

Next, create a block that makes some sound. Let's chose the play melody _power up_ block. Place this inside the "if left switch" loop of the shake loop. This means that if the condition "shake" is met, and the condition "switch is in the left position" is met, the sound will play.

You can select from a list of pre-made melodys, and then try them out by clicking the "shake" button on the Circuit Playground Express simulator. If you don't hear anything, try flipping the virtual selector switch to the other side.

Duplicate the play melody block, insert the copy into the right switch if loop, and then choose a different melody to play during sword swing maneuvers!

Code Cleanup

It works! You're almost ready to attach your Circuit Playground Express to a wand or sword prop! But before you do so, let's clean up the code a little bit.

Often, when you are first creating a program, you'll copy and paste whole chunks of code that are meant to do similar things, and then change them slightly. This works great, but you can then optimizing things by removing redundant code blocks.

Let's have a look at the shake loop.

Since we built the first if/then loop and then duplicated it, we've got more copies of the set brightness 255 and set brightness 40 blocks than we need. Since we want to up the brightness whenever we shake, regardless of the position of the switch, that block can live outside of the if/then loops. The same is true of the block lowering the brightness once the shake is finished.

Move one set brightness 255 block above and outside of the if/then loops, and one set brightness 40 below and outside, as seen here. Then, delete the extras.

That's looking cleaner already! Next, let's consider the two if/then loops. Since our switch only has two states -- left and right -- we know that if the switch isn't to the left, then it must be to the right. 

This is a great place to switch from two if/then loops to a single if/then else loop.

The if/then else loop will replace both if/then loops. Drag the first condition -- theme = 0 -- over to the condition block of the if/then else loop.

Then, move the play melody, repeat _ _ times, and show frame of _ _ animation, blocks from the first if/then loop to the then section of the if/then else loop.

Do the same with the blocks in the second if/then loop, moving them to the else section of the if/then else loop.

Replace the two empty if/then loops with the if/then else loop.

Your code is more streamlined now! You can also optimize the forever loop in the same fashion, to look like this.

Upload this code to your Circuit Playground Express and test it out. It should work identically, but it's good to know how you can optimize your code, especially if you start to create longer, more complex programs.

Here's what the final program looks like. Feel free to experiment now by changing things around, or making a whole new program from scratch!!

Temporarily unable to load embedded content. Please try again later.
Last updated on 2017-11-13 at 08.56.33 PM Published on 2016-10-26 at 11.15.51 AM