How would I do this every millisecond?

[The Terminator]

Hi there,

For a label that I'm creating on my main menu, I want it to animate over 3 colors in 9 seconds. The 3 color RGBA values are: (255, 255, 255, 50), (0, 161, 94, 50), (102, 0, 0, 50). To give it the "gradual" effect, I want it to increase or decrease the RGBA values of an sf::Color every millisecond. In order to get the value to increase or decrease per millisecond, I just found the difference of the respected values and divided it by 1000. Here's my (unworking) code that I've written:

(FYI: m_totalTime is a private float value in a class, m_animated_label_clock is a sf::Clock private member, and m_label_color is a sf::Color private member.)

if (m_totalTime <= 3)
        {
            if (m_animated_label_clock.getElapsedTime().asMilliseconds() == 0.001)
            {
                m_label_color.r -= 0.085;
                m_label_color.b -= 0.0313;
                m_label_color.g -= 0.0683;
            }
        }

        else if (m_totalTime > 3 && m_totalTime <= 6)
        {
            if (m_animated_label_clock.getElapsedTime().asMilliseconds() == 0.001)
            {
                m_label_color.r += 0.034;
                m_label_color.b -= 0.0536;
                m_label_color.g -= 0.0313;
            }
        }

        else if (m_totalTime > 6 && m_totalTime <= 9)
        {
            if (m_animated_label_clock.getElapsedTime().asMilliseconds() == 0.001)
            {
                m_label_color.r += 0.102;
                m_label_color.b -= 0.161;
                m_label_color.g -= 0.094;
            }
        }

        m_totalTime += m_animated_label_clock.getElapsedTime().asMilliseconds();
        m_animated_label_clock.restart();

Thanks for any and all help!

[G.]

asMilliseconds() returns an int, why do you compare it with 0.001?

If you want something done every millisecond but your elapsed time is x milliseconds, do your thing x times.
Or you could compute the color values to add or remove for x milliseconds. (you already computed it for 1 millisecond)
Or you could do proper interpolations between your colors.

[eigenbom]

There's a much simpler way to do that. Here's some code that gradually shifts from colour1 at 0 seconds, to colour2 at 3 seconds, to colour3 at 10 seconds;

Code: [Select]

// use vector2f's for our colours (0=min, 1=max)
sf::Vector2f c1, c2, c3;
sf::Clock clock;

// handy linear interpolation
sf::Vector2f lerp(sf::Vector2f a, sf::Vector2f b, float t){
  return a*(1-t) + b*t;
}

// main loop

const double seconds = clock.getElapsedTime.asSeconds();
sf::Vector2f c;
if (seconds <= 3){
  double t = seconds / 3; // t goes from 0 to 1
  c = lerp(c1, c2, t);
}
else if (seconds <= 10){
  double t = (seconds - 3) / (10-3);
  c = lerp(c2, c3, t);
}
else {
  // after 6 seconds stay as colour 3
  c = c3;
}

// transform c into an sf::Color which we can then use to draw something
sf::Color colour = sf::Color(255*c.x, 255*c.y, 255*c.z);



You can also replace the lerp with other easing functions, such as cubic, easeIn, quadratic, etc, to change how the colour shift behaves. See e.g., this page for other easing functions.

[The Terminator]

There's a much simpler way to do that. Here's some code that gradually shifts from colour1 at 0 seconds, to colour2 at 3 seconds, to colour3 at 10 seconds;

Code: [Select]

// use vector2f's for our colours (0=min, 1=max)
sf::Vector2f c1, c2, c3;
sf::Clock clock;

// handy linear interpolation
sf::Vector2f lerp(sf::Vector2f a, sf::Vector2f b, float t){
  return a*(1-t) + b*t;
}

// main loop

const double seconds = clock.getElapsedTime.asSeconds();
sf::Vector2f c;
if (seconds <= 3){
  double t = seconds / 3; // t goes from 0 to 1
  c = lerp(c1, c2, t);
}
else if (seconds <= 10){
  double t = (seconds - 3) / (10-3);
  c = lerp(c2, c3, t);
}
else {
  // after 6 seconds stay as colour 3
  c = c3;
}

// transform c into an sf::Color which we can then use to draw something
sf::Color colour = sf::Color(255*c.x, 255*c.y, 255*c.z);



You can also replace the lerp with other easing functions, such as cubic, easeIn, quadratic, etc, to change how the colour shift behaves. See e.g., this page for other easing functions.

Thanks for the info! On transforming c, you use c.z which is nonexistent in a sf::Vector2f. Did you mean to put sf::Vector3f?

Thanks

[eigenbom]

Oops, yep Vector3f.