1. Splines III – Bézier Curves
based on:
Michael Gleicher: Curves, chapter 15 in
Fundamentals of Computer Graphics, 3rd ed.
(Shirley & Marschner)
Slides by Marc van Kreveld

2. Interpolation vs. approximation
Interpolation means passing through given points, approximation means getting “close” to given points
Bézier curves and B-spline curves p2 p2 p1 p1 p0 p3 p0 p3
p1 and p2 are interpolated
p1 and p2 are approximated

3. Bezier curves Polynomial of any degree
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

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

5. Bezier 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

6. Cubic Bezier curve example
p0 p1 3 p1 p2
p0 p1
p2 p3 p0 p3
p2 p3 3

7. Quintic Bezier curve example
p0 p1 5 p2 p3 p1
p0 p1 p4 p5 p0
p4 p5
p4 p5 5

8. Cubic Bezier curves
p = f(0) = a a a a3 p = f(1) = a a a a3 3(p1 – p0) = f’(0) = a1 + 20 a 02 a3 3(p3 – p2) = f’(1) = a1 + 21 a 12 a3
basis matrix

9. Cubic Bezier curves
f(u) = (1 – 3u + 3u2 – u3) p ( u – 6u2 + 3u3) p ( u2 – 3u3) p ( u3) p3
Bezier blending functions b0,3 = (1 – u)3 b1,3 = 3 u (1 – u)2 b2,3 = 3 u2 (1 – u) b3,3 = u3

10. Bezier 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

11. Bezier curves
degrees 2 (left) up to 6 (right)

12. 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

13. 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)

14. Properties of Bezier curves
A Bezier curve is symmetric: reversing the control points yields the same curve, parameterized in reverse p2 p3 p1 p4 p3 p2 p5 p0 p4 p1 p0 p5

15. 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) p2 p2 p3 p3 p1 p1 p4 p4 p5 p5 p0 p0

16. Properties of Bezier curves
There are simple algorithms for Bezier curves
evaluating
subdividing a Bezier curve into two Bezier curves  allows computing (approximating) intersections of Bezier curves
the point at parameter value u on the Bezier curve

17. Bezier curves in PowerPoint
The curve you draw in PowerPoint is a Bezier 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)

18. Splines from Bezier 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
For the last condition C1, we must then assume that the two adjacent pieces use the same parameter interval length in their definition. q2 p2 p1 p3 q3 q0 q1 p0

19. Intuition for Bezier curves
Keep on cutting corners to make a “smoother” curve
In the limit, the curve becomes smooth p1 p0 p2

20. Intuition for Bezier 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
This gives a quadratic Bezier curve p0 p2
p’1 p3 p4 p0 p2
p’1
gives a quadratic Bezier curve

21. De Casteljau algorithm
Generalization of the subdivision scheme just presented; it works for any degree
Given 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 – 1 points
If one point remains, we found f(u), otherwise repeat the previous step with these d – 1 points

22. De Casteljau algorithmp2 p1 p3 p0

23. De Casteljau algorithmp2 p1 p3 p0

24. De Casteljau algorithmp2 p1 p3 p0

25. De Casteljau algorithmp2 p1
one point remains, the point on the curve at u = 1/3 p3 p0

26. 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 p2 p1 r0 r1 r3 r2 q0 q1 q3 q2 p3 p0

27. Splitting a Bezier curveq0 q1 q3 q2 p3 p0
Question: Recalling that Bezier 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?!?

28. Splitting a Bezier curveq0 q1 q3 q2 p3 p0
Of course the curve stays C1, because the two pieces together precisely form the curve before splitting.
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

29. Splitting a Bezier curve
Splitting a Bezier curve is useful to find line-Bezier or Bezier-Bezier intersections p2 p1
u = ½ p3 p0

30. Intersecting a Bezier curve
To test if some line L intersects a Bezier curve with control points p0, p1, …, pd , test whether L intersects the poly-line p0, p1, …, pd
If not, L does not intersect the Bezier curve either
Otherwise, split the Bezier curve (with u = ½ ) and repeat on the two pieces p2 p1
In the figure, we do not know anything about intersection using the original four control points, but after splitting, the line does not intersect the polyline of the first four points, nor of the last four points, so the line does not intersect the Bezier curve. p3 p0

31. 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 p2 p1
In the figure, we cannot conclude anything with the original four control points, but after one split, we know for sure that the line intersects the Bezier curve (twice even). p3 p0

32. 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 p2 p1 p3 p0

33. Intersecting a Bezier curve
When determining intersection of a line segment and a Bezier curve we must make some small changes p2 p1
Examine what changes to make. When can we conclude that the line segment does not intersect the Bezier curve, and when can we conclude that they do intersect? p3 p0

34. 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 C0)

35. Splitting a Bezier curve for rendering

36. Splitting a Bezier curve for rendering

37. Splitting a Bezier curve for rendering

38. Splitting a Bezier curve for rendering

39. Splitting a Bezier curve for rendering

40. Splitting a Bezier curve for rendering

41. Splitting a Bezier curve for rendering

42. Splitting a Bezier curve for rendering

43. Splitting a Bezier curve for rendering

44. Splitting a Bezier curve for rendering

45. De Casteljau on quadratic, cubic and quartic Bezier curves

46. 3D Bezier surfaces
The 16 blending functions for cubic Bezier surfaces

47. 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

48. Questions
Consider figure 15.11, bottom left (also on slide 11). It looks like a circular arc, but it is not. Determine whether the quadratic Bezier curve shown here goes around (left and above) the midpoint of the circular arc with the same two endpoints or not
Can we ensure higher degrees of continuity than C1 with cubic Bezier splines? Discuss your answer
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 Bezier curve that is needed for this? What if we want a closed Bezier curve with an inflection point (boundary of a non-convex region)?

49. Questions
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 Bezier curve)
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 Bezier curve)