Lecture IV Bézier Curves

Why Curves?

Why Curves? Linear (flat) Curved Easier More pieces Looks ugly Complicated Fewer pieces Looks smooth

What is a curve? Intuitively: what you can draw with a pen without lifting it up Mathematically: image of a continuous mapping of an interval into the plane (or higher-d space) [ ] 7

Types of curves Normal (two endpoints) Closed loops (no endpoints) Infinite curves (no endpoints) 8

More curves Curves may self-intersect, have sharp corners, trace back on themselves, Well-known curves: line segment, line, circle, ellipse, square (boundary), parabola, circular arc, General curves are called free-form curves 9

Curve Representations Implicit Defined as zero set of a function Parameterised Defined as image of a function

Blending functions I want to create a curve that follows a sequence of points

Blending functions I want to create a curve that smoothly follows a sequence of points

Interpolation vs. approximation Interpolation means passing through given points, approximation means getting close to given points and are interpolated and are approximated

Blending functions Blending functions (or basis functions) specify how to mix the control points Let b be a vector of blending functions b i : R R f(t) = Σ i b i (t)p i Σ i b i (t) = 1 b i (t) specifies how much p i weighs at time t

Blending functions A piecewise-linear curve (polygonal line) can be defined using blending functions 1 b 1 (u) b 0 (u) b ( u) 2 0 2u 1 0 u 0.5 0.5 u 1 0 1 0.5 u f( u) b u 0( u) p0 b1 ( u) p1 b2 ( ) p2

Blending functions 0 1 0.5 u 1 2 2 2u u u b ) ( 2 0 2 3 1 u u u b ) ( 2 1 4 4 u u u b ) ( 2 2 1 2 0 2 2 4 4 2 3 1 p p p ) ( ) ( ) ( u u u u u u

Bernstein Polynomials

Bezier curves A Bezier curve uses Bernstein polynomials as blending functions A degree-d Bezier curve has d+1 control points It passes through the first and last control point, and approximates the d 1 other control points Cubic (degree-3) Bezier curves are most common; several of these are connected into one curve 20

Bezier curves Cubic Bezier curves are used for font definitions They are also used in Adobe Illustrator and many other illustration/drawing programs 21

Bezier curves Parameter u, first control point at u=0 and last control point p d at u=1 Derivative at is the vector, scaled by d Derivative at p d is the vector p d-1 p d, scaled by d Second, third,, derivatives at depend on the first three, four,, control points 22

Cubic Bezier curve example 3 3

Quintic Bezier curve example 5 p 4 p 5 p p4 p5 0 5 p 4 p 5

Bezier curves degrees 2 (left) up to 6 (right) 25

Properties of Bezier curves The Bezier curve is bounded by the convex hull of the control points intersection tests with a Bezier curve can be avoided if there is no intersection with the convex hull of the control points

Properties of Bezier curves Any line intersects the Bezier curve at most as often as that line intersects the polygonal lie through the control points (variation diminishing property) 27

Properties of Bezier curves A Bezier curve is symmetric: reversing the control points yields the same curve, parameterized in reverse p 4 p 5 p 4 p5 28

Properties of Bezier curves A Bezier curve is affine invariant: the Bezier curve of the control points after an affine transformation is the same as the affine transformation applied to the Bezier curve itself (affine transformations: translation, rotation, scaling, skewing/shearing) p 4 p 4 p 5 p 5 29

Properties of Bezier curves There are simple algorithms for Bezier curves evaluating subdividing a Bezier curve into two Bezier curves allows computing intersections of Bezier curves p( u) d k 0 C( d, k) u k (1 u) d k p k the point at parameter value u on the Bezier curve 30

Intuition for Bezier curves Keep on cutting corners to make a smoother curve In the limit, the curve becomes smooth 31

Intuition for Bezier curves Suppose we have three control points,, ; a linear connection gives two edges Take the middle of, and the middle p 4 of and place p 1 in the middle of and p 4 Recurse on,, p 1 and also on p 1, p 4, p 1 p4 p 1 gives a quadratic Bezier curve 32

De Casteljau algorithm Generalization of the subdivision scheme just presented; it works for any degree Given points,,, p d Choose the value of u where you want to evaluate Determine the u-interpolation for, for,, and for p d-1 p d, giving d 1 points If one point remains, we found f(u), otherwise repeat the previous step with these d 1 points 33

De Casteljau algorithm u = 1/3 34

De Casteljau algorithm u = 1/3 35

De Casteljau algorithm u = 1/3 36

De Casteljau algorithm u = 1/3 one point remains, the point on the curve at u = 1/3 37

Splitting a Bezier curve The De Casteljau algorithm can be used to split a Bezier curve into two Bezier curves that together are the original Bezier curve r 1 q r 0 q 3 2 r 2 q 1 r 3 q 0 38

Splitting a Bezier curve Splitting a Bezier curve is useful to find line-bezier or Bezier-Bezier intersections u = ½ 39

Intersecting a Bezier curve To test if some line L intersects a Bezier curve with control points,,, p d, test whether L intersects the poly-line,,, p d If not, L does not intersect the Bezier curve either Otherwise, split the Bezier curve (with u = ½ ) and repeat on the two pieces 40

Intersecting a Bezier curve If the line L separates the two endpoints of a Bezier curve, then they intersect Repeating the split happens often only if the line L is nearly tangent to the Bezier curve 41

Intersecting a Bezier curve When determining intersection of a line segment and a Bezier curve we must make some small changes 43

Splitting a Bezier curve for rendering Splitting a Bezier curve several times makes the new Bezier curve pieces be closer and closer to their control polygons At some moment we can draw the sequence of control polygons of the pieces and these will approximate the Bezier curve well (technically this approximation is only C 0 ) 44

Splitting a Bezier curve for rendering u = ½ 45

Splitting a Bezier curve for rendering 46

Splitting a Bezier curve for rendering 47

Splitting a Bezier curve for rendering 48

Splitting a Bezier curve for rendering 49

Splitting a Bezier curve for rendering 50

Splitting a Bezier curve for rendering u = 1/4 u = 1/2 u = 3/4 51

Splitting a Bezier curve for rendering u = 1/4 u = 1/2 u = 3/4 52

Splitting a Bezier curve for rendering u = 1/4 u = 1/2 u = 3/4 53

Splitting a Bezier curve for rendering 54

3D Bezier surfaces The 16 blending functions for cubic Bezier surfaces 55

Summary Bezier curves are elegant curves that pass through the start and end points and approximate the points in between They exist of any order (degree) but cubic is most common and useful Continuity between consecutive curves can be ensured The De Casteljau algorithm is a simple way to evaluate or split a Bezier curve 56