Create a fun spinner game with Circuit Playground Express and MakeCode. Press a button on the Circuit Playground to make animated lights and sounds that help you choose between options.
This is a great project for beginners or anyone who wants to get started making with Circuit Playground Express. There are so many different custom options within MakeCode! Go wild!
Text editor powered by tinymce.
MakeCode is Microsoft's drag-and-drop code editor. It makes it easy for beginners and/or kids to get up and running with the Circuit Playground Express. So many options are accessible and easy with MakeCode, and it's really fun to customize and play around with making blinky lights and sounds.
Here's the completed project. Or, follow along below to create your own project from scratch.
Go to makecode.adafruit.com then choose New Project. You'll see a workspace, some tabs, and an interactive model of a Circuit Playground Express which you can use for testing your code.
Click the LOOPS tblock and find the on start loop. Drag it out into your workspace. Anything that we put in this loop will happen just once, when the Circuit Playground first boots up.
Click the LIGHTS block and drag an instance of set brightness into your on start loop. This will set how bright your lights are. I chose something not too bright -- 40-60 is pretty good for indoor use.
Now let's set the volume. Click the MUSIC block and drag set volume into your on start loop after set brightness. I ended up setting my volume to 200. You can go back and adjust these values at any time.
Click the INPUT block. The Circuit Playground Express comes with lots of sensors and buttons and switches, so there are a lot of ways to trigger your lights and sounds. You can have it trigger when you click one of the onboard buttons, or when you make a loud sound. You can have it trigger when you shake the Circuit Playground or tilt it upside down. There are even capacitive touch switch pads along the edge, so you can have it trigger when someone touches the Circuit Playground. There are so many fun options!
Keeping it simple, I chose on button A click-- so whenever you click the button on the left, Stuff Will Happen.
First let's make a sound play when the button is pressed. Click the MUSIC block, and drag play sound into your on button A click loop. Choose the sound you like -- I like magic wand -- and then give it a try! Click the left button on the Circuit Playground image and see if your sound plays.
This is such a cool feature. You can test your code on this virtual Circuit Playground every step of the way, to get it exactly how you want.
Now we'll get to the meat of the project -- adding a light animation "spinner" that will spin for a while and then stop on a random light. We'll use the built-in Photon animation for this. We'll add some simple math to make it random, and also add some color changes, just for fun.
Go to LOOPS and drag an instance of repeat 4 times into your on button A click loop below the play sound instance. Then click the MATH block and grab an instance of pick random. Drag it onto your workspace and use it to replace the default 4 in the repeat loop.
This is telling the Circuit Playground Express that we want the lights to move around the circle a random number of times each time the button is pressed. I chose 20 as my low number and 100 as my high number. There are 10 lights on the Circuit Playground's face, so this way it will always spin around at least twice, and no more than 10 times.
Now we'll add the Photon light animation. Click the LIGHT block and scroll down to where the Photon section is. You've got a number of different blocks here. The way Photon works is similar to drawing a line of light with a pen. You can choose the color, then put your pen "down" and draw forward or backward for as long as you like. Then you lift your pen "up" again at the end to stop drawing.
This is a deceptively complex animation. There is a lot you can do with it when you start to incorporate variables and loops.
Drag an instance of photon forward by 1 onto your workspace inside your repeat loop. Now go click the button on the virtual Circuit Playground Express and see what happens.
It appears to be working, but the animation is going so fast that it doesn't look like a spinner. Let's slow it down a little bit.
Under LOOPS, drag an instance of pause 100 ms into your repeat loop. Try clicking the button now. Much better! But now it's a bit slow. Play with the pause value until you get a satisfying spin. I liked 50ms.
Pretty cool! Our spinner is working. But right now it's just one color. It would be a bit more fun if the color changed every time the button was pressed. For this we'll need a variable, basically an invisible container that holds the color value as it changes.
Click the VARIABLES block and make a new variable. We'll call it color.
Click back over to LIGHT and grab an instance of photon set pen hue. Drag it into your input loop. Then go back to VARIABLES and drag your new color variable into this block. Now we can use this variable to set and change the color of the lights.
In the VARIABLES block, drag an instance of change color by 1 onto the workspace and put it inside your repeat loop. Changing the color by just 1 step each time is a bit subtle, so I changed mine to 2. Try clicking your button again and see what happens! Change the values around until you find something you like.
You could also make this a random number (remember, that's under MATH). Customize it until you love it!
Plug your Circuit Playground Express into your computer using a USB cable. You will see a rainbow animation appear the first time it boots up. Click the tiny Reset button in the middle of the board and the lights will all turn red, then green. When the lights turn green, a new drive will appear on your computer called CPLAYBOOT.
In MakeCode, click the Download button to download your code to a file. Drag this file onto the CPLAYBOOT drive. The Circuit Playground Express will reboot and eject itself. Click the buttons. Now your code is working in the real world!
If you're having trouble, head over to the Circuit Playground Express tutorial for more troubleshooting ideas.
Text editor powered by tinymce.
Plug in your batteries and switch it on. Now it's time to create your game!
I've included a printable 10-space pie chart below, which you can print out and draw in your options. Choose where to have dinner, what to name your baby, pick your favorite Princess, choose a sports team to follow, or incorporate your new spinner into an already existing game. The sky's the limit!
Pass the battery cable from the back to the Circuit Playground Express on the front. Attach the battery pack on the back and the Circuit Playground Express on the front. It is suggested you use an adhesive method that allows you to remove them if necessary, like BluTack or double-sided tape.
Enjoy!
Text editor powered by tinymce.
