empowering creative people

Introducing MakeCode: Adafruit Circuit Playground Express

One of the greatest features of the Adafruit Circuit Playground Express is its MakeCode compatibility. MakeCode is an exciting coding interface that makes coding accessible for those with little or no exposure to how coding works or how it should be formatted. This is largely thanks to its drag and drop block-based interface. Everything made with blocks is also created in Javascript, and you can jump between the two in order to see the actual code that the blocks are creating.

MakeCode is browser-based, meaning there is simply no local installation required, and so to use it you can just follow this link. MakeCode will work in most browsers and most computers/tablet/phones. Once the browser is loaded it can operate offline, so the internet is not required for compiling your code. 

The MakeCode home screen has your saved projects and available tutorials for the Adafruit Circuit Playground Express. In order to enter the editor, you will now select New Project.

MakeCode Adaftruit Circuit Playground Express Home Page

Now that you are in the editor, you will see a virtual Circuit Playground Express in the top left, a menu to select various commands and the workspace. When you open a new project, it starts out with a forever loop already in the workspace. Note the shape of the forever loop, every action that the CPX executes must be inside one of these brackets. They can be loops, inputs, or network inputs.

MakeCode Circuit Playground Express new project

Button Press

For this example, we are going to make some lights illuminate on the Circuit Playground Express when the buttons are pressed and play a rainbow animation and sound effect when the board is shaken. Let’s start out with making some lights illuminate when a button is pressed. For this example, we want the lights to only light while the button is being pressed. For this operation, we will use a while loop. A while loop executes any command inside its brackets while a condition is met. The condition, in this case, is button A is pressed. In the operations, menu select loops and drag the while loop inside the forever loop. Every command in the code needs to be in a forever loop or it just runs once and is done. Notice how compatible lines of code puzzle together. If a piece of code does not work in a given location, then the blocks will not snap together.

Now that we have a while loop we need an input. In this case, the input will be a button press. Under input select button A is pressed and drag it into the place of true in your while loop. The next step is to create an action from our inputs. Go to the light menu and drag show ring into the while loop. I have chosen to make the left lights all turn red when the button is pressed. Use the color wheel on the show ring box to select the colors you would like each light to be when the button is pressed. The only problem now is that the lights stay on once the button is pressed. We need to add a command to turn off the lights when the light is released. In the light menu, scroll to the bottom, drag clear and drop it beneath show ring. Now you have a working button light. Check your code on the virtual Circuit Playground Express by clicking on the A button on the board.

MakeCode Adafruit Circuit Playground Express single while loop

Now let’s do the same for button B. Right-click on the while loop that you have created and select Duplicate. Drag the duplicated while loop inside the forever loop but below the while loop. Change the input to button B is pressed. Now you have two working buttons! Be sure to change the light colors for button B using the color wheel interface. Feel free to give it a try on the virtual Circuit Playground Express in the browser. 

MakeCode Adafruit Circuit Playground Express two buttons

Input loops

For this part of the project, we are going to create an Input loop. There are different types of loops in MakeCode, but they all have the same bracket shape. Every action must be inside a loop or it would just run once and be over before you could blink. When you create a loop that is looking for an input the program runs that part of code continuously just waiting for the input.

The input we would like to wait for is a shake. Select Input then on shake. This will act as a loop and will execute anything in its brackets when we shake the Circuit Playground Express. Inside the on shake loop lets select the music menu and drag play sound into the on shake loop and select the sound magic wand. Let’s make some lights to go with our magic wand sound by selecting the light menu and then show animation. You can choose any animation you like, but I chose rainbow, and set it for 2 seconds since that is about how long the audio clip is. Just like the button press lights, put a clear beneath the light animation so it turns off afterward.
Give it a test by clicking the new shake button that has appeared on your virtual Circuit Playground Express!

MakeCode Adafruit Circuit Playground Express with shake

Downloading Your Code

Getting a light to blink on the web is great, but how about your actual Circuit Playground Express? Now that you’ve made your first code, click Download in the lower left-hand corner, and follow the on-screen instructions.

  1. Connect your Circuit Playground Express to your computer with a micro-USB cable.
  2. Press the RESET button to go into programming mode. When the lights turn green you are ready to go. You may need to double press the reset button.
  3. Click and drag the .uf2 file you downloaded into the Circuit Playground’s Drive (this should be named CPLAYBOOT)

Done! Enjoy playing with your Circuit Playground Express! For more tutorials about MakeCode and the Adafruit Circuit Playground express check out our Tutorials section.

One of the greatest features of the Adafruit Circuit Playground Express is its MakeCode compatibility. MakeCode is an excitin...