Holmér Solves Bézier Velocity Skew With Arc-Length Lookup Tables
Freya Holmér
Because cubic Bézier curves lack a closed-form arc-length integral, developers must remap parameter values through numerical lookup tables to prevent objects from bunching and stretching during animation.
AI-assisted summary of The Beauty of Bézier Curves — original source. Check the original for full context.
Source published:
Key ideas
- Bézier curves can be evaluated either geometrically using De Casteljau's algorithm through nested linear interpolations, or algebraically as a weighted sum of control points using Bernstein polynomials. (3:57)
- Every derivative of an n-degree Bézier curve yields another Bézier curve of degree n-1, enabling analytical calculation of velocity, tangents, normals, acceleration, and curvature. (6:18)
- Tight axis-aligned bounding boxes can be computed analytically by finding the roots of the first derivative component polynomials via the quadratic formula, avoiding naive overestimations. (11:05)
- Cubic Bézier curves lack a closed-form symbolic solution for arc length due to an underlying elliptic integral, necessitating numerical approximations such as lookup-table arc-length parameterization for constant-speed animation. (14:03)
Detailed notes
## Background Published on YouTube by game developer and educator Freya Holmér on August 19, 2021, The Beauty of Bézier Curves explores the geometric foundations and practical mechanics of Bézier curves. The presentation demystifies how these curves operate behind the scenes in animation, procedural mesh generation, and vector art, utilizing custom procedural tools built in Unity with Holmér's Shapes and Mathfs libraries.
## TL;DR Freya Holmér deconstructs Bézier curves starting from basic linear interpolation (lerp), scaling from quadratic to cubic curves via De Casteljau's algorithm and the Bernstein polynomial formulation. She illustrates how successive derivatives define velocity, acceleration, and curvature, which establish dynamic coordinate frames and osculating circles for geometry extrusion. The breakdown also covers calculating exact, tight bounding boxes by solving derivative quadratic roots, before tackling the lack of a closed-form arc length solution through numerical arc length parameterization lookup tables for uniform motion.
## Atmosphere & style The presentation blends rigorous mathematical analysis with a warm, conversational, and visually mesmerizing aesthetic driven by crisp real-time vector graphics. Holmér guides the audience with infectious curiosity, effortlessly balancing technical calculus with self-deprecating humor about mathematical 'sadness and despair.' The experience feels intimate and intellectually satisfying, culminating in a charming late-night sign-off featuring her persistent cat demanding bedtime.
## Bulletin - [03:57](https://www.youtube.com/watch?v=aVwxzDHniEw&t=237s) Bézier curves can be evaluated either geometrically using De Casteljau's algorithm through nested linear interpolations, or algebraically as a weighted sum of control points using Bernstein polynomials. - [06:18](https://www.youtube.com/watch?v=aVwxzDHniEw&t=378s) Every derivative of an n-degree Bézier curve yields another Bézier curve of degree n-1, enabling analytical calculation of velocity, tangents, normals, acceleration, and curvature. - [11:05](https://www.youtube.com/watch?v=aVwxzDHniEw&t=665s) Tight axis-aligned bounding boxes can be computed analytically by finding the roots of the first derivative component polynomials via the quadratic formula, avoiding naive overestimations. - [14:03](https://www.youtube.com/watch?v=aVwxzDHniEw&t=843s) Cubic Bézier curves lack a closed-form symbolic solution for arc length due to an underlying elliptic integral, necessitating numerical approximations such as lookup-table arc-length parameterization for constant-speed animation.
## Key takeaways - [01:06](https://www.youtube.com/watch?v=aVwxzDHniEw&t=66s) Bézier curves provide an elegant, computationally efficient mechanism to define paths for camera fly-throughs, physics-based tracks, and dynamic procedural mesh extrusions. - [01:56](https://www.youtube.com/watch?v=aVwxzDHniEw&t=116s) Linear interpolation (lerp) forms the foundational building block for constructing quadratic and cubic Bézier curves through nested stages of parameterization. - [03:57](https://www.youtube.com/watch?v=aVwxzDHniEw&t=237s) De Casteljau's algorithm evaluates points on a curve through iterative lerps, offering high numerical stability and geometric simplicity. - [04:25](https://www.youtube.com/watch?v=aVwxzDHniEw&t=265s) The algebraic Bernstein polynomial form represents the curve as an affine combination of control points whose blending weights partition unity at every point along t. - [06:18](https://www.youtube.com/watch?v=aVwxzDHniEw&t=378s) Differentiating an n-degree Bézier curve always produces another Bézier curve of degree n-1, turning differentiation into a systematic reduction in polynomial degree. - [07:31](https://www.youtube.com/watch?v=aVwxzDHniEw&t=451s) The first derivative represents the instantaneous velocity along the curve, which normalizes to the unit tangent vector and rotates 90 degrees to form the curve normal. - [08:01](https://www.youtube.com/watch?v=aVwxzDHniEw&t=481s) Higher derivatives yield acceleration (linear Bézier) and jerk (a constant 2D vector for cubic curves), which combine to define the signed curvature of the path. - [09:07](https://www.youtube.com/watch?v=aVwxzDHniEw&t=547s) Curvature reflects the inverse radius of the local osculating circle, dropping to zero at straight paths or inflection points where the circle's radius expands to infinity. - [11:05](https://www.youtube.com/watch?v=aVwxzDHniEw&t=665s) Naive bounding boxes using control points frequently overestimate curve extents, wasting performance in spatial queries and collision checks. - [13:18](https://www.youtube.com/watch?v=aVwxzDHniEw&t=798s) Exact bounding boxes are determined analytically by solving for the roots where component derivatives X'(t) and Y'(t) cross zero, and testing valid roots alongside endpoints. - [14:03](https://www.youtube.com/watch?v=aVwxzDHniEw&t=843s) Cubic Bézier arc length requires evaluating an elliptic integral with no closed-form solution, making numerical approximation necessary for calculating physical travel distance. - [15:07](https://www.youtube.com/watch?v=aVwxzDHniEw&t=907s) Uniform sampling in parameter space t results in non-uniform physical motion because the magnitude of the velocity vector fluctuates along the curve. - [16:07](https://www.youtube.com/watch?v=aVwxzDHniEw&t=967s) Arc length parameterization using precomputed lookup tables and linear interpolation enables constant-speed traversal and equally spaced point distribution. - [19:13](https://www.youtube.com/watch?v=aVwxzDHniEw&t=1153s) Despite mathematical quirks like non-uniform parameterization, Bézier curves remain highly practical and serve as an entry point into broader spline formulations.
## Detailed walkthrough ### [00:00](https://www.youtube.com/watch?v=aVwxzDHniEw&t=0s) Introduction to Curves and Splines
Before discovering Bézier curves and splines, Freya Holmér’s concept of a mathematical curve was fairly basic—limited mostly to the standard parabola $y = x^2 - 1$ or a simple circular arc. Complex curves capable of turning in arbitrary directions, performing loops, and smoothly navigating multidimensional space seemed mysterious. Once the underlying construction of these curves is unraveled, however, linking them together into continuous splines feels entirely natural. As Freya explains, “They let you define a path in a way that is computationally very elegant.”
Understanding their core geometry unlocks a wide range of analytical tools. Tangent and normal vectors along the curve allow developers to orient objects along a trajectory or construct local coordinate frames at any point, providing the foundational mathematics needed to generate procedural geometry. Further analysis reveals how curves turn, their rate of rotation via the radius of curvature, and analytical methods to calculate their exact bounding boxes for collision detection and culling optimizations.
- **Analytical properties**: Tangents and normals establish moving local coordinate spaces at any point along the path. - **Curvature metrics**: Curvature radius determines the turning rate and direction of the path. - **Performance benefits**: Analytical bounding boxes enable high-performance spatial partitioning, culling, and intersection tests.
---
[01:06](https://www.youtube.com/watch?v=aVwxzDHniEw&t=66s) Ubiquitous Use Cases: Animation and Game Worlds
Splines and Bézier curves are foundational across real-time graphics and game development. Virtually every smooth camera fly-through or automated object movement relies directly on splines. Highlighting their dominance in 3D motion, Freya remarks, “You'd be hard-pressed to find any animations such as this camera moving along a path that are *not* based on splines.” Beyond motion, curves serve as the structural backbone for procedurally extruded 3D meshes, such as rollercoasters whose tracks can be dynamically bent, twisted, and extended by manipulating spline nodes.
Freya also highlights her own physics-based racing game, *Flowstorm*, where the smooth tracks that players slide across are constructed entirely out of connected Bézier segments. The built-in level editor exposes curve handles that mirror the familiar control points found in vector design software like Adobe Photoshop's pen tool, demonstrating how mathematical curve formulations translate directly into tactile artist interfaces.
- **Camera paths**: Smooth parametric interpolation drives cinematic animations and fly-throughs. - **Mesh generation**: Dynamic procedural geometry (such as roads, pipes, and rollercoaster rails) is extruded along spline paths. - **Game mechanics**: *Flowstorm* uses connected Bézier curves to build smooth sliding tracks for gameplay. - **Authoring tools**: Handle-based manipulation in level editors mirrors vector art conventions like Photoshop’s pen tool.
---
[01:56](https://www.youtube.com/watch?v=aVwxzDHniEw&t=116s) Constructing Bézier Curves via Lerp
The construction of a Bézier curve begins with the simplest building block in computer graphics: linear interpolation, or *lerp*. Given two endpoints, $P_0$ and $P_1$, connected by a straight line, any intermediate point $P$ can be parameterized by a scalar value $t$ ranging from $0$ to $1$, analogous to a completion percentage. At $t = 0$, the point sits exactly at $P_0$; at $t = 1$, it reaches $P_1$; and intermediate values represent a linear blend expressed mathematically as $(1 - t)P_0 + tP_1$.
```mermaid flowchart TD accTitle: De Casteljau Evaluation for a Cubic Bézier Curve accDescr: Diagram showing how four control points reduce to a single point on a cubic curve through three stages of linear interpolation.
subgraph Inputs["Control Points"] P0["P0"] P1["P1"] P2["P2"] P3["P3"] end
subgraph Stage1["First Interpolation Stage"] L01["Lerp(P0, P1, t)"] L12["Lerp(P1, P2, t)"] L23["Lerp(P2, P3, t)"] end
subgraph Stage2["Second Interpolation Stage"] Q0["Lerp(L01, L12, t)"] Q1["Lerp(L12, L23, t)"] end
subgraph Output["Curve Point"] C["Point on Cubic Curve: Lerp(Q0, Q1, t)"] end
P0 --> L01 P1 --> L01 P1 --> L12 P2 --> L12 P2 --> L23 P3 --> L23
L01 --> Q0 L12 --> Q0 L12 --> Q1 L23 --> Q1
Q0 --> C Q1 --> C ```
When a third control point is introduced, forming two line segments ($P_0P_1$ and $P_1P_2$), two separate points can be interpolated simultaneously using that same parameter $t$. Connecting those two interpolated points with a new segment and interpolating along *that* line using $t$ causes the resulting point to trace a smooth parabolic arc—a quadratic Bézier curve. Adding a fourth control point extends this hierarchy one step further: three initial lerps connect into two segments, which lerp into one final segment, yielding the cubic Bézier curve. Freya emphasizes the universal nature of this geometric system: “what's beautiful about this construction is that it works no matter what points we use.”
- **Linear interpolation (Lerp)**: $P(t) = (1 - t)P_0 + tP_1$, where $t \in [0, 1]$. - **Quadratic Bézier**: Formed by three control points via two parallel lerps chained into a third lerp. - **Cubic Bézier**: Formed by four control points via three sequential lerp stages (3 points $\to$ 2 points $\to$ 1 point). - **Flexibility**: The construction preserves smoothness regardless of how the control points are moved or transformed.
---
[03:57](https://www.youtube.com/watch?v=aVwxzDHniEw&t=237s) De Casteljau's Algorithm and the Bernstein Polynomial Form
The iterative, nested-lerp evaluation of Bézier points is formally known as De Casteljau’s algorithm. Freya champions this formulation for its clean computational properties: “I personally love it because of its numerical stability and just how easy it is to remember it's just lerps all the way down.” However, writing out the nested algebra and expanding the formula reveals an alternative interpretation. When fully multiplied out and grouped by control points, the curve can be rewritten as a weighted sum of the control point position vectors.
In this algebraic arrangement, each control point vector from the origin is scaled by a corresponding polynomial function of $t$. For a cubic Bézier curve, these four blending functions are the cubic Bernstein polynomials: - $B_0(t) = (1 - t)^3$ - $B_1(t) = 3(1 - t)^2 t$ - $B_2(t) = 3(1 - t) t^2$ - $B_3(t) = t^3$
At $t = 0$, the first weight is $1$ and all others are $0$. As $t$ advances, weight smoothly transitions across the intermediate points until $t = 1$, where the final control point has a weight of $1$. Because these weights always sum to exactly $1$ at any value of $t$, the formula is an affine combination—a weighted sum—that traces the identical spatial curve produced by the nested geometric lerps.
- **De Casteljau’s algorithm**: Evaluates points via successive geometric linear interpolations, minimizing floating-point precision loss. - **Bernstein polynomial form**: Expresses curve positions as an explicit sum $P(t) = \sum_{i=0}^{n} B_i(t) P_i$. - **Partition of unity**: The polynomial weights sum to $1$ for any $t \in [0, 1]$, ensuring affine invariance and scale-independent behavior.
---
[06:18](https://www.youtube.com/watch?v=aVwxzDHniEw&t=378s) Derivatives of Bézier Curves: Velocity, Tangents, and Normals
Because the Bernstein polynomial formulation treats the control points as constant vectors, differentiating the curve with respect to $t$ simply requires taking the standard derivative of each polynomial term. The resulting first derivative represents the instantaneous rate of change—the velocity vector—along the curve at a given $t$. To make the visualizations clear on screen, Freya jokes about decluttering the geometric display: “and for clarity let's just absolutely demolish the middle line it's getting in the way, and quite often it's not displayed whenever you see splines anyway.”
A fundamental mathematical elegance emerges from this differentiation: “The derivative of a bézier curve is always another bézier curve of one degree lower.” Thus, the derivative of a cubic Bézier curve is itself a quadratic Bézier curve whose control points are determined by the differences of the original points.
```mermaid flowchart LR accTitle: Bézier Derivative Cascade accDescr: Diagram illustrating how differentiating a cubic Bézier curve reduces its degree by one at each successive derivative step.
Cubic["Cubic Bézier (Position)\nDegree 3"] Quad["Quadratic Bézier (Velocity / 1st Deriv)\nDegree 2"] Linear["Linear Bézier / Lerp (Acceleration / 2nd Deriv)\nDegree 1"] Constant["Constant 2D Vector (Jerk / 3rd Deriv)\nDegree 0"]
Cubic -->|"d/dt"| Quad Quad -->|"d/dt"| Linear Linear -->|"d/dt"| Constant ```
This velocity vector points in the tangent direction of the curve. Normalizing this vector produces a unit tangent vector, and rotating it $90^\circ$ yields the 2D curve normal. Together, tangent and normal vectors form a dynamic, moving coordinate frame along the curve, which is critical for generating procedural meshes such as road surfaces, curbs, and extrusion profiles that must track path orientation.
- **Degree reduction rule**: Every derivative of an $n$-degree Bézier curve produces an $(n-1)$-degree Bézier curve. - **Velocity vector**: $P'(t)$ defines the instantaneous trajectory and speed along the path. - **Unit tangent**: $\hat{T}(t) = \frac{P'(t)}{\|P'(t)\|}$. - **Normal vector**: Obtained by rotating $\hat{T}(t)$ by $90^\circ$, enabling procedural 3D surface extrusions and lane offsets.
---
[08:01](https://www.youtube.com/watch?v=aVwxzDHniEw&t=481s) Higher Derivatives: Acceleration, Jerk, and Curvature
Continuing to differentiate reveals the higher-order physical properties of the curve. If the first derivative corresponds to velocity, the second derivative represents acceleration—the rate of change of the velocity vector. Because differentiation reduces the curve's degree by one, the acceleration of a cubic curve is a linear Bézier curve, which is simply a single lerp between two points. Taking the third derivative yields jerk (or jolt), representing the rate of change of acceleration. For a cubic curve, jerk drops to a degree-zero curve: a single, stationary 2D vector constant. Animating $t$ from $0$ to $1$ shows each vector pulling on the lower-order terms through the curve's traversal.
Dismissing jerk from further calculation—“(not this jerk let's remove it)”—Freya combines velocity and acceleration to define curvature. She emphasizes the generality of this relationship: “Curvature can be expressed with a surprisingly simple formula not just for bézier curves but for any parametric curves like this.” Curvature, denoted by $\kappa$ (kappa), measures how sharply a curve turns at any point:
$$\kappa = \frac{\det(P'(t), P''(t))}{\|P'(t)\|^3} = \frac{x'y'' - y'x''}{(x'^2 + y'^2)^{3/2}}$$
Curvature can be interpreted in units of radians per meter or as the reciprocal of the radius ($r = \frac{1}{\kappa}$) of the curve's *osculating circle* (the circle that best fits the curve locally). When curvature is zero, the path is completely straight and the osculating circle's radius expands to infinity. Where curvature changes sign (passing through zero from positive to negative), the curve hits an *inflection point*. At inflection points, the osculating circle is mathematically undefined due to division by zero, as no finite circle can match a straight line.
- **Second derivative ($P''$)**: Acceleration vector, represented geometrically by a linear Bézier segment. - **Third derivative ($P'''$)**: Jerk or jolt, which is a fixed 2D vector constant for any cubic Bézier. - **Curvature formula**: $\kappa = \frac{\det(v, a)}{\|v\|^3}$, providing a signed measurement of turning sharpness. - **Osculating circle**: Radius $r = \frac{1}{|\kappa|}$; its center lies along the normal line at that point. - **Inflection point**: A location where $\kappa = 0$ as the curve transitions between clockwise and counterclockwise winding.
---
[11:05](https://www.youtube.com/watch?v=aVwxzDHniEw&t=665s) Calculating Tight Bounding Boxes
An essential practical application of Bézier derivatives is calculating an exact, tight axis-aligned bounding box (AABB). Bounding boxes are ubiquitous in game engines for broad-phase collision detection, culling invisible geometry, and accelerating raycasts. Testing an intersection between a line and an exact cubic curve is computationally demanding, so engines first check whether the line intersects the curve's bounding box.
A naive bounding box can be quickly formed by simply taking the minimum and maximum coordinates of the four control points. However, Freya points out why this approximation often falls short: “This can be good enough, but what we really want is the tight bounding box.” The difference between the naive control polygon bounds and the true envelope of the curve can be substantial, resulting in wasted computation during intersection tests.
To find the true extents, the 2D curve $P(t) = (X(t), Y(t))$ is decomposed into independent 1D scalar functions for $X$ and $Y$. The boundary of the tight box must touch the curve at its local extrema, which occur precisely where the coordinate derivatives equal zero ($X'(t) = 0$ and $Y'(t) = 0$). By taking the derivative polynomials and rearranging their coefficients in terms of $t$, each component yields a standard quadratic equation:
$$a t^2 + b t + c = 0$$
Applying the quadratic formula produces up to four candidate roots: two for $X$ and two for $Y$. Any root that yields a negative discriminant is discarded as non-real, prompting the tongue-in-cheek reminder: “(those t-values aren't real, ignore them).” Similarly, real roots that fall outside the valid parameter range $[0, 1]$ are thrown out. Evaluating the curve at the remaining valid roots alongside the mandatory start and end endpoints ($t = 0$ and $t = 1$) yields the exact minimal and maximal coordinates required to assemble the tightest possible bounding box.
- **Bounding box utility**: Skips expensive curve-ray intersection calculations if the ray misses the bounding volume. - **Naive vs. tight bounds**: Control point envelopes are fast to compute but frequently overestimate curve bounds by large margins. - **Extrema isolation**: Splitting $P(t)$ into $X(t)$ and $Y(t)$ identifies local extrema where component derivatives cross zero. - **Root solving**: Differentiating cubic components produces quadratic equations, solved directly with the standard quadratic formula. - **Candidate pruning**: Roots with negative discriminants or values outside $t \in [0, 1]$ are discarded; valid roots and the endpoints $t \in \{0, 1\}$ define the true bounding box.
[13:18](https://www.youtube.com/watch?v=aVwxzDHniEw&t=798s) Analytically Finding the Bounding Box
Freya Holmér shows that the analytic bounding box of a cubic Bézier curve is found where the quadratic first derivative curve crosses the $X$ and $Y$ axes. As the shape of the cubic curve is manipulated, the derivative curve shifts correspondingly, directly exposing how the extrema along each axis move. Observing where these coordinate components equal zero provides the exact parameter values $t$ where the curve reaches its maximum and minimum bounds, allowing the tight bounding box to be resolved analytically.
```mermaid flowchart LR accTitle: Analytic Bounding Box Calculation accDescr: Process of deriving bounding box bounds by finding the roots of the first derivative. A["Cubic Bézier Curve"] --> B["Quadratic 1st Derivative"] B --> C{"Crosses X or Y axis?"} C -->|"Solve Roots"| D["Extrema Points"] D --> E["Tight Analytic Bounding Box"] ```
---
[14:03](https://www.youtube.com/watch?v=aVwxzDHniEw&t=843s) Arc Length: Sadness and Despair
Up to this stage in the analysis, curve evaluation relies entirely on parameter values: a scalar $t$ ranging from $0$ to $1$ defining position along the path. However, this parameterization ignores physical motion: how far has a point actually traveled, and what is the total arc length of the curve? Holmér points out that this is where Bézier curves lose their elegance: “Unfortunately, this is where bézier curves are less beautiful because there is no closed form solution to the length of a cubic bézier curve.”
Evaluating the curve length requires computing an elliptic integral, an operation she cheerfully summarizes as “sadness and despair.” Because an exact symbolic integral does not exist, the arc length must be approximated numerically. The most straightforward approach is sampling: subdividing the continuous curve into a series of discrete linear segments and summing their individual lengths. Increasing the sample count improves accuracy, but linearly increases the computational expense of the evaluation.
``` 1 L = ∫ || B'(t) || dt ---> No closed-form solution (elliptic integral) 0
Discrete approximation: L ≈ Σ || B(t_{i+1}) - B(t_i) || ```
---
[15:07](https://www.youtube.com/watch?v=aVwxzDHniEw&t=907s) Arc Length Parameterization and Velocity
A common operational requirement is sampling a curve by travel distance rather than an arbitrary $t$-value. Dividing a target distance by total arc length yields an initial scalar estimate. However, naively treating this ratio as a parameter value causes immediate visual failure: placing a series of dots along the curve reveals that they bunch up and stretch apart as control points are moved. Rather than maintaining uniform spacing, the dots drift at wildly different speeds across the curve.
This discrepancy arises because equally spaced values of $t$ do not correspond to equally spaced physical distances along a Bézier curve. The underlying mechanics are revealed by the first derivative, which represents the velocity vector of a point traversing the curve:
“If our points moved at different speeds along the curve, it means the magnitude of the derivative is not constant.”
When a curve's derivative plot traces out a near-circular path, speed remains relatively constant. But in typical configurations, the derivative's magnitude varies substantially, destroying uniform spacing and causing severe velocity distortion during animation.
```mermaid flowchart TD accTitle: Arc Length Parameterization via Lookup Table accDescr: Pipeline showing conversion from target distance to t parameter using a LUT. subgraph Offline["Table Generation"] S["Subdivide Curve"] --> LUT["Lookup Table: Distance vs t"] end subgraph Runtime["Runtime Query"] D["Target Distance"] --> Interp["Interpolate Neighboring Samples"] LUT -.-> Interp Interp --> T["Normalized t-Value"] T --> Eval["B(t) Point Evaluation"] end ```
To solve this non-uniformity without an analytical integral, Holmér demonstrates an approximate technique known as *Arc Length Parameterization*:
- **Lookup Table Generation**: The curve is subdivided into discrete steps to precalculate and store the cumulative arc length associated with each sampled $t$-value. - **Root Finding Approximation**: When queried with an arbitrary target distance, the lookup table finds the adjacent sample boundaries and linearly interpolates the correct $t$-value, effectively approximating the root of a complex polynomial. - **Implementation**: Holmér shares a snippet of her own C# code, which stores an array of distance samples and returns a normalized $[0, 1]$ parameter representing the remapped position. - **Uniform Results**: Switching from uniform $t$-stepping to arc-length-parameterized distance stepping restores equal visual spacing between dots and produces smooth, constant-speed animations along the path.
---
[19:13](https://www.youtube.com/watch?v=aVwxzDHniEw&t=1153s) The Spline Universe and Outro
While Bézier curves feature mathematical quirks and require numerical approximations for physical measurements like arc length, Holmér emphasizes their practical utility: “as you can see, bézier curves are sometimes a little messy but with the simplicity of their construction and the flexibility of their uses I think they're beautiful, despite their flaws~” Approximations remain more than sufficient for high-end production tasks, such as sweeping a cinematic camera smoothly through complex video game environments.
Holmér reveals that she even leveraged 3D Bézier curves embedded directly inside RGB color space earlier in the video to smoothly interpolate the colors of the control points. She concludes the technical portion by observing that Bézier curves are merely an entry point into a vast domain: “There's a whole cinematic universe of splines.”
---
[20:05](https://www.youtube.com/watch?v=aVwxzDHniEw&t=1205s) Production Notes, Tooling, and Late-Night Interruption
Wrapping up the video, Holmér reflects on the project's scale, noting that it was the longest project she had ever produced. She gives heartfelt credit to the people who made the project possible:
- **Grant Sanderson (3Blue1Brown)**: For providing the core push to create long-form educational math videos instead of brief Twitter animated clips: “it's absolutely insane that I can like see 3Blue1Brown be like, hey wouldn't it be neat if people made math videos? And then I can just dedicate like a month to doing that and that's exactly what I did”. - **Jazz Mickle**: For composing the original music used throughout the video. - **Patreon Backers**: For funding her work and granting her the creative freedom to spend an entire month building procedural math visualizers.
Holmér explains that her YouTube channel has historically been an eccentric mix of improvisational game development, recorded *Dungeons & Dragons* sessions, and legacy game archives, making audience expectations unpredictable; she invites viewers to comment on whether they want deeper dives into B-splines and broader spline mathematics.
She also outlines the technical pipeline used to build and render the video: - **Unity**: Used as the core animation engine via code-driven procedural scripts and a custom timeline tool. - **Mathfs**: Holmér's custom open-source math library, used for Bézier curve evaluation and numeric range remapping. - **Shapes**: Holmér's proprietary vector graphics plugin for Unity, used to draw all vector curves, axes, and indicators in real time. - **DaVinci Resolve**: Used for final editing after exporting raw animations via a custom PNG sequence screenshot recorder. - **Twitch**: Where much of the development was live-streamed.
At 2:00 AM, as the recording wraps, Holmér is interrupted by her cat Thor demanding attention and begging for bedtime with subtitled meows (`[mom] [pls] [bed pls] [now!!] [im tired]`), prompting her to laugh, promise him she is going to bed, and sign off.
## Notable quotes > [06:18](https://www.youtube.com/watch?v=aVwxzDHniEw&t=378s) The derivative of a bézier curve is always another bézier curve of one degree lower. — Freya Holmér
> [19:13](https://www.youtube.com/watch?v=aVwxzDHniEw&t=1153s) bézier curves are sometimes a little messy but with the simplicity of their construction and the flexibility of their uses I think they're beautiful, despite their flaws~ — Freya Holmér
## Mentioned Freya Holmér, Flowstorm, Adobe Photoshop, Pierre Bézier, Paul de Casteljau, Grant Sanderson (3Blue1Brown), Jazz Mickle, Pomax, Thor the cat, Unity, Shapes, Mathfs, DaVinci Resolve, Twitch, Patreon
## Video description Bézier curves - how do they do?
They're used for animation, text rendering, and all sorts of curved shapes! But how do they actually work? well, like, that's what the video is about, so, watch it to find out etc!!
• Lots of love to 💛 Jazz "queenjazz" Mickle for making the music ❱ https://queenjazz.bandcamp.com/ 💙 Grant "3Blue1Brown" Sanderson for pushing me to finally do this ❱ https://youtube.com/3blue1brown 🐦 Pomax for their wonderful writeup on Bézier curves ❱ https://pomax.github.io/bezierinfo 🐈 Thor the cat for.. hanging out.. when I was trying to record audio with no interruptions 🇫🇷 French subtitles by @damqui on Twitter
• How was this video made? 🔨 Created in the Unity game engine ⭕ Using Shapes, my vector graphics plugin ❱ https://u3d.as/1W37 📈 Using Mathfs, my math library ❱ https://github.com/FreyaHolmer/Mathfs ...along with a bunch of hacky, partially broken, procedural animation tools I made specifically for this video
• Did you know that "osculating" isn't pronounced that way? ✅ yes I do now in fact please stop commenting on it ;-; ❱ https://twitter.com/FreyaHolmer/status/1429472399389507591
• Links 💖 Patreon ❱ https://www.patreon.com/acegikmo 🐦 Twitter ❱ https://twitter.com/FreyaHolmer 📺 Twitch ❱ https://www.twitch.tv/acegikmo 💬 Discord ❱ https://discord.gg/v5VWuga 🌸 Instagram ❱ https://instagram.com/freya_holmer
00:00 Intro 01:06 Use Cases of Bézier Curves 01:56 Lerp 02:34 Quadratic Béziers 03:07 Cubic Béziers 03:57 De Casteljau's Algorithm 04:25 Bernstein Polynomial Form 06:18 1st Derivative (Velocity) 07:31 Tangents & Normals 08:03 2nd Derivative (Acceleration) 08:31 3rd Derivative (Jerk/Jolt) 09:07 Curvature 11:05 Bounding Box 14:14 Arc Length 15:07 Arc Length Parameterization & Uniform Animation 19:13 Outro 19:54 Credits 23:57 Thor helping me record this at 2am
[Source](https://www.youtube.com/watch?v=aVwxzDHniEw)