Basic NeoPixel Animation

All NeoPixel animation comes down to simply turning on and off the pixels and/or changing their color. That's it. Everything is done by playing with three basic things:

  • Location - What pixel(s) to turn on/off?
  • Color - What color to use?
  • Time - How long to stay on/off?

Figuring out the code for complex animations can be tricky. In that case, taking an approach as described in the NeoAnim guide can help.

However, for our bike light, we will keep things simple and just use a basic loop. By changing various parameters within the loop, we can create some fun animations that will make for a cool bike light.

For example, here's a basic spinner animation.

///////////////////////////////////////////////////////////////////////////////
// Circuit Playground Bike Light - Round N Round
//
// Author: Carter Nelson
// MIT License (https://opensource.org/licenses/MIT)

#include <Adafruit_CircuitPlayground.h>

#define COLOR         0xFF0000    // change this to your favorite color
#define RATE          100         // lower is faster

///////////////////////////////////////////////////////////////////////////////
void setup(  // Turn one on using (r,g,b) values
) {
  CircuitPlayground.begin();
  
  // Make it bright!
  CircuitPlayground.setBrightness(255);
}


///////////////////////////////////////////////////////////////////////////////
void loop() {
  // The animation loop
  for (int pixel=0; pixel<10; pixel++) {
    // Turn OFF all pixels
    CircuitPlayground.clearPixels();
    
    // Turn ON the current pixel to COLOR
    CircuitPlayground.setPixelColor(pixel, COLOR);
    
    // Don't spin too fast
    delay(RATE);
  }
}

Our location parameter of the animation is controlled by the pixel value in the loop.

  for (int pixel=0; pixel<10; pixel++) {
    // animation stuff goes here
  }

Both the color parameter (COLOR) and time parameter (RATE) of the animation are set by global values at the top of the sketch.

#define COLOR         0xFF0000    // change this to your favorite color
#define RATE          100         // lower is faster

Play around with changing the values for COLOR and RATE and see what happens. You can use the color picker to come up with the color values.

More 'complex' animations can be created by doing things like having more than one loop, changing more than one pixel at a time, using more than one color, etc. What follows are several examples to illustrate this. After playing with them and looking through them, try and come up with your own animation.

Last updated on 2017-06-01 at 08.40.52 PM Published on 2017-04-24 at 10.03.14 PM