Don't do this with your eyes, but let's look inside a NeoPixel to see what's going on. Here's a nice macro photo of a single NeoPixel.
There are three tiny little LEDs in there. A blue one, a red one, and a green one. Each one is controlled by the circuit next to them which acts like a brain. This is what receives the NeoPixel commands and does the actual turning on of the LEDs.
The Circuit Playground has 10 of these NeoPixels arranged in a circular pattern as shown below. All we need to do is write programs to tell them what colors we want.
So we can use the red, green, and blue LEDs in each NeoPixel to generate various colors. We just specify a color and the NeoPixel will take care of turning on the three LEDs in the right amount to generate that color.
Library Reference
There are two main functions in the Circuit Playground library for use with NeoPixels, clearPixels() and setPixelColor(). The first one simply turns off all of the NeoPixels. The second one is more fun, as it is how we turn on NeoPixels and specify a color. You can use it with either the rgb color values or the hex value to specify a color. Check out the library reference here and here and the example sketch that comes with the library:
File -> Examples -> Adafruit Circuit Playground -> Hello_CircuitPlayground -> Hello_NeoPixels
Here's a simple program that turns on all the NeoPixels to the specified COLOR. You can use this to play around with various color values.
///////////////////////////////////////////////////////////////////////////////
// Circuit Playground Bike Light - Color Demo
//
// Author: Carter Nelson
// MIT License (https://opensource.org/licenses/MIT)
#include <Adafruit_CircuitPlayground.h>
#define COLOR 0x31b784
///////////////////////////////////////////////////////////////////////////////
void setup( // Turn one on using (r,g,b) values
) {
CircuitPlayground.begin();
// Set all NeoPixels to COLOR
for (int pixel=0; pixel<10; pixel++) {
CircuitPlayground.setPixelColor(pixel, COLOR);
}
}
///////////////////////////////////////////////////////////////////////////////
void loop() {
// do nothing
}
Use the color picker from the previous selection and find a color you like. Then take the hex value shown and modify the following line of code. Note that the Google color picker has a # in front of the value. Be sure to change that to 0x in the code as shown:
#define COLOR 0x31b784
Here's what I got when I tried out that value.
They kind of look the same. A computer monitor and a NeoPixel are pretty different, so it's not going to be an exact match. But at least it's not red or orange or something.
Turning Off a Single NeoPixel
There's only one command for turning off the NeoPixels, clearPixels(), and it turns them all off. But what if you wanted to turn just one NeoPixel off. The answer is pretty simple. 'Off' is just no color, or the equivalent for 'black'. So we use the setPixelColor() command on the pixel we want and specify the values of 0x000000 or (0, 0, 0). For example, here's how to turn off NeoPixel 6:
CircuitPlayground.setPixelColor(6, 0x000000);
Setting Brightness
The one other useful NeoPixel function is setBrightness(). It can take a value from 0 to 255, with higher numbers being brighter. You typically call this just once at the beginning of your code, in the setup() function, to set the overall brightness for all NeoPixels. It can not be used to change the brightness of a single NeoPixel.
