MakeCode is an easy way to get up and running with the Circuit Playground Express.  No prior coding knowledge is needed, and it's an easy way to experiment and learn to think like a coder.

To get started, go to and then choose New Project.  You'll find yourself in the MakeCode Editor.  From here, you can click on any of the colored tabs and drag blocks of code onto your workspace, then preview it using the Circuit Playground Express pictured on the left.  

Once your code is written, plug your Circuit Playground Express into your computer via its USB port and click the "reset" button.  All the lights will turn green and your Circuit Playground will appear as a drive on your computer called CPLAYBOOT.  Simply drag your downloaded code onto this drive to program the Circuit Playground Express.  Easy! Note: If you see a drive called CIRCUITYPY then press the reset button again (or twice in a row) to get to CPLAYBOOT.

Head over to this Intro to MakeCode guide for more info on getting started with MakeCode.

If you want to skip right to the end and work backwards, here's the completed MakeCode project.

Set Up the Lights

First, let's tell the Circuit Playground that we have a strand of lights wired up to pin A1, and how many pixels we're using.  We'll also set the brightness of our lights. 

It's good practice to use a variable to tell the Circuit Playground how many lights will be used.  That way if the number of pixels in the strip changes later on, or if we want to reference it later in the code, it can be done easily.   To do this, go to the VARIABLES tab and create a new variable.  Call it numpixels.  Then drag an instance of set item into your on start loop and select your numpixels variable.  Set the number of pixels in your strip.

Next, add the strip itself.  From the VARIABLES tab, drag another instance of set item into your on start loop, and this time select the strip variable.  (If it's not there, go ahead and create it.) 

Click the LIGHT tab to make the NEOPIXEL tab appear beneath it.  Anything in the NEOPIXEL tab will refer to the strip of lights you attached, and anything in the LIGHT tab refers to the lights on the face of the Circuit Playground Express. 

Drag an instance of create strip into your set strip line, and click the + sign to set it up as shown.

Drag an instance of strip set brightness into your on start loop (from the LIGHTS tab).  Set your brightness to something moderate for now -- you can always change this later.  I used 150 which is a little more than 50% bright.  Depending on the environment where your table will be, you may want to choose as low as 40, so people can still see their food.

Create a Toggle Variable

The Circuit Playground Express has two buttons on the face, a slide switch, or a number of capacitive touch pads.  Any of these can be used to control our lights.  I'm mounting the board underneath my table, so I decided to use the buttons since they're easy to find with my fingers when I can't see the board.   

Another great idea might be to make a capacitive touch inlay in the table and control the Circuit Playground with that, as shown in this awesome Metal Inlay Capacitive Touch guide.

First we need to create a variables.  Go to your VARIABLES tab and create a variable called on.  We'll use this to hold the state of the lights, so we can tell if they're on or off.

Drag another instance of set item into your on start loop, and choose your on variable.  Then, under the LOGIC tab, choose true.  This will make the lights default to on when you plug the table in.

Add Animation

MakeCode comes with six different pre-programmed animations to choose from, or you can create your own in Javascript or using the Photon feature.  I used the rainbow animation in my example, but play with the others too, and see if there's something you like!

We'll add the animation in the forever loop, so it runs continuously.  But we only want it running when the table is turned on, so for this we'll need to add a conditional loop.  

Under the LOGIC tab, drag an if / then / else block into your forever loop.  Add a comparison block and drag in variables and logic so it reads if on = true then

Now, tell it what you'd like it to do if on=true: run some animation.  Under the LIGHTS tab, drag strip show animation into the first part of the conditional loop.  Set the delay to 100ms.  The animation will keep running the whole time the table is on, but every 100ms the Circuit Playground will check to see if its button has been pressed -- so a smaller delay here means a more responsive button.

To make the lights go off when on=false, drag an instance of strip set all pixels to into the else part of the conditional block, and change the color to black.

Code the On/Off Switch

We'll use one more conditional loop to make our on/of toggle switch.  From the INPUT tab, drag an instance of on button A click onto your workspace.  Put a conditional loop inside (from the LOGIC tab) and add your variables as shown.  Now, each time the button is clicked, the on variable will change state from true to false.  This will make the lights toggle on and off as it works together with the conditional in the forever loop.

Since my Circuit Playground Express will be mounted below my table where I can't see it, I want to be able to use either button to turn it on or off.  Select the on button A click block and copy/paste it to your workspace.  Then choose button B instead of button A.  This way both buttons will work as toggle switches.

Save your work, and click the Download button in the lower left corner.  Plug in your Circuit Playground and press the reset button.  The onboard NeoPixels should all turn green, and you'll see a new drive appear on your computer called CPLAYBOOT.  Drag the file you downloaded onto this drive.  You're done!

If you're having trouble or don't see the CPLAYBOOT drive, head over to the Circuit Playground Express guide for some troubleshooting tips.

This guide was first published on Dec 11, 2018. It was last updated on Nov 21, 2018.

This page (Code with MakeCode) was last updated on Nov 21, 2018.

Text editor powered by tinymce.