← All posts

Math / Interpolation Methods

Interpolation is a type of estimation method for finding new data points based on the range of a discrete set of known data points.

The most basic kind of interpolation is Linear Interpolation (Lerp), it transitions from one value to another at a constant rate. Defined by:

$$\text{lerp}(a,b,t)=a(1-t)+bt$$

It’s implementation in Rust should look like this:

fn lerp(a: f32, b: f32, t: f32) -> f32 {
    return a * (1.0 - t) + b * t;
}

The interpolated points between two points A and B should form a straight line, and if we animate the object along the line, it should look like this:

Cosine Interpolation is the interpolation method that can generate a smooth acceleration and deceleration between the two data points, can be defined by:

$$\text{cosine}(a,b,t)=\text{lerp}(a,b,\frac{1-\cos (\pi t)}{2})$$

Implemented in Rust:

fn cosine(a: f32, b: f32, t: f32) -> f32 {
    let t2 = (1.0 - (t * PI).cos()) / 2.0;
    return lerp(a, b, t2);
}

The acceleration should happen from the beginning of the line, and slow down at the end of the line:

If we want to control the acceleration on just one end of the line, we can use different formulas:

$$\text{acceleration}(a,b,t)=\text{lerp}(a,b,t^2)$$

Implemented in Rust:

fn acceleration(a: f32, b: f32, t: f32) -> f32 {
    let t2 = t * t;
    return lerp(a, b, t2);
}

Here’s how it look when animated:

Or deceleration at the end of the line:

$$\text{deceleration}(a,b,t)=\text{lerp}(a,b,1-(1-t{)}^2)$$

Implemented in Rust:

fn deceleration(a: f32, b: f32, t: f32) -> f32 {
    let t2 = 1.0 - (1.0 - t) * (1.0 - t);
    return lerp(a, b, t2);
}

Animated result:

Above are just some common interpolation methods, for more, please check http://paulbourke.net/miscellaneous/interpolation/^◹

Aside from animation, we can use interpolation functions to generate color, or dynamically generate font size on the web page, create a dynamic layout,… See more details about web-related techniques with interpolation at https://www.smashingmagazine.com/2017/05/fluid-responsive-typography-css-poly-fluid-sizing/^◹

---

Demo source can be found here: https://github.com/huytd/interpolation-demo^◹

---