Nicer Animation

• Liner Interpolation
  • When you want to move between two values, α and β.
  • Use a straight line to connect them.
  • f(t) = α(1-t) + βt
  • 0 ≤ t ≤ 1
• Notice what happens here
  • When t = 0
    • 0β = 0
    • α (1-0) = α
  • When t = 1
    • 1β = β
    • α (1-1) = 0;
  • When t = 0.5
    • 0.5β = .5β
    • α (1-.5) = .5α
  • When t = 0.25
    • 0.25β. = .25β
    • α (1-.25) = .75α
  • In some sense, we are computing a weighted average of the two end points.
• So I want my guy to "run" to a click position.
  • But he only gets a fixed amount of time.
  • Assume he is at $(x_0, y_0)$ and needs to move to $(x_1, y_1)$.
  • How can I do this nicely?
  • I could calculate dx and dy
    • divide each by the number of steps I wish to take.
    • Then loop adding to the current position.
  • But if I let dt = 1/steps
  • And let t run from 0 to 1

  • for(t = 0; t < 1; t += dt) {
       x = LERP(x0, x1, t);
       y = LERP(y0, y1, t);
       Plot(x,y);
    } 

• Some notes on the example
  • Notice I >clamp the values of t between 0 and 1.
    • t = Max(0, Min(t, 1))
    • glsl has a clamp function.
    • There are many times we want to keep a value in a range.
  • I am essentially using a simple state machine.
    • Each state represents a "condition".
    • I change from a state based on an input or event.
      • In this case, state 0 represents at rest.
        • While in this state I do nothing.
        • I exit this state on a click.
      • State 1 represents moving.
        • While in this state I continue moving.
        • I exit this state when the movement is complete.
• Just for fun, I added a color change too.
  • He starts off blue when he is far from his destination.
  • He changes to a nice shade of green when he reaches his destination.
  • This would be tough in RGB, but not bad in HSV/HSL