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.
