Splines III – Bézier Curvesbased on:

Michael Gleicher: Curves, chapter 15 inFundamentals of Computer Graphics, 3rd ed.

(Shirley & Marschner)Slides by Marc van Kreveld

1

Interpolation vs. approximation

• Interpolation means passing through given points, approximation means getting “close” to given points

• Bézier curves and B-spline curves

p3

p2p1

p0 p3

p2p1

p0

p1 and p2 are interpolated

p1 and p2 are approximated

2

Bezier curves

• Polynomial of any degree• A degree-d Bézier 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) Bézier curves are most common;

several of these are connected into one curve

3

Bézier curves

• Cubic Bézier curves are used for font definitions• They are also used in Adobe Illustrator and many

other illustration/drawing programs

4

Bézier curves

• Parameter u, first control point p0 at u=0 and last control point pd at u=1

• Derivative at p0 is the vector p0p1 , scaled by d

• Derivative at pd is the vector pd-1pd , scaled by d

• Second, third, …, derivatives at p0 depend on the first three, four, …, control points

5

Cubic Bézier curve example

p2

p0p3

p1

p0 p1

p2 p3

p0 p1

p2 p3

3

3

6

Quintic Bézier curve example

p2

p0

p5

p1p0 p1

p4 p5

p4 p55

p0 p15

p4

p3

7

Cubic Bézier curves

• p0 = f(0) = a0 + 0 a1 + 02 a2 + 03 a3 p3 = f(1) = a0 + 1 a1 + 12 a2 + 13 a3

3(p1 – p0) = f’(0) = a1 + 20 a2 + 302 a3 3(p3 – p2) = f’(1) = a1 + 21 a2 + 312 a3

1331

0363

0033

0001

1CBbasis matrix

8

Cubic Bezier curves

• f(u) = (1 – 3u + 3u2 – u3) p0

+ ( 3u – 6u2 + 3u3) p1

+ ( 3u2 – 3u3) p2

+ ( u3) p3

• Bézier blending functions b0,3 = (1 – u)3

b1,3 = 3 u (1 – u)2

b2,3 = 3 u2 (1 – u)

b3,3 = u3

1331

0363

0033

0001

1CB

ii

ibu pf

3

03,)(

9

Bézier curves

• In general (degree d): bk,d(u) = C(d,k) uk (1 – u)d-k

where , for 0 k d

(binomial coefficients)

• The bk,d(u) are called Bernstein basis polynomials

)!(!

!),(

kdkd

kdC

10

Bézier curves

degrees 2 (left) up to 6 (right)

11

Properties of Bézier curves

• The Bézier curve is bounded by the convex hull of the control points intersection tests with a Bézier curve can be avoided if there is no intersection with the convex hull of the control points

12

Properties of Bézier curves

• Any line intersects the Bézier curve at most as often as that line intersects the polygonal lie through the control points (variation diminishing property)

13

Properties of Bézier curves

• A Bézier curve is symmetric: reversing the control points yields the same curve, parameterized in reverse

p0

p5

p1

p4

p3

p2

p0p5

p1

p4

p3 p2

14

Properties of Bézier curves

• A Bézier curve is affine invariant: the Bézier curve of the control points after an affine transformation is the same as the affine transformation applied to the Bézier curve itself (affine transformations: translation, rotation, scaling, skewing/shearing)

p0

p5

p1

p4

p3

p2

p0

p5

p1

p4

p3

p2

15

Properties of Bézier curves

• There are simple algorithms for Bézier curves– evaluating– subdividing a Bézier curve into two Bézier curves allows

computing (approximating) intersections of Bézier curves

k

d

k

kdk uukdCu pf

0

)1(),()(

the point at parameter value u on the Bézier curve

16

Bézier curves in PowerPoint

• The curve you draw in PowerPoint is a Bézier curve; however you don’t specify the intermediate two control points explicitly– Select draw curve– Draw a line segment (p0 and p3)

– Right-click; edit points– Click on first endpoint and move the appearing marker (p1)

– Click on last endpoint and move the appearing marker (p2)

17

Splines from Bézier curves

• To ensure continuity– C0 : last control point of first piece must be same as first

control point of second piece

– G1 : last two control points of first piece must align with the first two control points of the second piece

– C1 : distances must be the same as well

p0

p1 p3

p2

q0

q1

q3

q2

18

Intuition for Bézier curves

• Keep on cutting corners to make a “smoother” curve• In the limit, the curve becomes smooth

p0

p1

p2

19

Intuition for Bézier curves

• Suppose we have three control points p0 , p1 , p2;a linear connection gives two edges

• Take the middle p3 of p0p1, and the middle p4 of p1p2 and place p’1 in the middle of p3 and p4

• Recurse on p0, p3, p’1 and also on p’1 , p4, p2

p0

p1

p2

p0

p2

p’1

p3 p4

p0

p2

p’1

gives a quadratic Bézier curve 20

De Casteljau algorithm

• Generalization of the subdivision scheme just presented; it works for any degree– Given d+1 points p0, p1, …, pd

– Choose the value of u where you want to evaluate

– Determine the u-interpolation for p0 p1 , for p1 p2 , … ,

and for pd-1 pd , giving d points

– If one point remains, we found f(u), otherwise repeat the previous step with these d points (one less than before)

21

De Casteljau algorithm

p0

p1

p3

p2u = 1/3

22

De Casteljau algorithm

p0

p1

p3

p2u = 1/3

23

De Casteljau algorithm

p0

p1

p3

p2u = 1/3

24

De Casteljau algorithm

p0

p1

p3

p2u = 1/3

one point remains, the point on the curve at u = 1/3

25

Splitting a Bézier curve

• The De Casteljau algorithm can be used to split a Bezier curve into two Bézier curves that together are the original Bézier curve

p0

p1

p3

p2

q0

q1

q3q2

r0

r1

r3

r2

26

Splitting a Bézier curve

p0

p1

p3

p2

q0

q1

q3q2

r0

r1

r3

r2

Question: Recalling that Bézier splines are C1 only if (in this case) the vector q2q3 is the same as r0r1 , does this mean that the spline is no longer C1 after splitting?!?

27

Splitting a Bézier curve

p0

p1

p3

p2

q0

q1

q3q2

r0

r1

r3

r2

Answer: q0q1q2q3 parameterizes the part u [0, 1/3] and r0r1r2r3 parameterizes the part u [1/3, 1] The condition for C1 continuity, q2q3 = r0r1 , applies only for equal parameter-length parameterizations

28

Splitting a Bézier curve

• Splitting a Bézier curve is useful to find line-Bézier or Bézier-Bézier intersections

p0

p1

p3

p2

u = ½

29

Intersecting a Bézier curve

• To test if some line L intersects a Bézier curve with control points p0, p1, …, pd , test whether L intersects the poly-line p0, p1, …, pd – If not, L does not intersect the Bézier curve either– Otherwise, split

the Bézier curve (with u = ½ ) andrepeat on the two pieces

p0

p1

p3

p2

30

Intersecting a Bézier curve

• If the line L separates the two endpoints (p0 and p3 for cubic) of a Bézier curve, then they intersect

• Repeating the split happens often only if the line L is nearly tangent to the Bézier curve

p0

p1

p3

p2

31

Intersecting a Bézier curve

• If the line L separates the two endpoints (p0 and p3 for cubic) of a Bézier curve, then they intersect

• Repeating the split happens often only if the line L is nearly tangent to the Bézier curve

p0

p1

p3

p2

32

Intersecting a Bézier curve

• When determining intersection of a line segment and a Bézier curve we must make some small changes

p0

p1

p3

p2

33

Splitting a Bézier curve for rendering

• Splitting a Bézier curve several times makes the new Bézier 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 Bézier curve well (technically this approximation is only C0)

34

Splitting a Bézier curve for rendering

p0

p1

p3

p2

u = ½

35

Splitting a Bézier curve for rendering

p0

p1

p3p2p0 p1

p3

p2

36

Splitting a Bézier curve for rendering

p0

p1

p3p2p0 p1

p3

p2

37

Splitting a Bézier curve for rendering

p0

p1

p3p2p0 p1

p3

p2

38

Splitting a Bézier curve for rendering

p0

p1

p3p2p0 p1

p3

p2

39

Splitting a Bézier curve for rendering

p0

p1

p3p2p0 p1

p3

p2

40

Splitting a Bézier curve for rendering

p0

p1

p3p2p0 p1

p3

p2

u = 1/4

u = 1/2u = 3/4

41

Splitting a Bézier curve for rendering

p0

p1

p3p2p0 p1

p3

p2

u = 1/4

u = 1/2u = 3/4

42

Splitting a Bézier curve for rendering

p0

p3 p0

p3u = 1/4

u = 1/2u = 3/4

43

Splitting a Bézier curve for rendering

p0

p3

p0

p3p0

p3

p0

p3

44

De Casteljau on quadratic, cubic and quartic Bézier curves

45

3D Bézier surfaces

The 16 blending functions for cubic Bezier surfaces

46

Summary

• Bézier 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 Bézier curve

47

Questions

1. Consider figure 15.11, bottom left. It looks like a circular arc, but it is not. Determine whether the quadratic Bézier curve shown here goes around the midpoint of a circular arc or not

2. Can we ensure higher degrees of continuity than C1 with cubic Bézier splines? Discuss your answer

3. Suppose we want to define a closed Bezier curve of degree d. What properties must the control points have to make a C1 continuous curve? What is the minimum degree of the Bézier curve that is needed for this? What if we want a closed Bézier curve with an inflection point (boundary of a non-convex region)?

48

Questions

4. Apply the De Casteljau algorithm on the points (0,0), (4,0), (6,2), and (4,6) with u = ½ by drawing the construction (note that this is a cubic Bézier curve)

5. Apply the De Casteljau algorithm on the points (0,0), (4,0), (6,2), (6,8), and (10,4) with u = ½ by drawing the construction (note that this is a quartic Bézier curve)

49