Lighting up NeoPixels on the Circuit Playground is fun and easy. But creating animation patterns with specific color, timing, and position can be difficult. Not any more! Using this technique and a small Python script, you can use a tiny bitmap image as a powerful control for making complex NeoPixel animations on your Circuit Playground.

Developed by our own Phil Burgess, this method has a lot in common with traditional hand-drawn animation timing charts and exposure sheets (also called dope sheets) in that a set of rows and columns are used to indicate an object's attributes over time.

In this example of animating a ball bounce in Maya, note the dope sheet interface where the translation, rotation, and scale values of the ball are the attributes being indicated on the vertical chart axis, and the time in frames are the horizontal axis. This is very similar to our bitmap-to-NeoPixel animaiton system. 

 In this case, rows indicate each of the ten NeoPixels of the Circuit Playground, and columns represent frames of animation in time. The color of a particular cell in the grid represents what color to display that NeoPixel at that frame in time.

Here's an example: This is a one second loop of animation divided into 24 frames per second (24 FPS) which is the standard for traditional film and animation. In the image above, the ten NeoPixels (numbered 0-9) will each be lit green for one frame of time until NeoPixel 9 is lit, which then stays lit for the rest of the animation loop.

Here's what happens when the pixels are changed to red.

Now, let's combine two sets of pixel motion together.

We can also use things like gradients in Photoshop or other image editing software to create gentle fades or color transformations. Here's a one second fade up to blue and back.

Take a look at a rotated gradient bar. Notice how it doesn't loop smoothly, or hook-up properly in animation terms.

Here's one way to fix that, by blending the tail back to the head in the bitmap.

This fixes the hookup, but it's very fast. We can make a wider input bitmap to give us more frames of animation. This one is now 48 pixels wide, which translates to two seconds at 24FPS.

For a continuous sweep, we'll need to be more careful with the transitions and only "travel" the graphic in one direction.

Noise can also be effective for creating sparkling, blinking animation. Here's a short 12 frame cycle.

Wider input bitmaps give you more time to play with animation patterns.

We can also use acceleration curves, such as this example. Each "drop" is shorter in number of frames than the last as the lights accumulate on the opposite side of the starting point.

Next we'll take a look at how to set up the Circuit Playground and convert bitmaps to animation header files.