MakeCode is an easy way to get up and running with the Circuit Playground.  No prior coding knowledge is needed, and it's an easy way to experiment and learn to think like a coder. You just drag and drop code blocks, like building with Lego. MakeCode makes coding fun!

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

How To Upload the Code

  1. Open the project with the button above and click the blue DOWNLOAD button near the bottom of the project.
  2. Plug your Circuit Playground 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
  3. Drag the code you just download onto this drive to program the Circuit Playground -- like putting files on a USB stick. That's all you need to do.

Note: If you plug in the board and you see a drive called CIRCUITPY appear, press the reset button again (double-click) to get to CPLAYBOOT.

How To Use It

On/off:

The tiny slide switch on the face of the Circuit Playground turns the light strand on or off. Slide right for on, slide left for off. (So, if you just downloaded the code and you don't see anything happening, flip this switch! You might just be in "off" mode.)

Modes

This code has four different modes. Click button A to cycle between them: 

  1. Rainbow: an animated LED rainbow. Who doesn't love rainbows?
  2. Rainbow Fade: the lights are all the same color and fade through the rainbow as a unit
  3. Solid: Pick a color, any color ya want!
  4. Twinkle: Lovely glittery white twinkles

Variations

Button B is our variation button. Click it to vary the speed of the rainbow and twinkle animations, and the color (hue) of the solid animation. There are seven speed levels, from fast to slow, and the hue will just keep changing and rotating each time you press the button.

How to Customize Your Code

You can add your own modes, give yourself more speed variations, or set it to start up on your favorite mode. The possibilities are endless! Poke around and change some stuff, and if it stops working you can always come back here and start fresh. Make it yours.

The green box on the left contains two blocks: on start and forever. These are found under the LOOPS tab at the left. Anything in the on start block runs just once, when the board first powers up. Anything in the forever loop runs over and over, forever. 

On Start Block

The first line sets up our light strand. If you have more than one strand daisy-chained, change the set strip to create WS2812 strip number to reflect your total number of lights.

Next, we define our variables.

If you add or remove modes, change numModes to reflect the total number of modes (including mode 0).

To select a different start-up mode, change set mode to 0 to the number of the mode you want to appear first. 

You can also change the starting hue by choosing a number between 0 and 255.

Forever Block

Here is where we set up the order of our modes. If you want to add more modes you can do it here by clicking the + button at the bottom and calling more functions. Be sure to increment the mode number in each block you make, and don't forget to change numModes in the previous block if you add or subtract modes.

I really like having solid come after rainbowFade. I can choose which solid color to "land" on by the timing of when I press button B -- as the lights fade through the rainbow, press the button to "capture" that color as the solid hue.

Functions

The blue box in the middle contains our functions. These are the actual LED modes themselves, which we call in the forever loop. You can add as many functions as you like.

The rainbow function is using MakeCode's built-in rainbow animation. We're using show frame of animation instead of show animation because that allows us to change the speed with the delay variable, by pressing button B

The rainbowFade function can be customized too. To make the lights more pastel / less saturated, change the saturation number: 255 is fully saturated, and 0 is pure white. To make the fade go more slowly / smoothly, decrease change hue by to a smaller number. Set this to 1 for a very slow, smooth fade -- experiment to see what you like.

The solid function is a simplified version of rainbowFade. You can vary the saturation here too if you'd like.

The twinkle function is another built-in animation provided by MakeCode. There are 6 animations in that dropdown -- experiment with the others to see if there's one you like! 

Button Controls

This block is where we tell the CircuitPlayground to scroll through the modes each time button A is clicked. When it reaches the last mode (defined by the numModes variable from the on start block) it resets to 0.

Button B is where we've created our variations. I'm varying speed and color, but you could also vary brightness or saturation or any other variable you can dream up. 

Try changing the numbers around to customize how many speed levels there are or how much the color changes each time the button is pressed.

There are also other triggers available -- you can trigger a mode change or variation when you shake or move the CircuitPlayground, or whenever a loud sound is heard, or a whole host of other options. Look under the INPUT tab to see them all.

This is an easy way to make your project react to its environment. Make the crystals change color whenever you clap your hands or jump up and down!

On/Off Switch

Here's where we turn the lights on and off with the slide switch. We've done this by changing the brightness to 0 or back to 255, so if you want to change the overall strand brightness be sure to change it here as well as in on start. 

Doing it this way means the Circuit Playground will "remember" the light mode and variation you were in when you turn the lights back on. Cool!

However, remember that the whole project is NOT turned off when the slide switch is in the off position. The board is still awake and using power, so if you've got a battery powered project, this mode will slowly drain your battery. Turn it off with the switch on the battery pack or unplug your battery when you're ready to leave it off long-term.

Troubleshooting

If you are having trouble, here are a few things to check:

  • Is your slide switch in the "off" position? If you download the code and nothing happens, flip the switch the other way to see if that fixes things.
  • Are you connected to pin A1 with your data wire? Double check your wiring to be sure it matches the diagram.
  • Did you connect to the IN end of the strip? The lights should be face up when the Circuit Playground is face up, without any twist in the wires. If they're face down, you've connected to the wrong end of the strip. Switch it around and try again.
  • Are you using a Circuit Playground Express instead of a Circuit Playground Bluefruit? This code will work with the Express, but you need to select it in the MakeCode window. Click the ... button next to the Download button and select Choose Hardware to switch boards.

If you still can't get it working, head over to the Circuit Playground BlueFruit Intro Guide for more help and suggestions.

This guide was first published on Jun 12, 2020. It was last updated on Jun 12, 2020.
This page (Code with MakeCode) was last updated on Oct 08, 2020.