Parametric Time Warping

Manipulating a cubic Bézier handle inside the Adobe After Effects Graph Editor to decelerate a rigid body and routing a Low-Frequency Oscillator (LFO) to modulate a state-variable filter cutoff in a digital synthesizer are mathematically identical operations. Both computational processes evaluate a continuous or piecewise shaping function over a normalized temporal domain to transform a target state variable.

In computer graphics and kinematics, interpolation constructs intermediate discrete states between boundary conditions defined by keyframes. In digital signal processing (DSP) and sound synthesis, control-rate modulation varies an acoustic parameter continuously via a periodic or aperiodic generator.

When examined through numerical analysis and differential calculus, both paradigms collapse into a single formal operation: mapping a normalized temporal phase parameter through a transfer function to drive a bounded affine transformation.

Examining one domain through the mathematical apparatus of the other establishes a rigorous cross-disciplinary intuition. Visual inspection of geometric curvature, inflection points, and higher-order derivatives directly informs auditory perception of spectral envelope transients, phase discontinuities, and modulation artifacts.

Before introducing non-linear curvature or periodic oscillation, a computational engine must define a baseline trajectory between two boundary states. Given an initial scalar or vector state A \in \mathbb{R}^n at timestamp t_0 and a terminal state B \in \mathbb{R}^n at timestamp t_1 (where t_1 > t_0), the system first maps raw elapsed time t \in [t_0, t_1] onto a dimensionless, normalized temporal coordinate u \in [0, 1] via an affine normalization:

Linear Interpolation (LERP) defines the intermediate state P(u) as a convex combination of the boundary states A and B:

Differentiating P(u) with respect to normalized time u yields the first derivative (velocity) and the second derivative (acceleration):

By chain rule expansion, the physical velocity with respect to real time t is constant across the open interval (t_0, t_1):

While computationally trivial, pure linear interpolation exhibits a fundamental physical flaw at the boundary timestamps t_0 and t_1.

If the system is at rest prior to t_0 (v(t) = 0 for t < t_0) and transitions immediately into a linear interpolation at t_0, the function exhibits only C^0 (positional) continuity.

The first derivative \frac{dP}{dt} suffers a step discontinuity, jumping instantaneously from 0 to \frac{B - A}{t_1 - t_0}. Consequently, the second derivative (acceleration) approaches a Dirac delta impulse (\frac{d^2P}{dt^2} \to \infty), which violates Newtonian mechanics for any macroscopic object possessing mass m > 0 under finite force F = ma.

To restore C^1 (velocity) and C^2 (acceleration) continuity, digital systems replace the identity mapping u with a non-linear temporal shaping function (or easing transfer function) f: [0, 1] \to \mathbb{R}, commonly satisfying the boundary conditions f(0) = 0 and f(1) = 1:

Every animation curve editor and synthesizer modulation matrix is an interface for constructing, parameterizing, and evaluating f(u).

Different visual computing environments implement f(u) with varying degrees of mathematical generality, progressing from single-parameter monomials to piecewise parametric polynomial splines and differential equation solvers.

Early vector animation engines such as Macromedia Flash avoided the computational overhead of root-finding on parametric splines by restricting easing to a single scalar parameter s \in [-100, 100], normalized internally to \hat{s} = s / 100 \in [-1, 1].

This scalar controls the exponent p of a monomial power function, where p = 1 + k\vert{}\hat{s}\vert{} (typically with scaling factor k = 2, yielding up to cubic curvature when \vert{}s\vert{} = 100):

• Ease-In (\hat{s} < 0, positive acceleration from rest):

  f_{\text{in}}(u) = u^p = u^{1 + k\vert{}\hat{s}\vert{}}

Evaluating the first and second derivatives for p > 1 demonstrates why the object accelerates smoothly from a stationary state at u = 0:

At u = 0, velocity \frac{df_{\text{in}}}{du}\big\vert{}_{u=0} = 0, guaranteeing a smooth departure from rest, while terminal velocity at u = 1 reaches \frac{df_{\text{in}}}{du}\big\vert{}_{u=1} = p.

• Ease-Out (\hat{s} > 0, negative acceleration to rest):
  Constructed by reflecting the domain and codomain of the monomial across the unit square diagonal:

  f_{\text{out}}(u) = 1 - (1 - u)^p = 1 - (1 - u)^{1 + k\hat{s}}

Here, initial velocity is maximized at \frac{df_{\text{out}}}{du}\big\vert{}_{u=0} = p, and terminal velocity decays smoothly to \frac{df_{\text{out}}}{du}\big\vert{}_{u=1} = 0, modeling kinetic energy dissipation under Coulomb or viscous friction.

The W3C CSS Transitions and Animations specifications define temporal shaping via a two-dimensional parametric Cubic Bézier curve (cubic-bezier(x1, y1, x2, y2)). The curve is constructed from four control points in the (u, f) plane: fixed endpoints P_0 = (0, 0) and P_3 = (1, 1), and two user-defined handle coordinates P_1 = (x_1, y_1) and P_2 = (x_2, y_2).

Using the Bernstein basis polynomials of degree 3, defined as b_{i,3}(s) = \binom{3}{i} (1 - s)^{3 - i} s^i for an auxiliary curve parameter s \in [0, 1], the parametric coordinates are given by:

Substituting the fixed boundary values P_0 = (0, 0) and P_3 = (1, 1) yields two coupled cubic equations for normalized time u(s) and shaped progress f(s):

Expanding u(s) into standard polynomial form reveals the core computational challenge of rendering CSS animations:

During frame rendering, the browser knows the current normalized timestamp u \in [0, 1], not the internal Bernstein parameter s. To evaluate the spatial position, the engine must first invert B_x(s) to find the root s^* of the objective function g(s) = B_x(s) - u = 0, and then evaluate f(u) = B_y(s^*).

For f(u) to remain a single-valued mathematical function of time (preventing an object from occupying two positions simultaneously at timestamp u), B_x(s) must be monotonically non-decreasing over s \in [0, 1]:

Because the Bernstein basis polynomials are strictly non-negative on [0, 1], constraining the abscissas of the control handles to x_1, x_2 \in [0, 1] is a sufficient condition to guarantee \frac{dB_x}{ds} \ge 0 everywhere. Conversely, the ordinates y_1, y_2 are unconstrained (y_1, y_2 \in \mathbb{R}), permitting the curve to exceed the [0, 1] range to produce anticipatory pullback (f(u) < 0) or elastic overshoot (f(u) > 1).

Rather than applying Cardano’s algebraic cubic formula, browser layout engines (such as Blink and WebKit) solve g(s) = B_x(s) - u = 0 numerically using the Newton-Raphson method for 4 to 8 iterations, falling back to the bisection method if the derivative approaches zero:

Adobe After Effects exposes the Fundamental Theorem of Calculus directly in its user interface by dividing keyframe interpolation into two coupled representations:

1. The Value Graph: Plots the spatial trajectory P(t) directly, where the slope of the tangent vector at any keyframe equals the instantaneous velocity \frac{dP}{dt}.

2. The Speed Graph: Plots the magnitude of the first derivative v(t) = \left| \frac{dP}{dt} \right| as a function of time.

By the Fundamental Theorem of Calculus, the net spatial displacement \Delta P = B - A between keyframes at t_0 and t_1 is strictly equal to the definite integral of the velocity function (the signed area under the Speed Graph):

In After Effects, dragging the influence handles of an Easy Ease keyframe modifies the distribution of v(t) while keeping the timestamps t_0, t_1 and boundary positions P(t_0), P(t_1) fixed. Because the integral \Delta P is invariant, increasing the horizontal influence of the zero-velocity tangents at the endpoints (v(t_0) = 0 and v(t_1) = 0) forces the peak velocity v_{\text{max}} at the inflection point (u = 0.5) to increase proportionally to preserve the constant area under the curve.

Consider a concrete comparison between a linear transition and a standard cubic Hermite Smoothstep curve (f(u) = 3u^2 - 2u^3), which enforces zero velocity at both boundaries ($f’(0) = 0, f’(1) = 0$):

Evaluating the Smoothstep derivative at the midpoint u = 0.5 yields $f’_{\text{smooth}}(0.5) = 6(0.5) - 6(0.25) = 1.5$. Consequently, simply smoothing the entry and exit velocities of a cubic curve requires the object to travel 50\% faster at its midpoint than it would under linear interpolation, and pushing Bezier handle influence toward 100\% in After Effects can easily drive peak midpoint velocities above three times the average velocity.

Blender’s animation kernel represents every animatable property in its Dependency Graph (Depsgraph) as an F-Curve: a piecewise parametric curve composed of sequential segments joined at keyframe knots, coupled with a post-evaluation procedural modifier stack.

In addition to manual Bézier handles (which automatically compute tangent slopes to enforce C^1 continuity and prevent local extrema overshoot when set to Auto Clamped), Blender provides analytical easing equations based on classical mechanics. Specifically, the Elastic interpolation mode models an underdamped harmonic oscillator governed by the second-order homogeneous linear differential equation:

where m is mass, c is the viscous damping coefficient, and k is the Hooke’s law spring constant. When the damping ratio \zeta = \frac{c}{2\sqrt{mk}} < 1, the general solution combines an exponentially decaying amplitude envelope with a sinusoidal carrier wave at the damped natural frequency \omega_d = \omega_n \sqrt{1 - \zeta^2}:

Crucially, Blender allows artists to append F-Curve Modifiers directly on top of keyframe spline evaluations. Adding a Built In Function modifier evaluates an additive or multiplicative trigonometric wave:

At the exact level of C/C++ execution inside the animation engine, an F-Curve with a periodic modifier is indistinguishable from a digital synthesizer’s modulation architecture.

In digital audio synthesis, signal generators operate across two primary frequency regimes:

1. Audio-Rate Signals (20\text{ Hz} \le f \le 20,000\text{ Hz}): Periodic pressure variations within the human auditory spectrum, perceived psychoacoustically as pitch and harmonic timbre.

2. Control-Rate Signals (0.001\text{ Hz} \le f < 20\text{ Hz}): Sub-audible periodic or aperiodic signals generated by Low-Frequency Oscillators (LFOs) and Envelope Generators (EGs). Rather than feeding the Digital-to-Analog Converter (DAC) audio outputs directly, these signals modulate the internal coefficients of audio-rate DSP blocks, such as filter cutoff frequency (f_c), amplifier gain (G), oscillator pitch (\Delta f), or wavetable index.

Whereas a standard keyframe animation evaluates normalized time u \in [0, 1] over a single finite interval [t_0, t_1], an LFO generates a continuous, periodic sequence of normalized intervals by wrapping time through the modulo-1 operator.

In a discrete-time DSP system operating at sampling frequency f_s (e.g., 48,000\text{ Hz}) or control-rate block rate f_k = f_s / N, an LFO with frequency f_{\text{LFO}} (in Hz) maintains an internal phase accumulator \phi[n] \in [0, 1) at discrete sample index n \in \mathbb{Z}_{\ge 0}:

When an LFO is synchronized to the host Digital Audio Workstation (DAW) tempo B (in Beats Per Minute, BPM) and rhythmic subdivision \beta (in beats per cycle, e.g., \beta = 1 for a quarter note, \beta = 0.5 for an eighth note), the LFO frequency is locked deterministically to the transport timeline:

The resulting instantaneous phase \phi(t) \in [0, 1) is mathematically identical to the normalized animation time coordinate u \in [0, 1]. An upward-ramping sawtooth oscillator is literally the raw normalized time coordinate u repeating periodically.

Once the instantaneous phase \phi(t) is passed through a waveform shaping transfer function W: [0, 1) \to [0, 1] (unipolar) or W_{\text{bi}}: [0, 1) \to [-1, 1] (bipolar, where W_{\text{bi}}(\phi) = 2W(\phi) - 1), the synthesizer applies the exact same affine LERP equation used in animation:

• Linear Domain Modulation (e.g., Stereo Panning or Wavetable Position):
  Given a base knob value P_0 and modulation depth D:

  P(t) = P_0 + D \cdot W(\phi(t))

• Logarithmic / Exponential Domain Modulation (Pitch and Filter Cutoff):
  Human pitch and frequency perception follow the Weber-Fechner law, responding logarithmically to fundamental frequency ratios (octaves and semitones) rather than linear Hertz increments. Every musical octave doubles the frequency (f \cdot 2^1). Therefore, when an LFO modulates a state-variable filter cutoff f_c(t) around base frequency f_{c0} with a modulation depth of M octaves, the linear LERP output is applied inside the exponent of base 2:

  f_c(t) = f_{c0} \cdot 2^{M \cdot W_{\text{bi}}(\phi(t))}

In logarithmic pitch space (measured in octaves or cents), the modulation remains a pure linear interpolation:

The table below formalizes the isomorphism between canonical synthesizer LFO waveforms W(\phi) and their equivalent keyframe interpolation curves f(u), alongside their first derivatives \frac{dW}{d\phi} and continuity classes:

Modern software synthesizers such as Xfer Serum, Vital, and Cableguys ShaperBox implement Multi-Stage Envelope Generators (MSEGs) that merge these two worlds explicitly. An MSEG stores an array of knot coordinates (\phi_i, y_i) on the unit square and interpolates between knots \phi_i and \phi_{i+1} using a tension-adjustable power or exponential curve. When triggered in Envelope (One-Shot) mode via a MIDI Note-On message, the MSEG executes a single pass from \phi = 0 to \phi = 1, functioning identically to a CSS transition or After Effects timeline. When switched to LFO (Loop) mode, the phase accumulator wraps modulo 1, transforming the keyframe spline into a periodic control-rate oscillator.

To ground this theoretical equivalence in concrete arithmetic, consider a transition lasting exactly \Delta t = 0.5\text{ s} (500\text{ ms}, which corresponds to one beat at 120\text{ BPM} or a 2\text{ Hz} LFO cycle) evaluated at the quarter-cycle timestamp t = 0.125\text{ s}:

Assume two simultaneous tasks driven by this exact normalized coordinate u = \phi = 0.25:

1. Animation Task: Translate a UI element horizontally from A = 100\text{ px} to B = 500\text{ px} (\Delta P = 400\text{ px}).

2. Audio Synthesis Task: Modulate a low-pass filter cutoff linearly from A = 200\text{ Hz} to B = 4200\text{ Hz} (\Delta P = 4000\text{ Hz}).

Let us compute the exact state values and instantaneous velocities at u = \phi = 0.25 across three different shaping functions:

• Shaped Output:

  f(0.25) = 0.25

• Instantaneous Normalized Velocity:

  f'(0.25) = 1.0

• Animation State & Speed:

  P_{\text{anim}}(0.25) = 100 + 400(0.25) = 200\text{ px}
  v_{\text{anim}}(0.125\text{ s}) = \frac{400\text{ px}}{0.5\text{ s}} \cdot 1.0 = 800\text{ px/s}

• Filter Cutoff State & Sweep Rate:

  P_{\text{synth}}(0.25) = 200 + 4000(0.25) = 1200\text{ Hz}
  v_{\text{synth}}(0.125\text{ s}) = \frac{4000\text{ Hz}}{0.5\text{ s}} \cdot 1.0 = 8000\text{ Hz/s}

• Shaped Output:

  f(0.25) = 3(0.25)^2 - 2(0.25)^3 = 3(0.0625) - 2(0.015625) = 0.1875 - 0.03125 = 0.15625

• Instantaneous Normalized Velocity:

  f'(0.25) = 6(0.25) - 6(0.25)^2 = 1.5 - 0.375 = 1.125

• Animation State & Speed:

  P_{\text{anim}}(0.25) = 100 + 400(0.15625) = 162.5\text{ px}
  v_{\text{anim}}(0.125\text{ s}) = 800\text{ px/s} \cdot 1.125 = 900\text{ px/s}

• Filter Cutoff State & Sweep Rate:

  P_{\text{synth}}(0.25) = 200 + 4000(0.15625) = 825\text{ Hz}
  v_{\text{synth}}(0.125\text{ s}) = 8000\text{ Hz/s} \cdot 1.125 = 9000\text{ Hz/s}

Notice how at u = 0.25, the cubic curve lags behind the linear ramp in absolute position (162.5\text{ px} vs. 200\text{ px}; 825\text{ Hz} vs. 1200\text{ Hz}) because it spent the initial interval accelerating from rest, yet its instantaneous velocity (1.125) has already surpassed the constant linear velocity (1.0).

To compare a full up-down LFO cycle fairly at \phi = 0.25 (which is the midpoint of the upward sweep, where \cos(2\pi \cdot 0.25) = \cos(\pi/2) = 0):

• Shaped Output:

  W(0.25) = \frac{1}{2}(1 - \cos(\pi/2)) = 0.5

• Instantaneous Normalized Velocity:

  W'(0.25) = \pi \sin(\pi/2) = \pi \approx 3.14159

• Animation State & Speed:

  P_{\text{anim}}(0.25) = 100 + 400(0.5) = 300\text{ px}
  v_{\text{anim}}(0.125\text{ s}) = 800\text{ px/s} \cdot \pi \approx 2513.27\text{ px/s}

• Filter Cutoff State & Sweep Rate:

  P_{\text{synth}}(0.25) = 200 + 4000(0.5) = 2200\text{ Hz}

  $$
  v_{\text{synth}}(0.125\text{ s}) = 8000\text{ Hz/s} \cdot \pi \approx 25,132.74\text{ Hz/s}

In mathematics and cognitive science, an isomorphism is a structure-preserving bijection between two domains. When two tools share an isomorphic mathematical backbone, training your perceptual system in one modality automatically constructs predictive intuition for the other. Human sensory processing is asymmetrically specialized across vision and audition:

• The Visual Cortex as a Spatial Integrator: Human vision excels at global geometric inspection. Looking at a 2D cartesian plot of f(u), the eye immediately identifies inflection points (\frac{d^2f}{du^2} = 0), cusps (C^0 non-differentiable corners), and step discontinuities (C^{-1} jumps).

• The Auditory Cortex as a Temporal Differentiator and Spectral Analyzer: The human cochlea acts as a biological continuous wavelet transform, resolving rapid temporal derivatives and high-frequency spectral transients down to the millisecond scale.

Bridging these two sensory modalities illuminates advanced phenomena in both crafts:

When an animator uses a Hold (steps(1)) keyframe or a raw cycle loop on a linear ramp, the object teleports across the screen at the frame boundary. Visually, this is an obvious spatial cut.

What happens when a sound designer uses that exact same C^{-1} step discontinuity (a Square or Sawtooth LFO) to modulate the amplitude of an audio signal? By Fourier analysis, the spectrum of a function with a jump discontinuity decays slowly at a rate of 1/f, containing infinite high-frequency harmonic energy. Multiplying an audio signal by a discontinuous control signal in the time domain corresponds to convolving their spectra in the frequency domain, splattering broadband high-frequency energy across the audio spectrum that manifests as an audible click or pop.

How do synthesizer engineers eliminate LFO clicking? They pass the discontinuous LFO signal through a single-pole low-pass Slew Limiter (also known as a Portamento or Glide filter), governed by the first-order differential equation:

For a unit step input x(t) = H(t), the analytical solution is an exponential ease-out curve with time constant \tau:

In discrete-time DSP, this is implemented as a one-pole Infinite Impulse Response (IIR) filter:

When an animator converts a harsh step keyframe into an exponential Ease-Out curve, and when a synth programmer turns up the Smooth or Glide knob on a step sequencer or Square LFO, both practitioners are applying low-pass filtering to a control trajectory to bound its first derivative \frac{dy}{dt} and suppress high-frequency spectral transients.

Why does a Triangle LFO modulating oscillator pitch (vibrato) sound synthetic and mechanical, whereas a Sine LFO sounds natural? And why does a virtual camera animated with simple quadratic keyframes still feel slightly jarring when entering a turn compared to a carefully tuned spline?

The answer lies in the derivatives at the turnaround peaks:

• A Triangle wave is C^0 continuous, but its first derivative \frac{dW}{d\phi} switches instantaneously from +2 to -2 at \phi = 0.5. In pitch modulation, the rate of pitch change reverses direction with infinite acceleration (\frac{d^2W}{d\phi^2} \to -\infty), which a physical human finger oscillating on a violin fingerboard cannot do.

• A Sine wave is C^\infty continuous. At the peak \phi = 0.5, the first derivative \frac{dW}{d\phi} = \pi \sin(\pi) = 0, meaning the pitch glides smoothly to a brief stop at the top of the vibrato excursion before accelerating downward.

• In cinematography and robotics, even C^1 continuity (matching velocity at keyframes) is sometimes insufficient if the second derivative (acceleration) jumps instantaneously at a splice point, causing a spike in the third derivative (j(t) = \frac{d^3P}{dt^3}). Ensuring C^2 continuity across keyframe junctions eliminates mechanical jerk in camera rigs for the exact same mathematical reason that smooth sinusoidal modulation eliminates spectral harshness in frequency modulation (FM) synthesis.

In modular synthesis, patching one LFO to modulate the frequency (f_{\text{LFO}}) or amplitude (D) of a second LFO is standard practice:

This compound function produces complex, non-repeating quasi-periodic motion from just two simple trigonometric generators. When an animator adopts this synthesizer mindset inside Blender or After Effects, they stop hand-placing dozens of individual keyframes to simulate camera shake, flickering firelight, or ocean buoyancy. Instead, they stack two procedural F-Curve Sine modifiers at prime or irrational frequency ratios (such as f_1 = 1.0\text{ Hz} and f_2 = \sqrt{2}\text{ Hz} \approx 1.414\text{ Hz}) and animate only the macro amplitude envelope via two master keyframes.

Conversely, when a music producer thinks like an animator using Elastic Overshoot (f(u) > 1) on a bouncing ball, they apply that exact overshoot curve to the pitch envelope of a synthesized kick drum or brass lead. By driving the pitch briefly above the target fundamental frequency before decaying into the sustain plateau, the producer injects a sharp, physical transient spike that cuts through a dense mix. Whether rendered as photons on an OLED display or acoustic pressure waves from a studio monitor, the underlying calculus remains invariant.