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
Some
unreal code
.