NeoPixie Dust Bag with Circuit Playground Express

2017-10-19 | By Adafruit Industries

License: See Original Project Wearables Arduino Photon

Courtesy of Adafruit

Guide by John Park

How can your fairy costume be complete without a glowing pixie dust bag?! It sparkles and blinks, and you can squeeze the touch sensor wire to change the colors on the beautifully twinkling NeoPixel ring! This fun, sophisticated-looking prop is easy to build with absolutely no soldering required.

NeoPixel Ring

This project updates and simplifies the classic GEMMA-based build by using the Circuit Playground Express -- what used to use multiple pieces of hardware is now built into a single board! Plus, all of the programming is done with the user-friendly graphical interface of MakeCode, so no need to type code or use the Arduino IDE if you don't want to.

Besides the Circuit Playground Express, you also need:

3 AAA battery pack with on/off switch, or
3.7V Lithium Ion battery with charger for a more compact build
short wire alligator clip test leads
translucent pixie dust bag
small plastic bag
flake salt, such as Morten's Kosher salt, used to as light diffusing "pixie dust"

Circuit Playground Express Additional Items Needed

Code It by John Park

Colors Change By Tapping the Capacitive Touch Sensor

Your NeoPixie dust bag must twinkle beautifully -- what better way to do that than set the LEDs to a solid color and then randomly sparkle some of them white? You'll also want to be able to change the colors by tapping the capacitive touch sensor.

You can program all of these effects without typing a line of code, simply by dragging and dropping elemental code blocks, you can create Circuit Playground Express software in no time, and even test it out with the virtual Circuit Playground Express simulator built into the page.

Be sure you've gone through the tutorial here on the basics of MakeCode for Circuit Playground Express to make sure you know the basics of creating and uploading your code.

Tutorial for Basics of MakeCode

Setup

You'll begin with a nice clean canvas -- nothing but a single, empty forever loop block. This is where all of the repeating command blocks will live, running over and over and over again.

Let's also add an on start block to set one parameter from the beginning -- this is a good place for any commands that need to run once each time the Circuit Playground Express is turned on or reset. Think of it as a sort of initialization block.

On Start Block

From the Light category, add a set brightness block to the on start block and set the value to something moderately bright, say 80.

Light Category Setting Brightness Block

On Start Set Brightness Forever

Animation

Next, you'll light up the NeoPixel ring using photon blocks.

Photon blocks act like a sort of pen that can move to any position on the NeoPixel ring (0-9) and light or color a NeoPixel when it is "down". It doesn't change the color of any NeoPixels when it is "up", just like a pen that is lifted off the paper.

From the Light category, grab a photon pen up block and place it into the forever loop. Then, change the dropdown to pen down.

Light Category Photon Pen Up

On Start Set Brightness Photon Pen Up

You'll want to light up and color your NeoPixels by moving the photon pen around while the pen is down, so add a photon forward by 1 block to the forever loop.

Photon Forward by 1

To create the organic, irregular sparkle pattern, you'll have the photon pen move a random number of positions (between 0-4), by adding a pick random 0 to 4 block to the photon forward by block.

Pick Random 0 to 4 Photon Forward by Block

Set Brightness Block

You'll do the same sort of trick to vary the brightness, using the set brightness block and another pick random block, with the value range set from 0 to 40

To slow things down just a touch, add in a slight pause with the pause (ms) block.

Pause (ms) Block

Here's what the animation now looks like -- go ahead and test it out!

Animation Look

Color Touch

By default the LEDs will light up red. Red is nice, but how about some other colors, too, when the mood strikes? You'll now add touch input that allows one of the capacitive touch pads of the Circuit Playground Express to switch the color values every time you tap it.

From the Input category, add an on button A click block.

Input Button A Click Block

Change the input to one of the pin pads, in this case pin A5. (Any of the seven pin A pads will work as capacitive touch pads.)

Pin A5

Change the input mode to down instead of click. This means the input condition is met the moment you touch the pad, not when you touch and release.

Input Mode Down Instead of Click

Add a set all pixels to red block from the light category to the on pin A5 down block.

Set All Pixels to Red

To make the ring flash white when the pad is touched, change the dropdown from red to white.

Ring Flash White When the Pad is Touched

Variable Color

To change the color of the photon in the forever block, we'll use a variable. This variable, called "pixieColor", will store a value that changes each time you touch the capacitive pad, and the value will be used by the photon set color block.

In the Variables category, click the Make a Variable button, then type the name pixieColor and click Ok.

Photon Set Color Block

Make a Variable Button Type pixieColor

Drag the change item by 1 block into the on pin A5 down block, and then change the dropdown to your pixieColor variable. So that the color change is more dramatic, set the change value to 50.

Change Item by 1 Block

Add a photon set color block to the forever loop, just under the photon pen down block.

Add a Photon Set Color Block to the Forever Loop

Instead of the default 0 value, drag an instance of the pixieColor variable block on to the photon set color.

Drag an Instance of the pixieColor Variable Block

pixieColor Variable Block onto the Photon Set Color

Simulate It

Test out the color change now by clicking the gold pad on the Circuit Playground Express simulator at pad A5. You'll see the color change each time you click it.

Test Out the Color Change by Clicking the Gold Pad

Pseudo ON/OFF

You may not always want your NeoPixie Dust Bag to sparkle, but it isn't convenient to unplug the battery all the time, so let's use the on-board slide switch to turn off the LEDs.

Grab an on switch moved left block from the Input category, then duplicate it and set the second one's dropdown to right.

On Switch Moved Left

Like you did before, create a new variable, this time naming it "ON/OFF".

Create a New Variable Naming it ON/OFF

Drag a set item to 0 block into each switch block, and then change their variable dropdown choices to ON/OFF. The left position will be ON, so set the value to 1, leaving the right position to 0.

Left Position ON, Set Value to 1, Right Position 0

Conditional If/Then/Else

So you now have a variable named ON/OFF that change depending on the slide switch position. But how do you actually use that to control the lights? The answer is with a conditional if then else block.

This block does two things: it tests if a certain condition is met, and then it executes the proper set of blocks depending on that answer.

In our case: if the variable ON/OFF is equal to 1, then play our animation blocks, else, set all the pixels to black.

From the Logic category, get an if then else block and place it in the forever loop. Then place all of the animation blocks inside the then section.

If/Then/Else Block

If Then Else Block and Placing it in the Forever Loop

To test our condition, we'll need to get a 0 = 0 block from the Logic category and place that at the end of the if statement.

Test Condition 0=0 Block from Logic Category

Place and ON/OFF Variable into the First Slot

Place an ON/OFF variable into the first slot, and change the second slot to 1. This means now that when the slide switch is to the left, the variable will be equal to 1 and the animation will play.

Set All Pixels to Block Inside the Else Section

Now, put a set all pixels to block inside the else section, and change the dropdown to black.

Upload it to the Circuit Playground Express

You finished programming your NeoPixie Dust Bag! Upload it to the Circuit Playground Express and then we'll move on to dressing it up with a battery, bag, and capacitive switch.

Finished Code

Here's what the finished code will look like -- feel free to try it out in the simulator (flip the slide switch, then click the A5 pad) and then download it to your Circuit Playground Express and give it a whirl!

Here is What the Finished Code Would Look Like

Copy Code

loops.forever(function () {
 
})

Build and Use It by John Park

Build and Use It

Touch Sensor

To make it easier to change colors when the Circuit Playground Express is in the bag, extend the Pin A5 sensor with a loop of wire. You can simply clip the alligator lead to the pad on both ends as seen here.

Clip the Alligator Lead to the Pad on Both Ends

Plug in your battery, make sure the slide switch is set to the left, and then squeeze the wire while holding the board in order to trip the sensor and change colors.

Plug in Battery, Make Sure the Slide Switch is Set

Bag in a Bag

You'll use the salt to diffuse the light and make the bag look like it's full of pixie dust. To keep the salt off of the electronics, place them inside the plastic bag, and then place all of that into the pixie dust bag.

Bag in a Bag

Place Plastic Bag into the Pixie Dust Bag

Fill Pixie Dust Bag with Salt

Now, fill the pixie dust bag with salt. Instant pixie dust!

Hold Bag with Wire Loop

You can hold the bag's wire loop and then squeeze the pixie dust to change the color! Your capacitance is measured by the on-board sensor, and it works best when you have a hand near the board and the other squeezing the wire.

Hold The Bag