We'll use Microsoft's drag-and-drop code editor to create the magic. 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 makecode.adafruit.com 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!
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. We'll also set the brightness of our lights.
|
|
Click on the "Loops" tab and drag an instance of
Click on the "Light" tab and find |
|
|
Click on the LIGHT tab again, and the NEOPIXEL tab will appear right under it. From NEOPIXEL, drag an instance of
Click the |
It's good practice to make this number a variable. That way if you decide to change the number of pixels in your strip later on, or if we want to reference it later in the code, we can do so easily.
|
|
Click the VARIABLES tab and make a new variable. Call it
Drag an instance of
Then, go back to your NEOPIXELS tab (under the LIGHTS tab) and drag an instance of |
Filling the Bag with Lights
Each time we "drop" a magic light into the bag, we want one light to turn on. We've got ten lights on the face of the Circuit Playground, and seven more spread out along the inside of the bag. But if we used all ten of the Circuit Playground's lights, it wouldn't look quite right. Dropping random lights into a bag would never light up a perfect circle! So we'll just use a few of the Circuit Playground's lights, to make it seem more random and jumbled, and then move on to our light strip.
Decide how you want to trigger your effect. You can use the buttons on the face of the Circuit Playground, or the capacitive touch pads around the edge. Capacitive touch works great with sheer fabric, but if you're using fun fur, the fabric is too thick to trigger the capacitive touch -- so maybe not the best option in this case. You could also use the "tilt" or "shake" features. It's all dependent on your magician's flair and style. You could even use multiple triggers to make it even more mysterious!
I decided to use "shake" -- so each time I shake the bag, another light will appear.
Add Variables
First we need to create a couple more variables. Go to your VARIABLES tab and create a variable called nextlight. We'll use this one to refer to the lights on the strip. Create one more called nextcplight. We'll use this one to refer to the lights on the Circuit Playground Express.
|
|
From the INPUT tab, drag an instance of |
Now we'll add some code that changes the variable nextcplight to refer to a different light. I want to use just 3 of the Circuit Playground Express' lights (to avoid the perfect circle look), so I'll tell it to start at light 1 and then skip ahead lights -- so we'll light up pixels 1, 4, and 7.
|
|
Go to the VARIABLES tab and drag an instance of
Try downloading the code and see if it works. Plug your Circuit Playground Express into your computer and press the reset button. Drag the downloaded code file onto the CPLAYBOOT drive that appears. Try shaking / triggering your effects and watch your lights come on. |
Now let's do the same thing for the light strip. We want to use the same trigger (on shake) but we don't want these lights to come on until all three lights on the Circuit Playground face have come on. We'll need to add a conditional statement (if/then) to make this work.
|
|
Under the LOGIC tab, drag an
Change the first |
The next thing is to light the lights on your LED strip. So let's repeat the same idea, only using the blocks and values that will work for our strip.
|
|
Grab
Drag in your
Try downloading this code again and see if it works the way you want. |
Emptying the Bag
Hooray! We've gotten the bag to fill up with magic lights each time it's shaken. Now let's add a function that makes it appear to empty out when we're done.
We'll use the "tilt" input for this part. I want the bag to empty out when I turn it completely upside down, so the "tilt down" input is the one I'll use.
You could also make it trigger with a loud sound, a fast swing, or if you shine a bright light at the outside of the bag. So many possibilities!
|
|
Drag another instance of
From LIGHT drag an instance of |
|
|
Then, we'll add some randomness so the lights go off in a random order. Under the MATH tab, drag two instances of
Then we'll slow it down a little. Drag an instance of |
|
|
Let's add a failsafe just in case the random numbers don't turn all the lights off. After the |
Resetting the Trick
One last thing to add! We want the trick to reset itself after the bag is emptied out, so you can immediately fill it again. To do this, we have to reset the nextlight and nextcplight variables back to their original state of 0 and 1. Do this in the on tilt down loop, OUTSIDE the repeat loop, so the animation finishes before the variables get reset.
|
|
Drag an instance of |
