Moving Along An Arclength-Parameterized Path By Altering Rate of t's Change

Question

This is a problem that originally stems from code I'm working on, but I've tried to de-computer it as much as possible.

I've got a Bezier curve represented by 4 points: $P_0$ is the start point, $P_1$ is $P_0$'s tangent handle, $P_2$ is $P_3$'s tangent handle, $P_3$ is the end point. I get a particle's position along the path at $0 ≤ t ≤ 1$ through the formula:

$X = (1-t)^3X_{P0} + 3(1 - t)^2tX_{P1} + 3(1-t)t^2X_{P2}+t^3X_{P3}$

$Y = (1-t)^3Y_{P0} + 3(1 - t)^2tY_{P1} + 3(1-t)t^2Y_{P2}+t^3Y_{P3}$

---

There are a couple other variables to consider here:

• timeInterval is the amount of time between updates of $t$'s value.

• time is the current time since the particle began moving.

• timeToFinish is when in time the movement of the particle will be finished (i.e. when $t = 1$, time $=$ timeToFinish).

Using these principles, it's quite straightforward to move the particle linearly along this path. Every timeInterval seconds I simply say:

time $=$ time $+$ timeInterval

$t$ = $t +$(timeInterval$/$timeToFinish)

---

This works perfectly fine for linear movement; time is moved along at fixed intervals, and so is $t$, and after $t$ has been incremented timeToFinish$/$timeInterval times it will be equal to $1$.

Now, however, say I want to move the particle along the path in non-linear fashion, for example, decelerate sinuisoidally over a period of $0$ to $\frac{\pi}{2}$. The most intuitive way to do this would be to increment $t$ non-uniformly; rather than a fixed increase every time interval, an increase which is a function of a sinusoidal graph. I'm having a very hard time wrapping my head around how I would actually do this, however, or even finding information on this topic, and would appreciate any input.

Answer 1

The short answer is that you should use function composition to do reparameterization.

So, you invent some new independent parameter, say $u$, and a function $f$ that gives $t$ as a function of $u$. Then, instead of making equal steps in $t$, you make equal steps in $u$. Then, at each step, you take the current $u$ value, compute $t=f(u)$, and then use this $t$ value in the equation of your Bezier curve.

To work properly, the function $f$ needs to have certain properties. The most important are

1. $f(0) = 0$. So that $u=0$ gives $t=0$, and puts you at the start of the curve.
2. $f(1) = 1$. For similar reasons.
3. $f$ should be monotone increasing. If it's not, the point will double back on itself as it moves along the curve.

Some examples of a suitable $f$ functions are:

• $t=f(u) = u^2$
• $t=f(u) = 3u^2 - 2u^3$
• $t=f(u) = \sin(\tfrac12 \pi u)$

In the animation world, these functions are called "easing" or "tweening" functions. If you look up those terms, you'll find lots of examples.

From a mathematical point of view, we're using the composition of the function $f$ with the functions describing the Bezier curve. Since $t=f(u)$, we have $$ \mathbf{X}(u) = (1-f(u))^3\mathbf{P}_0 + 3(1 - f(u))^2f(u)\mathbf{P}_1 + 3(1-f(u)(f(u))^2\mathbf{P}_2 + (f(u))^3\mathbf{P}_3 $$ If $f$ is a polynomial, the resulting curve will again be a Bezier curve, but it won't be of degree 3 any more.