<blockquote>
<p>However, Hermite interpolation it links to is different from Cubic Hermite spline interpolation; they're two different articles.</p>
</blockquote>
<p>These are nested subjects. That is, &quot;Cubic Hermit interpolation&quot; is a specific kind of &quot;Hermite interpolation&quot;, just as a polygon is a specific kind of polytope.</p>
<p>Hermite interpolation is itself a particular scheme for doing polynomial interpolation. And polynomial interpolation is the construction of a polynomial (of the lowest possible degree) that passes through all of a given set of points in a field.</p>
<p>How this maps to <code>smoothstep</code> is as follows. For a given pair of start/end values, <code>smoothstep</code> defines a function <code>f(X)</code>, where X is the given value. If we plot <code>Y = f(X)</code> on a graph, we get a function whose Y range is [0, 1] and its X range is [-inf, inf].</p>
<p>Now, when X is less than the start value, Y is always 0. When X is greater than the end value, Y is always one. When X is between those two values, it varies from 0 towards the start and 1 towards the end.</p>
<p>What that means is that we have 2 points in 2D space: (start, 0) and (end, 1). If we presume that start is 0 and end is 1 (we can linearly rescale the X value to map [start, end] to the [0, 1] range), then our points are (0, 0) and (1, 1).</p>
<p>Given this, we can perform Hermite interpolation between those two points. However, cubic Hermite interpolation requires 4 points: two points in space that act as the end points the curve must match and two first-derivatives which the curve must match at those points.</p>
<p>The first-derivatives are <em>implied</em> here by the nature of the smoothstep function. That is, the derivatives are chosen to be &quot;smooth&quot;, relative to the flat parts of the function (ie: outside the X range of [0, 1]).</p>
<p>The derivatives can be defined in terms of 2D vectors that are tangent to the curve at those points, flowing in the direction of the curve from start to end. Since the values less than 0 are going to be a flat value of 0, and the values greater than 1 will have a flat value of 1, it makes sense that the tangents are also flat. So the two tangents are both (1, 0).</p>
<p>So our 4 Hermite interpolation positions are:</p>
<div class="s-table-container">
<table class="s-table">
<thead>
<tr>
<th>0th Derivative</th>
<th>1st Derivative</th>
</tr>
</thead>
<tbody>
<tr>
<td>(0, 0)</td>
<td>(1, 0)</td>
</tr>
<tr>
<td>(1, 1)</td>
<td>(1, 0)</td>
</tr>
</tbody>
</table>
</div>
<p>The rest is just plugging those numbers into the <a href="https://en.wikipedia.org/wiki/Cubic_Hermite_spline#Interpolation_on_a_single_interval" rel="nofollow noreferrer">cubic Hermite interpolation formula</a> and reducing the result. <span class="math-container">$\boldsymbol{p}_0$</span> and <span class="math-container">$\boldsymbol{p}_1$</span> are the start/end points, and <span class="math-container">$\boldsymbol{k}_0$</span> &amp; <span class="math-container">$\boldsymbol{k}_1$</span> are the two tangents:</p>
<p><span class="math-container">$$
\boldsymbol{f}(t) = \left(2t^3 - 3t^2 + 1\right) \boldsymbol{p}_0 + \left(t^3 - 2t^2 + t\right) \boldsymbol{m}_0 + \left(-2t^3 + 3t^2\right) \boldsymbol{p}_1 + \left(t^3 - t^2\right) \boldsymbol{m}_1
$$</span></p>
<p>The X and Y components are:</p>
<p><span class="math-container">$$
\begin{eqnarray*}
f(t)_x &amp;=&amp; \left(2t^3 - 3t^2 + 1\right) p_{0x} + \left(t^3 - 2t^2 + t\right) m_{0x} + \left(-2t^3 + 3t^2\right) p_{1x} + \left(t^3 - t^2\right) m_{1x}\\
f(t)_y &amp;=&amp; \left(2t^3 - 3t^2 + 1\right) p_{0y} + \left(t^3 - 2t^2 + t\right) m_{0y} + \left(-2t^3 + 3t^2\right) p_{1y} + \left(t^3 - t^2\right) m_{1y}
\end{eqnarray*}
$$</span></p>
<p>If you insert the zeros and ones, then you get things reduced to:</p>
<p><span class="math-container">$$
\begin{eqnarray*}
f(t)_x &amp;=&amp; (t^3 - 2t^2 + t) + (-2t^3 + 3t^2) + (t^3 - t^2)\\
&amp;=&amp; (t^3 - 2t^3 + t^3) + (-2t^2 + 3t^2 - t^2) + t\\
&amp;=&amp; t\\
f(t)_y &amp;=&amp; -2t^3 + 3t^2
\end{eqnarray*}
$$</span></p>
<p>We're not actually looking for <span class="math-container">$f(t)$</span> however; we're looking for our function f(x) that yields Y. Because <span class="math-container">$t$</span> and <span class="math-container">$f(t)_x$</span> are the same however, that means <span class="math-container">$f(t)_y$</span> is just the <span class="math-container">$f(x)$</span> that we're looking for.</p>
<p>Does <span class="math-container">$-2x^3 + 3x^2$</span> look familiar? It's just a different form of <code>t * t * (3.0 - 2.0 * t)</code>. Which is <a href="https://registry.khronos.org/OpenGL-Refpages/gl4/html/smoothstep.xhtml" rel="nofollow noreferrer">what <code>smoothstep</code> returns</a> when <code>t</code> is between 0 and 1.</p>
<p>QED</p>

CC BY-SA 4.0
2023-01-10T04:44:41.593Z
2023-01-15T04:38:11.923Z
2023-01-15T04:38:11.923Z
Nicol Bolas
<p>A Hermite cubic polynomial interpolates 2 points and the derivatives at those points. To be exact, let us have the points <span class="math-container">$p_0, p_1$</span> and the derivatives (tangents) at those <span class="math-container">$d_0, d_1$</span>. Then we want a cubic polynomial <span class="math-container">$p(t) = a_0 + a_1 t + a_2 t^2 + a_3 t^3$</span> which interpolates the points and derivatives:
<span class="math-container">$$p(0) = p_0,\,\, p(1) = p_1,\,\, p'(0) = d_0,\,\, p'(1) = d_1.$$</span>
We can take the derivative of <span class="math-container">$p(t)$</span> with respect to <span class="math-container">$t$</span> in order to get <span class="math-container">$p'(t) = a_1 + 2a_2 t + 3a_3 t^2$</span>. We can compute two of the coefficients easily: <span class="math-container">$p(0) = a_0 = p_0$</span> and <span class="math-container">$p'(0) = a_1 = d_0$</span>. For the remaining two equations we have
<span class="math-container">$$p(1) = p_0 + d_0 + a_2 + a_3 = p_1,\quad p'(1) = d_0 + 2a_2 + 3a_3 = d_1.$$</span>
Solving the system we get
<span class="math-container">$$a_3 = 2(p_0-p_1) + d_0 + d_1, \quad a_2 = 3(p_1 - p_0)-2d_0 - d_1.$$</span>
You can then rewrite the solution using the following system
<span class="math-container">$$p(t) = \begin{bmatrix} 1 &amp; t &amp; t^2 &amp; t^3 \end{bmatrix} \begin{bmatrix} 1 &amp; 0 &amp; 0 &amp; 0 \\
0 &amp; 0 &amp; 1 &amp; 0 \\
-3 &amp; 3 &amp; -2 &amp; -1 \\
2&amp; -2 &amp; 1 &amp; 1\end{bmatrix} \begin{bmatrix} p_0 \\ p_1 \\ d_0 \\ d_1 \end{bmatrix}.$$</span>
If you perform the vector-matrix multiplication first, then you would get the Hermite basis functions:
<span class="math-container">$$p(t) = (1-3t^2+2t^3)p_0 + (3t^2-2t^3)p_1 + (t-2t^2+t^3)d_0 + (t^3-t^2)d_1.$$</span>
You can now identify the basis function in front of <span class="math-container">$p_1$</span> with the smoothstep function, and the basis function in front of <span class="math-container">$p_0$</span> is one minus smoothstep. If you were to additionally set <span class="math-container">$d_0=d_1=0$</span>, then it turns out that this is the only function you need. <strong>Thus when you do <span class="math-container">$p(t) = (1-S(t)) p_0 + S(t) p_1$</span> you are performing cubic polynomial Hermite interpolation with derivatives set to zero.</strong></p>

CC BY-SA 4.0
2023-01-11T14:23:56.983Z
2023-01-15T01:54:21.753Z
2023-01-15T01:54:21.753Z
lightxbulb
<p>When scaling an image with <a href="https://en.wikipedia.org/wiki/Bicubic_interpolation" rel="nofollow noreferrer">Bicubic Interpolation</a>, the <a href="https://en.wikipedia.org/wiki/Cubic_Hermite_spline" rel="nofollow noreferrer">Cubic Hermite spline</a> interpolation is used.  <code>smoothstep</code> is one of the four basis/blend functions of this kind of interpolation.</p>
<p><span class="math-container">$$
f(x) = 3x^2 - 2x^3
$$</span></p>
<p>I've seen a trick used in quite a few places in Computer Graphics.  Say something is interpolated linearly</p>
<p><span class="math-container">$$
L(t) = (1-t)A + t(B - A)
$$</span></p>
<p>What people often do to make it interesting is remap the interpolation parameter <span class="math-container">$t$</span> with <code>smoothstep</code> and then lerp</p>
<p><span class="math-container">$$
u = smoothstep(t) \\
L(u) = (1-u)A + u(B - A)
$$</span></p>
<p>The result (interpolant) is still linear but the speed at which the output varies isn't constant: starts slow and ends up slow, speeds up in the middle.  When interpolating a value, by remapping the interpolation parameter, an illusion of non-linear output is achived since the linearly increasing parameter was looped through <code>smoothstep</code> (non-linear).</p>
<p>Some examples</p>
<ul>
<li><a href="https://sol.gfxile.net/interpolation/index.html#c4" rel="nofollow noreferrer">Linear interpolation of position but smooth movement</a></li>
<li><a href="https://iquilezles.org/www/articles/texture/texture.htm" rel="nofollow noreferrer">Faking smoothness with bilinear texture look-ups</a></li>
<li><a href="https://web.archive.org/web/20151103105506/http://www.noisemachine.com/talk1/15.html" rel="nofollow noreferrer">Faking smootheness in Perlin Noise when bilinearly interpolating gradient vectors</a></li>
</ul>
<p>I'm trying to better understand this trick.  I think this trick is done to avoid doing a full blown Cubic Hermite spline interpolation which involves looking up 16 values and evaluating the cubic Hermite spline equation 5 times.  <strong>Is this just a remapping trick or is there some mathematical concept behind it?</strong></p>
<p>When I looked up <a href="https://en.wikipedia.org/wiki/Smoothstep" rel="nofollow noreferrer"><code>smoothstep</code> in Wikipedia</a>, it says</p>
<blockquote>
<p>In HLSL and GLSL, smoothstep implements the <span class="math-container">$S_1(x)$</span> the cubic <a href="https://en.wikipedia.org/wiki/Hermite_interpolation" rel="nofollow noreferrer">Hermite interpolation</a> after clamping</p>
</blockquote>
<p>However, <a href="https://en.wikipedia.org/wiki/Hermite_interpolation" rel="nofollow noreferrer">Hermite interpolation</a> it links to is different from <a href="https://en.wikipedia.org/wiki/Cubic_Hermite_spline" rel="nofollow noreferrer">Cubic Hermite spline</a> interpolation; they're two different articles.  <a href="http://fyzikazeme.sk/mainpage/stud_mat/nm/lecture5.pdf" rel="nofollow noreferrer">Former seems to be a kind of Polynomial Interpolation</a>.  I'm confused as to what this function really is/does at a deeper level.</p>

CC BY-SA 4.0
2023-01-10T03:22:00.660Z
"*Is this just a remapping trick or is there some mathematical concept behind it?*" Why don't "remapping tricks" count has having "some mathematical concept"? "*a full blown Cubic Hermite spline interpolation which involves looking up 16 values*" Hermit spline interpolation only requires 4 values/control points.
Nicol Bolas
CC BY-SA 4.0
2023-01-10T04:32:56.690Z
@NicolBolas I should've been more precise; sorry.  [**bi**cubic interpolation needs 16 lookups](https://en.wikipedia.org/wiki/Bilinear_interpolation#/media/File:Comparison_of_1D_and_2D_interpolation.svg) and 5 evaluations of cubic Hermite spline equation. Yes, remapping itself is a mathematical concept, agreed.  Just curious if there's something more; cool if there isn't.  Like for instance, when I first learned about _barycentric coordinates_ I didn't know [their connection to _Bernstein polynomials_](https://youtu.be/01YSK5gIEYQ?list=PLCc9vhgj7wo6ngh2-tChlI6PruZJW3KPw&t=2304).
legends2k
CC BY-SA 4.0
2023-01-11T18:28:40.133Z
I put the bounty on this to attract interesting answers to this interesting question but I wish I could split the bounty amongst multiple good answers!  In the interests of fairness I'll award it to the one with the most upvotes at the end of the bounty period.
AJP
<mathematics><interpolation><animation><curve>
Fake cubic Hermite spline interpolation with smoothstep
legends2k
# Fake cubic Hermite spline interpolation with smoothstep

(Asked by: username_0 on 2021-05-25)

When scaling an image with [Bicubic Interpolation](https://en.wikipedia.org/wiki/Bicubic_interpolation), the [Cubic Hermite spline](https://en.wikipedia.org/wiki/Cubic_Hermite_spline) interpolation is used. `smoothstep` is one of the four basis/blend functions of this kind of interpolation.

$$
f(x) = 3x^2 - 2x^3
$$

I've seen a trick used in quite a few places in Computer Graphics. Say something is interpolated linearly

$$
L(t) = (1-t)A + t(B - A)
$$

What people often do to make it interesting is remap the interpolation parameter $t$ with `smoothstep` and then lerp

$$
u = smoothstep(t) \\
L(u) = (1-u)A + u(B - A)
$$

The result (interpolant) is still linear but the speed at which the output varies isn't constant: starts slow and ends up slow, speeds up in the middle. When interpolating a value, by remapping the interpolation parameter, an illusion of non-linear output is achived since the linearly increasing parameter was looped through `smoothstep` (non-linear).

Some examples

* [Linear interpolation of position but smooth movement](https://sol.gfxile.net/interpolation/index.html#c4)
* [Faking smoothness with bilinear texture look-ups](https://iquilezles.org/www/articles/texture/texture.htm)
* [Faking smootheness in Perlin Noise when bilinearly interpolating gradient vectors](https://web.archive.org/web/20151103105506/http://www.noisemachine.com/talk1/15.html)

I'm trying to better understand this trick. I think this trick is done to avoid doing a full blown Cubic Hermite spline interpolation which involves looking up 16 values and evaluating the cubic Hermite spline equation 5 times. **Is this just a remapping trick or is there some mathematical concept behind it?**

When I looked up [`smoothstep` in Wikipedia](https://en.wikipedia.org/wiki/Smoothstep), it says

> In HLSL and GLSL, smoothstep implements the $S\_1(x)$ the cubic [Hermite interpolation](https://en.wikipedia.org/wiki/Hermite_interpolation) after clamping

However, [Hermite interpolation](https://en.wikipedia.org/wiki/Hermite_interpolation) it links to is different from [Cubic Hermite spline](https://en.wikipedia.org/wiki/Cubic_Hermite_spline) interpolation; they're two different articles. [Former seems to be a kind of Polynomial Interpolation](http://fyzikazeme.sk/mainpage/stud_mat/nm/lecture5.pdf). I'm confused as to what this function really is/does at a deeper level.

**Tags:** mathematics, interpolation, animation, curve

> **Comments:**
> **username_1**: "*Is this just a remapping trick or is there some mathematical concept behind it?*" Why don't "remapping tricks" count has having "some mathematical concept"? "*a full blown Cubic Hermite spline interpolation which involves looking up 16 values*" Hermit spline interpolation only requires 4 values/control points.  
> **username_0**: @username_1 I should've been more precise; sorry.  [**bi**cubic interpolation needs 16 lookups](https://en.wikipedia.org/wiki/Bilinear_interpolation#/media/File:Comparison_of_1D_and_2D_interpolation.svg) and 5 evaluations of cubic Hermite spline equation. Yes, remapping itself is a mathematical concept, agreed.  Just curious if there's something more; cool if there isn't.  Like for instance, when I first learned about _barycentric coordinates_ I didn't know [their connection to _Bernstein polynomials_](https://youtu.be/01YSK5gIEYQ?list=PLCc9vhgj7wo6ngh2-tChlI6PruZJW3KPw&t=2304).  
> **username_2**: I put the bounty on this to attract interesting answers to this interesting question but I wish I could split the bounty amongst multiple good answers!  In the interests of fairness I'll award it to the one with the most upvotes at the end of the bounty period.  

---

## 2 answers

### Answer by username_1 on 2023-01-10. Score: 1

> However, Hermite interpolation it links to is different from Cubic Hermite spline interpolation; they're two different articles.

These are nested subjects. That is, "Cubic Hermit interpolation" is a specific kind of "Hermite interpolation", just as a polygon is a specific kind of polytope.

Hermite interpolation is itself a particular scheme for doing polynomial interpolation. And polynomial interpolation is the construction of a polynomial (of the lowest possible degree) that passes through all of a given set of points in a field.

How this maps to `smoothstep` is as follows. For a given pair of start/end values, `smoothstep` defines a function `f(X)`, where X is the given value. If we plot `Y = f(X)` on a graph, we get a function whose Y range is [0, 1] and its X range is [-inf, inf].

Now, when X is less than the start value, Y is always 0. When X is greater than the end value, Y is always one. When X is between those two values, it varies from 0 towards the start and 1 towards the end.

What that means is that we have 2 points in 2D space: (start, 0) and (end, 1). If we presume that start is 0 and end is 1 (we can linearly rescale the X value to map [start, end] to the [0, 1] range), then our points are (0, 0) and (1, 1).

Given this, we can perform Hermite interpolation between those two points. However, cubic Hermite interpolation requires 4 points: two points in space that act as the end points the curve must match and two first-derivatives which the curve must match at those points.

The first-derivatives are *implied* here by the nature of the smoothstep function. That is, the derivatives are chosen to be "smooth", relative to the flat parts of the function (ie: outside the X range of [0, 1]).

The derivatives can be defined in terms of 2D vectors that are tangent to the curve at those points, flowing in the direction of the curve from start to end. Since the values less than 0 are going to be a flat value of 0, and the values greater than 1 will have a flat value of 1, it makes sense that the tangents are also flat. So the two tangents are both (1, 0).

So our 4 Hermite interpolation positions are:

| 0th Derivative | 1st Derivative |
| --- | --- |
| (0, 0) | (1, 0) |
| (1, 1) | (1, 0) |

The rest is just plugging those numbers into the [cubic Hermite interpolation formula](https://en.wikipedia.org/wiki/Cubic_Hermite_spline#Interpolation_on_a_single_interval) and reducing the result. $\boldsymbol{p}\_0$ and $\boldsymbol{p}\_1$ are the start/end points, and $\boldsymbol{k}\_0$ & $\boldsymbol{k}\_1$ are the two tangents:

$$
\boldsymbol{f}(t) = \left(2t^3 - 3t^2 + 1\right) \boldsymbol{p}\_0 + \left(t^3 - 2t^2 + t\right) \boldsymbol{m}\_0 + \left(-2t^3 + 3t^2\right) \boldsymbol{p}\_1 + \left(t^3 - t^2\right) \boldsymbol{m}\_1
$$

The X and Y components are:

$$
\begin{eqnarray\*}
f(t)\_x &=& \left(2t^3 - 3t^2 + 1\right) p\_{0x} + \left(t^3 - 2t^2 + t\right) m\_{0x} + \left(-2t^3 + 3t^2\right) p\_{1x} + \left(t^3 - t^2\right) m\_{1x}\\
f(t)\_y &=& \left(2t^3 - 3t^2 + 1\right) p\_{0y} + \left(t^3 - 2t^2 + t\right) m\_{0y} + \left(-2t^3 + 3t^2\right) p\_{1y} + \left(t^3 - t^2\right) m\_{1y}
\end{eqnarray\*}
$$

If you insert the zeros and ones, then you get things reduced to:

$$
\begin{eqnarray\*}
f(t)\_x &=& (t^3 - 2t^2 + t) + (-2t^3 + 3t^2) + (t^3 - t^2)\\
&=& (t^3 - 2t^3 + t^3) + (-2t^2 + 3t^2 - t^2) + t\\
&=& t\\
f(t)\_y &=& -2t^3 + 3t^2
\end{eqnarray\*}
$$

We're not actually looking for $f(t)$ however; we're looking for our function f(x) that yields Y. Because $t$ and $f(t)\_x$ are the same however, that means $f(t)\_y$ is just the $f(x)$ that we're looking for.

Does $-2x^3 + 3x^2$ look familiar? It's just a different form of `t * t * (3.0 - 2.0 * t)`. Which is [what `smoothstep` returns](https://registry.khronos.org/OpenGL-Refpages/gl4/html/smoothstep.xhtml) when `t` is between 0 and 1.

QED


---

### Answer by username_3 on 2023-01-11. Score: 1

A Hermite cubic polynomial interpolates 2 points and the derivatives at those points. To be exact, let us have the points $p\_0, p\_1$ and the derivatives (tangents) at those $d\_0, d\_1$. Then we want a cubic polynomial $p(t) = a\_0 + a\_1 t + a\_2 t^2 + a\_3 t^3$ which interpolates the points and derivatives:
$$p(0) = p\_0,\,\, p(1) = p\_1,\,\, p'(0) = d\_0,\,\, p'(1) = d\_1.$$
We can take the derivative of $p(t)$ with respect to $t$ in order to get $p'(t) = a\_1 + 2a\_2 t + 3a\_3 t^2$. We can compute two of the coefficients easily: $p(0) = a\_0 = p\_0$ and $p'(0) = a\_1 = d\_0$. For the remaining two equations we have
$$p(1) = p\_0 + d\_0 + a\_2 + a\_3 = p\_1,\quad p'(1) = d\_0 + 2a\_2 + 3a\_3 = d\_1.$$
Solving the system we get
$$a\_3 = 2(p\_0-p\_1) + d\_0 + d\_1, \quad a\_2 = 3(p\_1 - p\_0)-2d\_0 - d\_1.$$
You can then rewrite the solution using the following system
$$p(t) = \begin{bmatrix} 1 & t & t^2 & t^3 \end{bmatrix} \begin{bmatrix} 1 & 0 & 0 & 0 \\
0 & 0 & 1 & 0 \\
-3 & 3 & -2 & -1 \\
2& -2 & 1 & 1\end{bmatrix} \begin{bmatrix} p\_0 \\ p\_1 \\ d\_0 \\ d\_1 \end{bmatrix}.$$
If you perform the vector-matrix multiplication first, then you would get the Hermite basis functions:
$$p(t) = (1-3t^2+2t^3)p\_0 + (3t^2-2t^3)p\_1 + (t-2t^2+t^3)d\_0 + (t^3-t^2)d\_1.$$
You can now identify the basis function in front of $p\_1$ with the smoothstep function, and the basis function in front of $p\_0$ is one minus smoothstep. If you were to additionally set $d\_0=d\_1=0$, then it turns out that this is the only function you need. **Thus when you do $p(t) = (1-S(t)) p\_0 + S(t) p\_1$ you are performing cubic polynomial Hermite interpolation with derivatives set to zero.**


---

