Smooth all color change transition with fastled?

I'm using an esp8266 with a web interface to control my ws2812b panel.

The esp will obtain the client's color value and update the whole panel's color.

However, the transition is rough and blocky.

Is there any way I can make it more pleasant/smooth?

edit: I'm using fastled

You can smoothly transition from one colour to the other if you fade each separate component RGB to the new RGB.

Have your code work out the biggest component that needs changing, that will gave a change value of 1.0, Then the other components will have smaller change values less than one.

Set up a loop that will change the values by there increments. Convert these accumulated values from float to byte before you apply the new colour values. The delay in your loop to do this will determine the speed of the fade.

1 Like

that's a great idea but I don't know how to achieve it or find any example :frowning:

You build it up one step at a time, testing as you go.
Or you look and see in the fast LED documentation to see if they have an example of fading from one colour to another.

1 Like

You can use the map() function for the red, green and blue levels. For example if you wanted to make the transition happen in 100 steps:

red = map(step, 0, 99, redInitial, redFinal);
green = map(step, 0, 99, greenInitial, greenFinal);
blue = map(step, 0, 99, blueInitial, blueFinal);
2 Likes
 EVERY_N_MILLISECONDS(blendRate)
   {
     static uint8_t k; // the amount to blend [0-255]
     if (colorCurrent.h == colorTarget.h)
     { // Check if target has been reached
       colorStart = colorCurrent;
       // colorTarget = CHSV(random8(), 255, 255); // new target to transition toward
       k = 0; // reset k value
       show = false;
     }

     colorCurrent = blend(colorStart, colorTarget, k, SHORTEST_HUES);
     fill_solid(leds, NUM_LEDS, colorCurrent);
     k++;
   }

I'm currently using this code to change one color into another but I don't know if this right

sorry for asking this dumb question, I'm kinda new to these Arduino stuff but is this the right way to use the code

void loop()
{
  colorCurrent.r = map(100, 0, 99, colorStart.r, colorTarget.r);
  colorCurrent.g = map(100, 0, 99, colorStart.g, colorTarget.g);
  colorCurrent.b = map(100, 0, 99, colorStart.b, colorTarget.b);
  fill_solid(leds, NUM_LEDS, CRGB(colorCurrent.r, colorCurrent.g, colorCurrent.b));
  FastLED.show(); // update the display
}```

That first parameter, shown as 100 in your code above, should be a variable which changes from 0 to 99 as the colour changes from the previous to the new colour.

I was not aware of that blend() function, maybe that effectively does what I am suggesting, but in an easier or more flexible way.

I'm searching around in that direction based on @PaulRB's code, and I finally found this piece of code that works like a charm.

Simply put, it calculates steps to reach the TargetColor by comparing the differences between two colors (StartColor, TargetColor).

Put it within a loop and everything work great

// Helper function that blends one uint8_t toward another by a given amount
void nblendU8TowardU8(uint8_t &current, const uint8_t target)
{
  if (current == target)
  {
    return;
  }

  if (current < target)
  {
    uint8_t delta = target - current;
    delta = scale8_video(delta, 22);
    current += delta;
  }
  else
  {
    uint8_t delta = current - target;
    delta = scale8_video(delta, 22);
    current -= delta;
  }
}
void loop()
{
  if (show)
  {
    EVERY_N_MILLISECONDS(fadeRate)
    {
      if (currentColor == targetColor)
      {
        currentColor = targetColor;
        show = false; // stop fading
      }
      nblendU8TowardU8(currentColor.r, targetColor.r);
      nblendU8TowardU8(currentColor.g, targetColor.g);
      nblendU8TowardU8(currentColor.b, targetColor.b);
      currentColor = CRGB(currentColor.r, currentColor.g, currentColor.b);

      fill_solid(leds, NUM_LEDS, currentColor);
    }
  }
  FastLED.show();
}

Source:

Note this solution uses HSV colour space to do the transition. You get a different set of intermediate colours if you use another colour space like RGB space.

Colour Space

This is what you get using RGB colour space

And this is what you get with the same start and end colours using HSV colour space.

From some code I wrote on the Raspberry Pi.

1 Like

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.