Code with MakeCode

Our first step is to get some code running on the Circuit Playground so that when we hook up the lights, we know if it's working.

The easiest way to control these lights is with Microsoft MakeCode, a drag-and-drop online code editor. It's free and fun to use and will get you up and running in no time.

You can click the code below and download it as-is, or you can follow along and code it yourself, choosing your favorite colors and adding your own customizations.

To learn more about MakeCode from square one, we've got a great primer guide you can check out.

Here's the finished code for the easter egg project. Click the "edit" button in the upper right hand corner to open it up in MakeCode.

Take a look at the code. The column on the left are tabs that contain code snippets, and the area on the right is our workspace where we build the code.

We've got two green blocks, called on start and forever. Anything inside on start happens once, when the Circuit Playground starts up, and anything in forever will run over and over, forever.

In the on start block, we set up the NeoPixel strip on pin A1 and tell it how many pixels we want to light up, and then also set the brightness of the strip. 

In the forever block, we tell each of our 4 pixels what color we want it to be. Notice that the first pixel is numbered 0. This is how computers count -- starting with 0 instead of 1 -- so pixel number 0 will be the first pixel in our strip. Whatever color you'd like for that first pixel, put it in the 0 block.

You can change the colors of each of the pixels here, or copy and paste the block to add more pixels. Just make sure each pixel has a unique number so you aren't trying to tell a pixel to be two colors at once.

The fourth pixel in the strip (pixel number 3, as computers count) is set up to animate like a rainbow. We've made a variable called hue, and every time the code runs, the hue number changes by one. The code is running over and over very fast, so by changing the hue variable we can change the color of the light. If you change the variable by more (maybe by 2, or 3, or even 20) then the light will change colors much more quickly.

You could also slow down the color change by going to the LOOPS tab and getting a pause 100ms block, and putting it inside your forever loop. Then, every time the code runs, it will put a little pause in there to slow things down.

Download your Code

Once you've got the colors you want for each pixel, click the Download link in the lower left corner. A file will be saved onto your computer. Plug your Circuit Playground into your computer with a good USB cable. (Some cables are charge-only, so if you're not seeing results, try a different cable)

The lights on the Circuit Playground will turn green. (If they don't, press the tiny "reset" button in the middle of the board.) A drive will appear on your computer called CPLAYBOOT.

Drag the file you just downloaded onto this drive. That's it! Your Circuit Playground is programmed. Time to hook up the lights.

Troubleshooting

If you're having trouble, head over to this MakeCode guide for lots more instructions and things to try.

Next Steps

There are so many things you can do with MakeCode. Check out our Make it Glow - NeoPixel Basics guide for a whole lot more ideas and code samples. 

Have fun choosing colors for each of your eggs!

This guide was first published on Apr 15, 2020. It was last updated on Apr 15, 2020.
This page (Code with MakeCode) was last updated on Jun 18, 2020.