Misc. Topics

Interpolation

Coordinate systems

In the Cartesian coordinate system, a vector $P$ in the plane is represented by two numbers $a$ and $b$, $$P=\begin{pmatrix}a \\ b\end{pmatrix}$$ The vector is obtained by moving from the origin a distance $a$ in the positive $x$ direction and then a distance $b$ in the positive $y$ direction. In other words, $$P = a\cdot \begin{pmatrix}1\\0\end{pmatrix}+b \cdot \begin{pmatrix}0\\1\end{pmatrix}.$$

In the polar coordinate system, a vector is represented by its distance $r$ from the origin and the angle $\theta$ it makes with the positive $x$-axis. We write $$P=r\angle \theta\mbox{ or } P=r\cdot e^{i\theta}$$ for the corresponding vector. Note here that $r$ is a non-negative number and that $$r\angle \theta = r\angle (\theta\pm 2\cdot \pi).$$

We can convert between these two coordinate systems as follows: Given a vector in Cartesian coordinates $\begin{pmatrix}x\\y\end{pmatrix}$, then $$r=\sqrt{x^2+y^2}.$$ Some care is needed when computing the angle, for instance we can do $$\theta=arccos(\frac{y}{r})$$ when $x\geq 0$ and $$\theta=\pi-arccos(\frac{y}{r})$$ when $x < 0$. In C++ we have the option of using

angle = atan2(y,x)

without worrying about which quadrant the angle is in.

Given a vector in polar coordinates, then $$x=r\cdot cos(\theta)\mbox{ and }y=r\cdot sin(\theta).$$

There are many well known and useful coordinate systems, and you can also create your own. For instance, in three dimensions we have the cylindrical and spherical coordinate systems, which we will not discus here.

Parametric equations

We can describe curves using both implicit and parametric equations, and both can be used to draw curves or shapes on a computer. For instance, the implicit equation describing a circle is $$(x-a)^2+(y-b)^2=r^2$$ where $(a,b)$ is the center of the circle and $r$ is the radius. A parametric equation for the circle can for instance be $$(x,y)=(a+r\cdot cos(2\cdot \pi \cdot t), b+r\cdot sin(2\cdot \pi \cdot t))$$ where the parameter $t$ is any number in the interval $[0,1]$.

In general, a curve can be described by a function $$P(t):\mathbb{R}\rightarrow \mathbb{R}^2.$$ In practise, the domain of $P(t)$ is usually an interval, e.g. $[0,1]$. The curve $C$ is the collection of all points in the image of $P(t)$, $$C=\{P(t)|t\in \mathbb{R}\}.$$ Sometimes $P(t)$ is thought of as the position of an object at a given time $t$. The parametric equation is then a description of the motion of the object depending on time.

Note that for instance $$\begin{pmatrix}t^3\\t^3\end{pmatrix}\mbox{ and } \begin{pmatrix}t\\t\end{pmatrix}$$ describes the same curve, but the motion they describe is different.

Interpolation

We wil now discuss how to make a smooth changes between two states. This is called interpolation. You can interpolate many different things, for instance

• position, velocity
• rotation
• animation states
• colour
• shape
• ...

Mathematically, what we interpolate between are points, vectors, matrices, or something similar. We can also interpolate between interpolations.

Linear interpolation (LERP)

Given two points $P_0$ and $P_1$ in space. The linear interpolation (LERP) between these two points is $$B_1(P_0,P_1,t)=(1-t)\cdot P_0 + t\cdot P_1$$ At $t=0$ this expression evaluates to $P_0$ and at $t=1$ it evaluates to $P_1$. At intermediate values for $t$ we are somewhere between these two points. At $t=0.5$ we are at the midpoint.

We can think of $B_1$ as moving on a straight line from $P_0$ to $P_1$ in one unit of time (for instance one second). We refer to $P_0$ and $P_1$ as control points of the motion.

The corresponding curve is the line segment between $P_0$ and $P_1$.

Consider the function $$f(t)=t.$$ It has the following important three properties

1. $f(0)=0$
2. $f(1)=1$
3. $0\leq f(t) \leq 1$ for $0\leq t\leq 1$

Any function with these three properties can be used for interpolating between $P_0$ and $P_1$, $$I(t)=P_0\cdot (1-f(t))+P_1\cdot f(t).$$ For example,

• $f(t)=t^2$ or $f(t)=\sqrt{t}$
• $f(t)=sin^t(\frac{\pi}{2}\cdot t)$
• $f(t)=\frac{1}{2}(sin(\pi\cdot t - \frac{\pi}{2})+1)$

A well known class of examples are the smoothstep functions

• $s_1(t)=t$
• $s_3(t)=3t^2-2t^3$
• $s_5(t)=6t^5-15t^4+10t^3$
• ...

one $s_n$ for each odd order $n$. These functions have the additional property that the $i$'th order derivative is zero at $t=0$ and $t=1$, for $i=1,\cdots, n-1$. These functions can be extended to any value of $t$, by $s_n(t)=0$ for $t\leq 0$ and $s_n(t)=1$ for $t\geq 1$. In that case, these are examples of what is called sigmoid functions. We will not discuss sigmoid functions further in this course.

Note that instead of translating the mathematical expression $$s_5(t)=6t^5-15t^4+10t^3$$ directly to code, we have the improved implementation

float smoothStep(float t) {
    return t*t*t*(t*(t*16-15)+10);
}

This type of rewrite is common when evaluating polynomial expressions. You can learn more by looking up Horners method for polynomial evaluation.

Quadratic and Cubic Bezier Curves

The quadratic Bezier curve on three points is given by $$B_2(P_0,P_1,P_2,t) = (1-t)B_1(P_0,P_1,t) + tB_1(P_1,P_2,t)$$ In other words, the quadratic Bezier curve is a smooth change between two linear interpolations. At times close to $0$, we are moving like the interpolation $B_1(P_0,P_1,t)$, and then for values of $t$ close to $1$ we are moving like the interpolation $B_1(P_1,P_2,t)$. If we expand the formula we have $$B_2(P_0,P_1,P_2,t)=(1-t)^2P_0+2(t-1)tP_1+t^2P_2$$ The expression is quadratic in $t$, and so we call this the quadratic Bezier curve.

A cubic Bezier curve is given by $$B_3(P_0,P_1,P_2,P_3,t)=(1-t)B_2(P_0,P_1,P_2,t)+tB_2(P_1,P_2,P_3,t)$$ or $$B_3(P_0,P_1,P_2,P_3,t)=(1-t)^3P_0 + 3(1-t)^2tP_1 + 3(1-t)t^2P_2 + t^3P_3$$ The recursive definition shows that a cubic Bezier curve is a smoothing between two quadratic Bezier curves.

There are Bezier curves of any order (quartic, quintic, ...), but cubic seems to be sufficiently smooth for most applications.

Spherical linear interpolation (SLERP)

Let $u$ and $v$ be two vectors. We want to interpolate between the vectors along an arc. In particular, if the lengths of $u$ and $v$ are equal, the interpolation should be a long a circular arc with each intermediate vector of the same length as $u$ and $v$.

First find the angle between the two vectors $$\Omega = acos(\frac{u\cdot v}{|u|\cdot |v|}).$$ The spherical linear interpolation (SLERP) is $$P(t)=\frac{sin(\Omega (1-t))}{sin(\Omega)}\cdot u + \frac{sin(\Omega t)}{sin(\Omega)}\cdot v.$$ We need $0<\Omega<\pi$ for the formula to be valid.