This note captures a line of thinking about easing functions as signals. The core idea is that an easing curve can be decomposed into a uniform-motion ramp plus a residual pulse:
[ f(u)=u+r(u) ]
where
[ r(u)=f(u)-u. ]
The diagonal (s=u) is the reference signal of uniform motion. Subtracting it is not merely a numerical operation on a curve; it is a Galilean change of frame. The whole easing square is sheared into the diagonal frame, where the uniform traveler becomes still and the easing curve appears as a residual pulse.
An easing function may be read as a normalized signal of motion:
[ s=f(u), \qquad u\in[0,1]. ]
Here (u) is normalized time and (s) is normalized position, progress, or value. The easing is therefore a signal whose input is time and whose output is progress.
In the ordinary easing frame, the curve answers:
Where is the moving point at this moment?
A linear easing answers this in the simplest possible way:
[ s=u. ]
At 25% of the time, it is 25% of the way there. At 50% of the time, it is 50% of the way there. At 75% of the time, it is 75% of the way there.
Thus the diagonal is not merely a geometric line. It is the unit ramp signal of uniform motion.
The diagonal measures motion against uniformity because it gives the position that would have been reached under average constant speed.
For any easing (f(u)), compare it to the diagonal by subtracting:
[ r(u)=f(u)-u. ]
This residual tells whether the easing is ahead of, behind, or equal to uniform motion:
[ r(u)<0 \quad \text{behind uniform motion}, ]
[ r(u)=0 \quad \text{on the uniform reference}, ]
[ r(u)>0 \quad \text{ahead of uniform motion}. ]
So the easing decomposes as:
[ f(u)=u+r(u). ]
In signal language:
[ \text{easing} = \text{ramp} + \text{residual}. ]
Or, more poetically:
An easing curve is a ramp bearing a pulse.
The ramp transports; the pulse expresses.
Because a normalized easing shares endpoints with the diagonal,
[ f(0)=0, \qquad f(1)=1, ]
its residual begins and ends at zero:
[ r(0)=f(0)-0=0, ]
[ r(1)=f(1)-1=0. ]
Therefore the residual is naturally a pulse-like signal. It leaves the baseline and returns to it.
The easing curve itself is a transport signal:
[ 0\to 1. ]
The residual is a deviation signal:
[ 0\to \text{departure}\to 0. ]
It does not change the endpoints of the journey. It only shapes the journey relative to uniform motion.
Consider the quadratic ease-in:
[ f(u)=u^2. ]
The residual is:
[ r(u)=u^2-u. ]
Factoring:
[ r(u)=-u(1-u). ]
This is a negative pulse on ([0,1]). It starts at zero, dips below the baseline, reaches its minimum at (u=\tfrac12), and returns to zero:
[ r(0)=0, ]
[ r\left(\frac12\right)=-\frac14, ]
[ r(1)=0. ]
Motion interpretation:
The quadratic ease-in is always behind the uniform traveler until the endpoint. In the diagonal frame, it appears as a car falling behind and then catching up exactly at the destination.
For the quadratic ease-in, the area between the diagonal and the curve is:
[ \int_0^1 (u-u^2),du. ]
The area between the residual pulse and the timeline is:
[ \int_0^1 \bigl(0-(u^2-u)\bigr),du. ]
These are the same integral:
[ \int_0^1 (u-u^2),du =\left[\frac{u^2}{2}-\frac{u^3}{3}\right]_0^1 =\frac12-\frac13 =\frac16. ]
But the deeper reason is geometric: the residual pulse is the original gap after a shear of the whole frame.
The red region between (u^2) and (u) becomes the purple region between (u^2-u) and (0).
Subtracting the diagonal is the transformation:
[ (u,s)\mapsto (u,s-u). ]
Equivalently:
[ u'=u, ]
[ s'=s-u. ]
In matrix form:
\begin{pmatrix} 1&0\ -1&1 \end{pmatrix} \begin{pmatrix} u\ s \end{pmatrix}. ]
This is a vertical shear with shear factor (-1). It is also a Galilean change of inertial frame: it moves into the frame of the average-speed traveler.
In the original frame, the uniform average traveler traces the diagonal:
[ s=u. ]
After the shear:
[ s'=s-u=u-u=0. ]
So the diagonal becomes the timeline.
That is the key geometric insight:
Subtracting the diagonal is not merely subtracting one curve from another. It is a Galilean shear of the entire easing frame. The diagonal of uniform motion is transformed into rest, and every easing curve is transformed into its residual pulse.
The original easing square has corners:
[ (0,0),\quad (1,0),\quad (0,1),\quad (1,1). ]
Apply the shear ((u,s)\mapsto(u,s-u)):
[ (0,0)\mapsto(0,0), ]
[ (1,0)\mapsto(1,-1), ]
[ (0,1)\mapsto(0,1), ]
[ (1,1)\mapsto(1,0). ]
Thus the unit square becomes a unit-area parallelogram:
[ (0,0),\quad (1,-1),\quad (1,0),\quad (0,1). ]
Its formerly horizontal sides now have slope (-1). Its formerly vertical sides remain vertical.
It is not a Euclidean rhombus, because its side lengths are different:
[ |(1,-1)|=\sqrt2, ]
[ |(0,1)|=1. ]
But it is an affine image of the square and still has area (1), because the shear matrix has determinant (1):
[ \det \begin{pmatrix} 1&0\ -1&1 \end{pmatrix} =1. ]
Area is preserved.
Imagine a car traveling from a start point to a destination in total time (T) and total distance (L).
In the ground frame, its position is:
[ x(t). ]
Normalize time and position:
[ u=\frac{t}{T}, ]
[ s=\frac{x(t)}{L}. ]
If the car accelerates and then decelerates, its normalized path is an ease-in-out curve:
[ s=f(u). ]
Now introduce an average-speed traveler moving at:
[ V_{\text{avg}}=\frac{L}{T}. ]
That traveler traces:
[ x_{\text{linear}}(t)=V_{\text{avg}}t. ]
In normalized coordinates, that is:
[ s=u. ]
Now view the car from the frame of the average-speed traveler:
[ x_{\text{rel}}(t)=x(t)-V_{\text{avg}}t. ]
Normalize:
[ r(u)=f(u)-u. ]
So the residual is the car's relative position in the average-velocity frame.
For a symmetric ease-in-out:
- Early on, the car is slower than average, so it falls behind: (r(u)<0).
- At the midpoint, it catches up: (r(\tfrac12)=0).
- At that moment it is moving faster than average, so it passes the traveler.
- Later, it decelerates while ahead: (r(u)>0).
- At the endpoint, both arrive together: (r(1)=0).
Thus the roadside observer sees a journey from start to destination, while the average-speed observer sees a pulse:
[ 0\to\text{behind}\to0\to\text{ahead}\to0. ]
Start with the decomposition:
[ f(u)=u+r(u). ]
Differentiate:
[ f'(u)=1+r'(u). ]
So the eased velocity decomposes into average velocity plus velocity residual:
[ \text{eased velocity}=\text{average velocity}+\text{velocity error}. ]
where
[ r'(u)=f'(u)-1. ]
Differentiate again:
[ f''(u)=r''(u). ]
This is important: the diagonal has no acceleration, so all acceleration lives in the residual.
The ramp carries displacement.
The residual carries non-uniformity.
Its derivative is velocity error.
Its second derivative is acceleration.
The residual may be described in signal terms as:
- a residual signal,
- a deviation signal,
- a detrended signal,
- a relative-position signal,
- a pulse signal,
- a non-uniformity signal.
It is not always best to call it an AC component, because it does not always have zero mean. For example, the quadratic ease-in residual
[ r(u)=u^2-u ]
is entirely negative on ((0,1)), so its average value is negative.
The term residual pulse is useful because it captures both facts:
- it is produced by subtracting the diagonal trend;
- it begins and ends on the baseline.
The diagonal and anti-diagonal offer two different readings of the easing square.
The diagonal is:
[ s=u. ]
It is the axis of identity, uniformity, and average progress.
The anti-diagonal is:
[ s=1-u. ]
or
[ s+u=1. ]
It is the axis of complement: elapsed time plus remaining value, or time spent versus value not yet gained.
The diagonal asks:
[ s-u=0. ]
The anti-diagonal asks:
[ s+u=1. ]
So the diagonal reading is the progress error:
[ f(u)-u. ]
The anti-diagonal reading is the completion balance:
[ f(u)+u-1. ]
In aphoristic form:
The diagonal measures motion against uniformity.
The anti-diagonal measures motion against completion.
Every easing may be decomposed into a uniform ramp and a residual pulse:
[ f(u)=u+r(u). ]
The ramp is the diagonal, the signal of average uniform motion. The residual is what remains after entering the diagonal frame. It begins and ends at zero, and so appears as a pulse: negative when the motion falls behind uniformity, positive when it runs ahead. Its derivative is the velocity error; its second derivative is the acceleration itself. Thus the residual is not a secondary artifact of the easing curve. It is the easing curve's non-uniformity made visible as a signal.
To subtract the diagonal is to enter the inertial frame of the average-speed traveler. In that frame, an ease-in-out journey is no longer a journey from origin to destination, but a pulse around uniform motion.
The easing curve is the car seen from the roadside. The residual pulse is the same car seen from the diagonal frame.
Subtracting the diagonal is not merely subtracting one curve from another. It is a Galilean shear of the whole easing frame. The diagonal of uniform motion is transformed into rest, and every easing curve is transformed into its residual pulse.
The residual pulse is the diagonal gap made into a worldline.
The diagonal frame unshears uniform motion into rest. What remains of an easing curve is its pulse of non-uniformity.
An easing curve is a signal of progress over time. The diagonal (s=u) is the uniform-motion ramp. Subtracting the diagonal removes the average uniform motion and leaves the residual:
[ r(u)=f(u)-u. ]
This residual is a pulse because it starts and ends at zero. For ease-in it is negative; for ease-out it is positive; for ease-in-out it is often bipolar. Geometrically, this subtraction is a Galilean shear of the entire easing frame:
[ (u,s)\mapsto(u,s-u). ]
The diagonal becomes the timeline, the unit square becomes a unit-area parallelogram, and the easing curve becomes a residual pulse. Signal-theoretically, the easing is a ramp plus a residual; physically, it is the same motion viewed from the average-speed frame.