Bezier Curves
Parametric curves for computer graphics.
Bezier Curves
Concept Overview
A Bézier curve is a parametric curve used in computer graphics and related fields. These curves are defined by a set of control points: two endpoints and an arbitrary number of intermediate points. Unlike drawing a rigid line from point A to point B, Bézier curves use the intermediate points as "magnets" to pull the curve in specific directions, creating smooth, scalable shapes that are mathematically precise.
Mathematical Definition
A Bézier curve of degree n is defined by n + 1 control points P0, P1, ..., Pn. It is evaluated using the Bernstein polynomials. For a parameter t that ranges from 0 to 1, the curve B(t) is given by:
The interactive visualization demonstrates a Cubic Bézier Curve, which has 4 control points (n = 3) and is defined by the specific formula:
Key Concepts
- Control Points: P0 and P3 are the start and end points of the curve. P1 and P2 act as directional guides—the curve does not pass through them but is attracted toward them.
- De Casteljau's Algorithm: A recursive method to evaluate Bézier curves. It computes the point B(t) by continuously performing linear interpolations (lerps) between adjacent control points. The interactive module shows these interpolations dynamically as the parameter t changes.
- Convex Hull Property: A Bézier curve is always completely contained within the convex hull of its control points (the smallest convex polygon enclosing the points). This property makes intersection testing and bounding box calculations highly efficient.
- Endpoint Interpolation: The curve always starts exactly at P0 (when t = 0) and ends exactly at Pn (when t = 1).
Historical Context
Bézier curves were widely publicized in 1962 by the French engineer Pierre Bézier, who used them to design automobile bodies at Renault. However, the study of these curves was first developed in 1959 by mathematician Paul de Casteljau, working at Citroën. De Casteljau invented an algorithm to evaluate the curves numerically, but his findings were kept as a corporate secret, allowing Bézier's independent work to receive the namesake credit. Both pioneers revolutionized computer-aided geometric design (CAGD).
Real-world Applications
- Computer Graphics & Vector Art: Adobe Illustrator, Figma, and Inkscape rely heavily on cubic Bézier curves (using "pen tools" and handles) to define shapes that can be scaled infinitely without losing resolution.
- Typography & Fonts: TrueType fonts use quadratic Bézier curves, while PostScript and OpenType fonts use cubic Bézier curves to define the outlines of characters smoothly at any font size.
- Animation: In CSS animations, video editing, and 3D modeling, Bézier curves control easing functions (e.g., cubic-bezier timing functions) to dictate how an object's speed changes over time.
- Pathfinding & Robotics: Generating smooth, continuous paths for CNC machines, robotic arms, and autonomous vehicles often involves spline interpolation constructed from connected Bézier segments.
Related Concepts
- Linear Interpolation (Lerp): The foundation of De Casteljau's algorithm, calculating a point traveling between two positions over time t.
- B-splines & NURBS: Generalizations of Bézier curves that provide more local control over complex shapes by linking multiple curve segments together seamlessly.
Experience it interactively
Adjust parameters, observe in real time, and build deep intuition with Riano’s interactive Bezier Curves module.
Try Bezier Curves on Riano →