Fading Rectangle Color on Hover in SDL2

Creating a gradual fade effect instead of an instant color change requires managing the transition over time. The current code jumps directly between Color and HoverColor based on the isPointerHovering state. Fading involves calculating intermediate colors between these two states.

Core Concept: Interpolation

The key technique is linear interpolation (often shortened to "lerp"). Lerping allows you to find a value partway between a starting value and an ending value, based on a progress factor (usually a float t ranging from 0.0 to 1.0).

The formula for lerp is: interpolatedValue = startValue + (endValue - startValue) * t

• If t is 0.0, the result is startValue.
• If t is 1.0, the result is endValue.
• If t is 0.5, the result is halfway between startValue and endValue.

We need to apply this formula to each color channel (Red, Green, Blue) independently.

Implementing the Fade

Add State for Fade Progress: The Rectangle class needs a member variable to track the current progress of the fade, typically a float. Let's call it hoverFadeProgress, ranging from 0.0 (fully normal color) to 1.0 (fully hover color).

1// Rectangle.h
2// ...
3private:
4  // ... existing members ...
5  SDL_Color Color{255, 0, 0};
6  SDL_Color HoverColor{0, 0, 255};
7  bool isPointerHovering{false};
8  float hoverFadeProgress{0.0f}; // Add this

Add an Update() Method: The fade needs to progress over time. This typically happens in an Update() method that gets called each frame, often receiving the time elapsed since the last frame (deltaTime) for smooth, frame-rate-independent animation.

1// Rectangle.h
2// ...
3public:
4  // ... existing methods ...
5  void Update(float deltaTime) {
6    const float fadeSpeed{4.0f}; // Adjust speed as needed
7
8    if (isPointerHovering) {
9      // Fade towards hover color (increase progress)
10      hoverFadeProgress += fadeSpeed * deltaTime;
11      if (hoverFadeProgress > 1.0f) {
12         hoverFadeProgress = 1.0f;
13      }
14    } else {
15      // Fade towards normal color (decrease progress)
16      hoverFadeProgress -= fadeSpeed * deltaTime;
17      if (hoverFadeProgress < 0.0f) {
18        hoverFadeProgress = 0.0f;
19      }
20    }
21  }
22// ...

You would need to call Rect.Update(deltaTime) in your main loop, which requires calculating deltaTime (a more advanced topic involving timing).

We cover Update() methods (sometimes also called Tick() methods) and timing in detail later in the course.

Modify Render() to Interpolate: Instead of instantly choosing Color or HoverColor, the Render() function now calculates the intermediate color based on hoverFadeProgress.

1// Rectangle.h
2// ...
3
4// Helper function for lerping unsigned chars (like color channels)
5Uint8 LerpColorChannel(Uint8 start, Uint8 end, float t) {
6  // Perform calculation in float, then cast back
7  return static_cast<Uint8>(
8    static_cast<float>(start) +
9    (static_cast<float>(end) - static_cast<float>(start)) * t
10  );
11}
12
13void Render(SDL_Surface* Surface) const {
14  // Interpolate each channel based on progress
15  Uint8 r = LerpColorChannel(
16    Color.r, HoverColor.r, hoverFadeProgress);
17  Uint8 g = LerpColorChannel(
18    Color.g, HoverColor.g, hoverFadeProgress);
19  Uint8 b = LerpColorChannel(
20    Color.b, HoverColor.b, hoverFadeProgress);
21
22  // Use the interpolated color
23  SDL_FillRect(
24    Surface, &Rect,
25    SDL_MapRGB(Surface->format, r, g, b)
26  );
27}
28// ...

Considerations

• Timing (deltaTime): Implementing a smooth, frame-rate-independent fade requires calculating the time elapsed between frames (deltaTime). This involves using SDL timing functions like SDL_GetTicks() or SDL_GetPerformanceCounter().
• Complexity: As you can see, adding smooth fading significantly increases the complexity compared to an instant switch. It requires managing state (hoverFadeProgress) and adding time-based update logic.
• Easing Functions: For more visually appealing transitions than simple linear interpolation, you can explore "easing functions" which modify the hoverFadeProgress value non-linearly (e.g., ease-in, ease-out).

While this provides the structure, a fully working implementation requires integrating the Update() call and deltaTime calculation into your main loop.