Welcome, Guest. Please login or register. Did you miss your activation email?

Author Topic: How would I do this every millisecond?  (Read 4375 times)

0 Members and 1 Guest are viewing this topic.

The Terminator

  • Full Member
  • ***
  • Posts: 224
  • Windows and Mac C++ Developer
    • View Profile
How would I do this every millisecond?
« on: December 30, 2013, 03:49:52 am »
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!
Current Projects:
Technoport

G.

  • Hero Member
  • *****
  • Posts: 1590
    • View Profile
Re: How would I do this every millisecond?
« Reply #1 on: December 30, 2013, 04:20:04 am »
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

  • Full Member
  • ***
  • Posts: 228
    • View Profile
Re: How would I do this every millisecond?
« Reply #2 on: December 30, 2013, 04:50:51 am »
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

  • Full Member
  • ***
  • Posts: 224
  • Windows and Mac C++ Developer
    • View Profile
Re: How would I do this every millisecond?
« Reply #3 on: December 30, 2013, 05:50:24 am »
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
Current Projects:
Technoport

eigenbom

  • Full Member
  • ***
  • Posts: 228
    • View Profile
Re: How would I do this every millisecond?
« Reply #4 on: January 01, 2014, 09:09:28 am »
Oops, yep Vector3f. :)

 

anything