splines iii – bézier curves
DESCRIPTION
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. Interpolation vs. approximation. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Splines III – Bézier Curves](https://reader035.vdocuments.mx/reader035/viewer/2022062304/56812c33550346895d90b719/html5/thumbnails/1.jpg)
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
![Page 2: Splines III – Bézier Curves](https://reader035.vdocuments.mx/reader035/viewer/2022062304/56812c33550346895d90b719/html5/thumbnails/2.jpg)
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
![Page 3: Splines III – Bézier Curves](https://reader035.vdocuments.mx/reader035/viewer/2022062304/56812c33550346895d90b719/html5/thumbnails/3.jpg)
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
![Page 4: Splines III – Bézier Curves](https://reader035.vdocuments.mx/reader035/viewer/2022062304/56812c33550346895d90b719/html5/thumbnails/4.jpg)
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
![Page 5: Splines III – Bézier Curves](https://reader035.vdocuments.mx/reader035/viewer/2022062304/56812c33550346895d90b719/html5/thumbnails/5.jpg)
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
![Page 6: Splines III – Bézier Curves](https://reader035.vdocuments.mx/reader035/viewer/2022062304/56812c33550346895d90b719/html5/thumbnails/6.jpg)
Cubic Bézier curve example
p2
p0p3
p1
p0 p1
p2 p3
p0 p1
p2 p3
3
3
6
![Page 7: Splines III – Bézier Curves](https://reader035.vdocuments.mx/reader035/viewer/2022062304/56812c33550346895d90b719/html5/thumbnails/7.jpg)
Quintic Bézier curve example
p2
p0
p5
p1p0 p1
p4 p5
p4 p55
p0 p15
p4
p3
7
![Page 8: Splines III – Bézier Curves](https://reader035.vdocuments.mx/reader035/viewer/2022062304/56812c33550346895d90b719/html5/thumbnails/8.jpg)
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
![Page 9: Splines III – Bézier Curves](https://reader035.vdocuments.mx/reader035/viewer/2022062304/56812c33550346895d90b719/html5/thumbnails/9.jpg)
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
![Page 10: Splines III – Bézier Curves](https://reader035.vdocuments.mx/reader035/viewer/2022062304/56812c33550346895d90b719/html5/thumbnails/10.jpg)
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
![Page 11: Splines III – Bézier Curves](https://reader035.vdocuments.mx/reader035/viewer/2022062304/56812c33550346895d90b719/html5/thumbnails/11.jpg)
Bézier curves
degrees 2 (left) up to 6 (right)
11
![Page 12: Splines III – Bézier Curves](https://reader035.vdocuments.mx/reader035/viewer/2022062304/56812c33550346895d90b719/html5/thumbnails/12.jpg)
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
![Page 13: Splines III – Bézier Curves](https://reader035.vdocuments.mx/reader035/viewer/2022062304/56812c33550346895d90b719/html5/thumbnails/13.jpg)
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
![Page 14: Splines III – Bézier Curves](https://reader035.vdocuments.mx/reader035/viewer/2022062304/56812c33550346895d90b719/html5/thumbnails/14.jpg)
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
![Page 15: Splines III – Bézier Curves](https://reader035.vdocuments.mx/reader035/viewer/2022062304/56812c33550346895d90b719/html5/thumbnails/15.jpg)
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
![Page 16: Splines III – Bézier Curves](https://reader035.vdocuments.mx/reader035/viewer/2022062304/56812c33550346895d90b719/html5/thumbnails/16.jpg)
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
![Page 17: Splines III – Bézier Curves](https://reader035.vdocuments.mx/reader035/viewer/2022062304/56812c33550346895d90b719/html5/thumbnails/17.jpg)
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
![Page 18: Splines III – Bézier Curves](https://reader035.vdocuments.mx/reader035/viewer/2022062304/56812c33550346895d90b719/html5/thumbnails/18.jpg)
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
![Page 19: Splines III – Bézier Curves](https://reader035.vdocuments.mx/reader035/viewer/2022062304/56812c33550346895d90b719/html5/thumbnails/19.jpg)
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
![Page 20: Splines III – Bézier Curves](https://reader035.vdocuments.mx/reader035/viewer/2022062304/56812c33550346895d90b719/html5/thumbnails/20.jpg)
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
![Page 21: Splines III – Bézier Curves](https://reader035.vdocuments.mx/reader035/viewer/2022062304/56812c33550346895d90b719/html5/thumbnails/21.jpg)
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
![Page 22: Splines III – Bézier Curves](https://reader035.vdocuments.mx/reader035/viewer/2022062304/56812c33550346895d90b719/html5/thumbnails/22.jpg)
De Casteljau algorithm
p0
p1
p3
p2u = 1/3
22
![Page 23: Splines III – Bézier Curves](https://reader035.vdocuments.mx/reader035/viewer/2022062304/56812c33550346895d90b719/html5/thumbnails/23.jpg)
De Casteljau algorithm
p0
p1
p3
p2u = 1/3
23
![Page 24: Splines III – Bézier Curves](https://reader035.vdocuments.mx/reader035/viewer/2022062304/56812c33550346895d90b719/html5/thumbnails/24.jpg)
De Casteljau algorithm
p0
p1
p3
p2u = 1/3
24
![Page 25: Splines III – Bézier Curves](https://reader035.vdocuments.mx/reader035/viewer/2022062304/56812c33550346895d90b719/html5/thumbnails/25.jpg)
De Casteljau algorithm
p0
p1
p3
p2u = 1/3
one point remains, the point on the curve at u = 1/3
25
![Page 26: Splines III – Bézier Curves](https://reader035.vdocuments.mx/reader035/viewer/2022062304/56812c33550346895d90b719/html5/thumbnails/26.jpg)
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
![Page 27: Splines III – Bézier Curves](https://reader035.vdocuments.mx/reader035/viewer/2022062304/56812c33550346895d90b719/html5/thumbnails/27.jpg)
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
![Page 28: Splines III – Bézier Curves](https://reader035.vdocuments.mx/reader035/viewer/2022062304/56812c33550346895d90b719/html5/thumbnails/28.jpg)
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
![Page 29: Splines III – Bézier Curves](https://reader035.vdocuments.mx/reader035/viewer/2022062304/56812c33550346895d90b719/html5/thumbnails/29.jpg)
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
![Page 30: Splines III – Bézier Curves](https://reader035.vdocuments.mx/reader035/viewer/2022062304/56812c33550346895d90b719/html5/thumbnails/30.jpg)
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
![Page 31: Splines III – Bézier Curves](https://reader035.vdocuments.mx/reader035/viewer/2022062304/56812c33550346895d90b719/html5/thumbnails/31.jpg)
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
![Page 32: Splines III – Bézier Curves](https://reader035.vdocuments.mx/reader035/viewer/2022062304/56812c33550346895d90b719/html5/thumbnails/32.jpg)
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
![Page 33: Splines III – Bézier Curves](https://reader035.vdocuments.mx/reader035/viewer/2022062304/56812c33550346895d90b719/html5/thumbnails/33.jpg)
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
![Page 34: Splines III – Bézier Curves](https://reader035.vdocuments.mx/reader035/viewer/2022062304/56812c33550346895d90b719/html5/thumbnails/34.jpg)
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
![Page 35: Splines III – Bézier Curves](https://reader035.vdocuments.mx/reader035/viewer/2022062304/56812c33550346895d90b719/html5/thumbnails/35.jpg)
Splitting a Bézier curve for rendering
p0
p1
p3
p2
u = ½
35
![Page 36: Splines III – Bézier Curves](https://reader035.vdocuments.mx/reader035/viewer/2022062304/56812c33550346895d90b719/html5/thumbnails/36.jpg)
Splitting a Bézier curve for rendering
p0
p1
p3p2p0 p1
p3
p2
36
![Page 37: Splines III – Bézier Curves](https://reader035.vdocuments.mx/reader035/viewer/2022062304/56812c33550346895d90b719/html5/thumbnails/37.jpg)
Splitting a Bézier curve for rendering
p0
p1
p3p2p0 p1
p3
p2
37
![Page 38: Splines III – Bézier Curves](https://reader035.vdocuments.mx/reader035/viewer/2022062304/56812c33550346895d90b719/html5/thumbnails/38.jpg)
Splitting a Bézier curve for rendering
p0
p1
p3p2p0 p1
p3
p2
38
![Page 39: Splines III – Bézier Curves](https://reader035.vdocuments.mx/reader035/viewer/2022062304/56812c33550346895d90b719/html5/thumbnails/39.jpg)
Splitting a Bézier curve for rendering
p0
p1
p3p2p0 p1
p3
p2
39
![Page 40: Splines III – Bézier Curves](https://reader035.vdocuments.mx/reader035/viewer/2022062304/56812c33550346895d90b719/html5/thumbnails/40.jpg)
Splitting a Bézier curve for rendering
p0
p1
p3p2p0 p1
p3
p2
40
![Page 41: Splines III – Bézier Curves](https://reader035.vdocuments.mx/reader035/viewer/2022062304/56812c33550346895d90b719/html5/thumbnails/41.jpg)
Splitting a Bézier curve for rendering
p0
p1
p3p2p0 p1
p3
p2
u = 1/4
u = 1/2u = 3/4
41
![Page 42: Splines III – Bézier Curves](https://reader035.vdocuments.mx/reader035/viewer/2022062304/56812c33550346895d90b719/html5/thumbnails/42.jpg)
Splitting a Bézier curve for rendering
p0
p1
p3p2p0 p1
p3
p2
u = 1/4
u = 1/2u = 3/4
42
![Page 43: Splines III – Bézier Curves](https://reader035.vdocuments.mx/reader035/viewer/2022062304/56812c33550346895d90b719/html5/thumbnails/43.jpg)
Splitting a Bézier curve for rendering
p0
p3 p0
p3u = 1/4
u = 1/2u = 3/4
43
![Page 44: Splines III – Bézier Curves](https://reader035.vdocuments.mx/reader035/viewer/2022062304/56812c33550346895d90b719/html5/thumbnails/44.jpg)
Splitting a Bézier curve for rendering
p0
p3
p0
p3p0
p3
p0
p3
44
![Page 45: Splines III – Bézier Curves](https://reader035.vdocuments.mx/reader035/viewer/2022062304/56812c33550346895d90b719/html5/thumbnails/45.jpg)
De Casteljau on quadratic, cubic and quartic Bézier curves
45
![Page 46: Splines III – Bézier Curves](https://reader035.vdocuments.mx/reader035/viewer/2022062304/56812c33550346895d90b719/html5/thumbnails/46.jpg)
3D Bézier surfaces
The 16 blending functions for cubic Bezier surfaces
46
![Page 47: Splines III – Bézier Curves](https://reader035.vdocuments.mx/reader035/viewer/2022062304/56812c33550346895d90b719/html5/thumbnails/47.jpg)
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
![Page 48: Splines III – Bézier Curves](https://reader035.vdocuments.mx/reader035/viewer/2022062304/56812c33550346895d90b719/html5/thumbnails/48.jpg)
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
![Page 49: Splines III – Bézier Curves](https://reader035.vdocuments.mx/reader035/viewer/2022062304/56812c33550346895d90b719/html5/thumbnails/49.jpg)
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