# Neopixel fade one color to another and back.

Ok, Im friggen stumped. Any help is appreciated!
The goal: be able to pick two colors using R/G/B sliders on web page and fade from one to the other then back again.
The approach: find the distance between the R’s, the G’s, and the B’s as a float using this function:

``````float distance[3]; //global. rest of arrays are uint8_t's
void updateDistance() {
for (uint8_t i = 0; i < 3; i ++) {
if (custom1[i] > custom2[i]) { // R1 is greater than R2, so the distance is positive.
distance[i] = (custom1[i] - custom2[i]) / 255.00;
}
else if (custom2[i] > custom1[i]) { //R2 is greater, so the distance is negative
distance[i] = (custom2[i] - custom1[i]) / 255.00;
//distance[i] = distance[i] - (2 * distance[i]);
distance[i] = -distance[i];
}
else if (custom1[i] == custom2[i]) { //distance is zero.
distance[i] = 0;
}
}
}
``````

Then, each time thru the main loop, I execute the following function:
fadePos is incremented until it reaches 255, then decremented until it reaches 0. When incrementing, thisColor is incremented by the distance. When decrementing, nextColor is decremented by the distance. The idea here is that each time thru the loop, each RGB value gets one step closer to arriving at the destination all at the same time.
For example, color1 is 125,255,0. color2 is 255,0,100. R is increasing, G is decreasing, and B is increasing, all by a different amount. Then, on the way back to the first color, its reversed. I use thisColor = color1 as the starting location on the way up, then nextColor = color2 on the way down as a way to reset the start and destinations, so to speak.

``````void fade() {
Console.print(F("D: "));
for (uint8_t i = 0; i < 3; i ++) { //display the distances each color will be incremented per loop.
Console.print (distance[i]);
Console.print(F(" "));
}
Console.println();

if (fadePos == 0) { //start at color1[]
increasing = true;
for (uint8_t i = 0; i < 3; i ++) {
thisColor[i] = custom1[i];
}
}
for (uint8_t i = 0; i < 3; i ++) {
thisColor[i] = round(thisColor[i] + distance[i]);
}
for (uint8_t i = 0; i <= PIXEL_COUNT; i ++) {
strip.setPixelColor(i, (thisColor[0] * intensity) / 255 , (thisColor[1] * intensity) / 255, (thisColor[2] * intensity) / 255);
}
strip.show();
Console.print(F("RGB: "));
for (uint8_t i = 0; i < 3; i ++) {
Console.print(thisColor[i]);
Console.print(F("  "));
}
Console.println();
}

if (fadePos == 255) { //stop increasing fadePos and set nextColor[] to custom2[] and subtract distance from it.
increasing = false;
for (uint8_t i = 0; i < 3; i ++) {
nextColor[i] = custom2[i];
}
}

if (fadePos > 0 && !increasing) {
for (uint8_t i = 0; i < 3; i ++) {
nextColor[i] = round(nextColor[i] - distance[i]);
}
for (uint8_t i = 0; i <= PIXEL_COUNT; i ++) {
strip.setPixelColor(i, (nextColor[0] * intensity) / 255 , (nextColor[1] * intensity) / 255, (nextColor[2] * intensity) / 255);
}
strip.show();

Console.print(F("RGB: "));
for (uint8_t i = 0; i < 3; i ++) {
Console.print(nextColor[i]);
Console.print(F("  "));
}
Console.println();
}
Console.println("");
}
``````

The problem: the colors roll over from 255 to 0 or vice versa. It seems to work between 255/0/0 to 0/0/255 but any values in between 1.00 steps per fade() cause rollovers.

fade() is called once per loop().
Id include the whole sketch, but there is a lot of other stuff going on that is not executed while fade() is selected. Web commands and other patterns from Adafruit.

``````      strip.setPixelColor(i, (thisColor[0] * intensity) / 255 , (thisColor[1] * intensity) / 255, (thisColor[2] * intensity) / 255);
``````

What sort of value is in "intensity" ?

An alternate and perhaps easier to understand way of doing things might be to do all you brightness/intensity calculations in some arbitrary scale (0..1 ?) and then map to the 0..255 values just before the setPixelColor() calls.

Ok thanks, Ill look into that. Intensity is a uint8_t as well.