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.
MakeCode
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.
Input
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.
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.
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.
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.
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!)
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.
