An easy way for non-coders or beginner coders to get up and running with NeoPixels and Circuit Playground is by using Microsoft's MakeCode editor. You can drag and drop blocks of code and experiment with colors and brightness until you get the look you want. It's also easy to tap into the Circuit Playground's onboard sensors to code animations that trigger when you shake or tilt the staff -- essential for an interactive cosplay prop.

Head to to get started.

My code starts the staff with a "power-up" animation, lighting the staff in a gradient that starts from the bottom and accelerates until the crystal at the top is lit. The crystal then stays lit with a purple flame-like flicker.

I've added a mode that makes a bright lightning effect when the staff is shaken or tapped hard on the ground, and another mode that plays a pretty rainbow animation when the staff is tilted sideways. It's easy to customize the modes and triggers so your staff behaves the way you want.

Click the button below to access the code, and customize it to your heart's content.

On Start Block

The on start block is where you set up your pixels. Anything in this block will happen once, when the Circuit Playground Express is first powered on. Since we soldered our connector to A1, we'll tell the Circuit Playground to set up a strip on A1 with 90 pixels (you can change this to reflect the number you actually have).  You can also set your preferred brightness here.  Note that set strip brightness will refer to the NeoPixels in the handle of the staff, and set brightness will refer to the NeoPixels on the face of the Circuit Playground Express.


Functions are a way of storing a chunk of code so you can refer to it when the Circuit Playground's inputs are triggered. Functions are a bit like the chorus of a song - you can write something that repeats again and again without having to re-code it every time. I've created two functions called powerUp and gemFlicker

ThepowerUp function causes the lights in the staff to accelerate up the handle using a pretty color gradient. You can mess around with the variables to change the speed and color. The acceleration is accomplished using a delay variable that changes a little bit each time, starting with 150ms and decreasing by 5ms with each pixel that comes on. 

The gemFlicker function causes the lights in the crystal to flicker randomly between my chosen colors, for an intricate candle-flame type effect. You can change the hue pick random 100 to 240 values to change your color palette. I'm varying both the hue (color), the value (intensity) and the brightness of the pixels randomly. This effect makes me very happy.

Forever Block

Whatever you put in this block will run over and over, forever. Since I want my crystal to be constantly flickering (unless another effect is being triggered), I put my gemFlicker function into the forever loop to keep the crystal going constantly.

On Tilt Left Block

When I tilt the staff to the left, this code will run a rainbow animation for about 8 seconds, then repeat the powerUp function to restore the staff to "normal" mode. There are lots of different triggers under the INPUT tab -- play with them to pick the ones that suit your character.

On Shake Block

When I shake the staff (or pound it gently on the ground), this block will trigger some code that makes the staff go a bit crazy. It's running both a rainbow animation and a twinkle animation at the same time, and it looks like a whirling rainbow thunderstorm. This mode makes me wish I'd added sound effects! Instead I have to just make a crashy thunder sound with my mouth whenever I trigger this mode.  Pchhewewwwww!!

This guide was first published on Sep 15, 2019. It was last updated on Mar 08, 2024.

This page (Code with MakeCode) was last updated on Mar 08, 2024.

Text editor powered by tinymce.