MakeCode

Setup Circuit Playground Express for MakeCode

MakeCode is a block based language that makes it easy to program the Circuit Playground Express. You can drag and drop code blocks to make things light up. To get started, we'll need to head over to the Adafruit MakeCode website and follow the steps below.

  1. Plug in your Circuit Playground Express with a USB Cable
  2. Press the RESET button. Green light means you're ready to MakeCode
  3. Download the UF2 file and drop it onto CPLAYBOOT.

LunchBox with Motion Activated NeoPixels

When the lunchbox is opened, a strip of NeoPixel flash on/off and a Power Up sound effect is triggered. Then, the NeoPixels on the Circuit Playground Express sparkle after the NeoPixel strip flashes. 

How's does this work?

The accelerometer on the Circuit Playground Express can detect when it's facing up and down. In the code, we can tell the NeoPixel LEDs to flash on and off when the Circuit Playground is facing up. We can also add sound effects and animate the on-board NeoPixels.

LunchBox Code

The full program is available to download and modify. Click the Adafruit flower logo in the top left to open in a new window. There you can play with the Circuit Playground simulator, modify code blocks and upload code. 

Below the code embed is a step by step breakdown of the program. Read through it to get an idea of how to build this program, block by block. If you get stuck, re-read the steps and reference the guide.

How To Connect NeoPixel Strip to Circuit Playground Express

We need to setup the neopixel strip by assigning it to a pin on the Circuit Playground. We can do this by creating a variable, setting up a strip and configuring which pin it's on and how many pixels are in the strip.

  1. Drag and drop an On Start block from the Loops menu onto the canvas.
  2. Create a variable called "strip" using the "Make Variable" button in the Variables menu.
  3. Click on the "Light" menu and click the "NeoPixel" submenu.
  4. Drag the "Set [strip] to create strip" block into the On Start block.
    1. Click the plus(+) button and select A1
    2. Click the plus(+) button again and type in 30 (the number of pixels in our strip)
  5. Drag and drop a Strip Set Brightness block from the NeoPixel submenu to the bottom of the Set Strip block. Type in desired brightness (255 is max).

projects_onstart.gif

projects_strip-variable.gif

projects_set-strip.gif

Making Things Light Up

Now that we have our external neopixel strip setup, we can start programming events to trigger animations and sound effects. Let's think about how we can do this. In this project, we placed the Circuit Playground inside the lid of the lunchbox. So when the cover is open, the board is facing up and when it's closed, it's facing down.

  1. Drag and drop "On Shake" block from the Input menu onto the canvas.
  2. Click the "Shake" option to open the dropdown and choose "Face Up".
  3. Drag and drop "[Strip] set all pixels to [color]" into the "On Face Up" block.
    1. Choose a color by clicking on the color box and picking from the swatches.
  4. Drag and drop "play sound [power up]" into the "On face up" block.
    1. Choose a sound effect by clicking on the dropdown picker.
  5. Download code and test!

When the board is facing up, it should light up the strip of neopixels and play a sound. That's great, but how do we get the lights to flash on and off?

projects_block-faceup.gif

projects_faceup-strip.gif

projects_faceup-sound.gif

Using Loops for Flashing Lights

In order to flash the NeoPixels on and off, we'll need to create a repeat block and loop between turning the pixels black and white (or in this case, on and off).

  1. Drag and drop "repeat [4] times" block from the "Loops" menu onto the canvas.
  2. Insert a "[strip] set all pixels to color" block into the "repeat [4] times" block.
    1. Choose the color black
  3. Drag and drop "pause [100]ms" block from the "Loops" menu below the "strip set all pixels" block.
    1. Type in or choose the value "100".
  4. Right click on the "[strip] set all pixels to color" block and choose duplicate.
    1. Place below the "pause" block
    2. Change the color to something other than black.
  5. Add another "pause" block to the bottom of the second "strip set all pixels" block.

And now we have a repeat block that we can insert into our "Face Up" block. You'll want to replace the first "strip set all pixels" block with our "repeat" block.

projects_repeat-block.gif

projects_pause-block.gif

projects_duplicate-blocks.gif

Adjust, Remix and Modify

You easily change up the options in the various blocks to make new events and triggers! Why not change on face up to on shake? Now you can shake the launch box to make lights or sounds! Add an on face down block to make it do other things when the lunchbox is closed! The options and combinations are enormous so start experimenting!

This guide was first published on Jun 13, 2018. It was last updated on Jun 13, 2018. This page (MakeCode) was last updated on Jul 23, 2019.