MakeCode for Circuit Playground Express

MakeCode is this programming editor that runs in the Google Chrome web browser. It’s has an intuitive interface that’s both block based and text editor.

It works with Adafruit Circuit Playground Express so you can make interactive projects with the on-board sensors and components. You can drag & drop blocks to make interactive programs using lights and sounds without having to solder or learning a new syntax.

You can alternatively upload code directly to the Circuit Playground Express with WebUSB, follow this guide if you'd like to try that option.

Setup Circuit Playground Express for MakeCode

To get started, we'll need to head over to the Adafruit MakeCode website and follow the steps below.

  1. Plug in your Circuit Playground Express with a USB Cable
  2. Press the RESET button. Green light means you're ready to MakeCode
  3. Download the UF2 file and drop it onto CPLAYBOOT.

Upload and Test Code

Once you have your CPX setup with the makecode UF2, try testing it out by uploading the code to the board. Click the link below to open up the program in makecode. Click on the pnik edit icon near the top of the title to open the code. This will create a project in MakeCode and allow you to edit, modify and upload the code to the board. 

Capacitive Touch Synth


This program uses capacitive touch to trigger musical tones. The Circuit Playground Express has seven pins that are capable of capacitive touch. Each time a pad is touched, a music note (or combination of notes) will be played. Each pad can be assigned a different music note. While the note is playing, we can see NeoPixel LEDs light up and assign different colors. When a finger is released from the pad, it will turn the NeoPixel LEDs off and stop all sounds. We can easily change blocks to make new notes or even trigger them using different inputs!

Code Block Breakdown

Let's break down the project and walk through setting it up one block at a time. We'll start with using the interface. On the far left side is an image of the CPX board. This is the CPX simulator. You can use it to test your code. It's interactive, try clicking on the buttons and pads. Right next to it is a menu with colored blocks. Each is section that contains several functions that are associated with the sections title. For example, the "LIGHT" blue color menu has all things pertaining to the RBG NeoPixel LEDs. 

Using Inputs


In the inputs menu we have a wide selection of blocks to pick from. For simple inputs, we can use the "on - button A" block to trigger our music notes and LEDs. Click and drag it onto the canvas. Click on the "Button A" to open a dropdown with more options. Here you can set which pad you'd like to trigger. Click on the "click" option and change it to "down". This assigns the input to only trigger when it detects a "down state", meaning when we touch down on the pad. 

LEDs and Tones


In the light menu grab the set all pixels block and drop it side the on block. Choose a color by clicking on the red bubble. Try pressing the "A Button" in the CPX simulator – It will light up the LEDs. Next, click on the music menu and grab the ring tone block (the one without the beat option). Drop it below the set all pixels block, it should snap to it. Click on the middle C title to choose a new music note. A piano keyboard layout will pop up allowing you to choose from a number of different notes.

Up & Down States


If we were to press the "A button" now, the music note would continuously keep playing. That's could be a bit annoying, so let's make it turn off when we release the button. Right-click on the On Button A block and choose duplicate.  This will create a copy of our block set. Change the down option to up. Change the set all pixels block to black. Remove the ring tone block from the up block set. Grab the rest beat block from the music menu and place it below the set all pixels block.

Play Testing


Use the simulator to test out the new code blocks. Press the "A Button". The NeoPixel LEDs should turn on and quickly turn off. A musical note should play as well and stop playing. Our up and down states are now configured. Upload the code to the board to test it out IRL. Use the tip of your finger to press and hold down the "A Button".  The music note will continuously play until you release the button.

Momentary Inputs

We've created basic momentary inputs that trigger both sounds and lights. This behavior should feel familiar. Think about how an electric piano works, as you hold down a key, the note keeps playing and stops as soon as the key is released. There's similar functionality in buttons from gamepads and keyboards. Now you can change the on block from "Button A" to any of the pads (A1 – A7). These pads are capacitive touch enabled, so you can touch them to trigger sounds and lights. Attach alligator clips to them and plug them into any electrically conductive material such as fruit, play doh, copper tape or aluminum foil. 

Building Arpeggio's


In this block set, we grouped several notes together to form an arpeggio. Three notes will play sequentially, four times over. The notes are wrapped in a repeat block and will play four times. The repeat block is used to create loops. The repeat block is wrapped in a parallel block to allow the show animation block to play along side the musical notes. The show animation block features pre-made LED animations. This example demonstrates how you can use loops and animations together in parallel. Try it out for yourself and change the inputs to your liking. Make it yours and have fun!

This guide was first published on Jun 27, 2018. It was last updated on Mar 08, 2024.

This page (Software) was last updated on Mar 08, 2024.

Text editor powered by tinymce.