49
Splines III – Bézier Curves based on: Michael Gleicher: Curves, chapter 15 in Fundamentals of Computer Graphics, 3 rd ed. (Shirley & Marschner) Slides by Marc van Kreveld 1
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 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
3
Bezier curves
• Cubic Bezier curves are used for font definitions• They are also used in Adobe Illustrator and many
other illustration/drawing programs
4
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
5
Cubic Bezier curve example
p2
p0p3
p1
p0 p1
p2 p3
p0 p1
p2 p3
3
3
6
Quintic Bezier curve example
p2
p0
p5
p1p0 p1
p4 p5
p4 p55
p0 p15
p4
p3
7
Cubic Bezier 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
1331036300330001
1CBbasis matrix
8
Cubic Bezier curves
• f(u) = (1 – 3u + 3u2 – u3) p0
+ ( 3u – 6u2 + 3u3) p1
+ ( 3u2 – 3u3) p2
+ ( 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
1331036300330001
1CB
ii
ibu pf
3
03,)(
9
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
)!(!!),(kdk
dkdC
10
Bezier curves
degrees 2 (left) up to 6 (right)
11
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
12
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)
13
Properties of Bezier curves
• A Bezier 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 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)
p0
p5
p1
p4
p3
p2
p0
p5
p1
p4
p3
p2
15
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
k
d
k
kdk uukdCu pp
0
)1(),()(
the point at parameter value u on the Bezier curve
16
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)
17
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
p0
p1 p3
p2
q0
q1
q3
q2
18
Intuition for Bezier curves
• Keep on cutting corners to make a “smoother” curve• In the limit, the curve becomes smooth
p0
p1
p2
19
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
p0
p2
p’1
p3 p4
p0
p2
p’1
gives a quadratic Bezier curve 20
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
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 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
p0
p1
p3
p2
q0
q1
q3q2
r0
r1
r3
r2
26
Splitting a Bezier curve
p0
p1
p3
p2
q0
q1
q3q2
r0
r1
r3
r2
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?!?
27
Splitting a Bezier 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 Bezier curve
• Splitting a Bezier curve is useful to find line-Bezier or Bezier-Bezier intersections
p0
p1
p3
p2
u = ½
29
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 = ½ ) andrepeat on the two pieces
p0
p1
p3
p2
30
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
p0
p1
p3
p2
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
p0
p1
p3
p2
32
Intersecting a Bezier curve
• When determining intersection of a line segment and a Bezier curve we must make some small changes
p0
p1
p3
p2
33
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)
34
Splitting a Bezier curve for rendering
p0
p1
p3
p2
u = ½
35
Splitting a Bezier curve for rendering
p0
p1
p3p2p0 p1
p3
p2
36
Splitting a Bezier curve for rendering
p0
p1
p3p2p0 p1
p3
p2
37
Splitting a Bezier curve for rendering
p0
p1
p3p2p0 p1
p3
p2
38
Splitting a Bezier curve for rendering
p0
p1
p3p2p0 p1
p3
p2
39
Splitting a Bezier curve for rendering
p0
p1
p3p2p0 p1
p3
p2
40
Splitting a Bezier curve for rendering
p0
p1
p3p2p0 p1
p3
p2
u = 1/4
u = 1/2u = 3/4
41
Splitting a Bezier curve for rendering
p0
p1
p3p2p0 p1
p3
p2
u = 1/4
u = 1/2u = 3/4
42
Splitting a Bezier curve for rendering
p0
p3 p0
p3u = 1/4
u = 1/2u = 3/4
43
Splitting a Bezier curve for rendering
p0
p3
p0p3p0
p3
p0
p3
44
De Casteljau on quadratic, cubic and quartic Bezier curves
45
3D Bezier surfaces
The 16 blending functions for cubic Bezier surfaces
46
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
47
Questions1. 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
2. Can we ensure higher degrees of continuity than C1 with cubic Bezier 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 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)?
48
Questions4. 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)
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 Bezier curve)
49
