MakeCode for Circuit Playground Express

MakeCode only works with the Circuit Playground Express. If you have the original Circuit Playground Classic, check out the Arduino version of this code!

Lots of Coding Options

There are many options for programming the Circuit Playground Express to work as a Light Paintbrush! You can hand-code it with the traditional, text-based Arduino IDE, as seen in the previous page of this guid, 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. 


You're now ready to begin coding your own program with the MakeCode interface to use the Circuit Playground Express as your tilt-reactive Light Paintbrush. 

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

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


Your Light Paintbrush will display different colors depending on the angle to which you rotate it. To do this, you'll create inputs that check the rotation angle, and then set the entire NeoPixel ring to a particular color.

The first block you'll add is is an input block that can read the tilt orientation of the accelerometer on the Circuit Playground Express. Click on the Input category and choose the on shake block, then drag it to the canvas. (All of the accelerometer-based inputs contained within this one block.)

Click on the shake dropdown, and select the tilt up options from the list.

Colored LEDs

To light the LEDs, you'll add a show ring  block from the Light category, and then drag it inside the on tilt up block.

You can test this in the simulator by hovering your mouse cursor over the top of the virtual Circuit Playground Express. You'll see the board tilt a bit and the LEDs will turn red. The simulator is a great way to iterate on your program without needing to upload to the real board every time.

The default show ring color is red, but we'll go ahead and change the on tilt up color to green. You can do so by first clicking the green "pie wedge" color picker, and then clicking each of the circular LED dots.

Now when you hover your cursor over the top of the board in the simulator, the LEDs will turn green. Success!

To create the other three tilt direction/color block sets, right-mouse-button (RMB) click the on tilt up block and then left-mouse-button (LMB) click the Duplicate command from the pop-up list.

You'll notice that the new copy of the block is greyed out, meaning it will not run as part of your program. This is because only one instance of the same input can be used -- otherwise the program would get horribly confused in dealing with conflicts.

Click on the tilt up option on the second block set and choose tilt right.

Using the same method as before, change the LED colors to red on the on tilt right block set.

And now, complete the set of gestures by duplicating the block set two more times, and adjusting them as seen here.

That's all there is to creating the core functions of you motion reactive, color changing Light Paintbrush! Test it out on the simulator, and then we'll add one more feature -- a set of hight/low brightness controls.

Brightness Control

To adjust brightness between high and low, you'll click the A and B buttons. Go to the Input block and add an on button A click block.

Click on the Light category and add a set brightness 0 block inside the on button A click block.

The "set brightness" command sets the brightness universally for all of the NeoPixel LEDs

Change the "low" brightness setting to 50. You can adjust this value later as you see fit.

Duplicate the on button A click block, and then switch the input on the new copy to button B, and set the brightness value to 255 (which is blindingly bright, so be careful!)

You won't see the new brightness value take effect until the next time the "show ring" is called by tilting the Light Paintbrush

Your program is complete! You can now dowload the .uf2 file, and upload it to your Circuit Playground Express by plugging it into your computer over USB, and pressing the reset button on the Circuit Playground Express to place it into bootloader mode, and then dragging the .uf2 file onto the CPLAYBOOT drive on your computer.

This guide was first published on Nov 09, 2016. It was last updated on Nov 09, 2016. This page (MakeCode for Circuit Playground Express) was last updated on Mar 02, 2018.