CS-C3100 Computer Graphics Bézier Curves and Splines 3.2 ...
Transcript of CS-C3100 Computer Graphics Bézier Curves and Splines 3.2 ...
![Page 1: CS-C3100 Computer Graphics Bézier Curves and Splines 3.2 ...](https://reader031.fdocuments.net/reader031/viewer/2022013022/61d18117c4ba87263a0621bf/html5/thumbnails/1.jpg)
CS-C3100 Computer Graphics Bézier Curves and Splines
3.2 Cubic Bézier Splines
Majority of slides from Frédo Durand
vectorportal.com
![Page 2: CS-C3100 Computer Graphics Bézier Curves and Splines 3.2 ...](https://reader031.fdocuments.net/reader031/viewer/2022013022/61d18117c4ba87263a0621bf/html5/thumbnails/2.jpg)
• Cubic Bézier Curves: the prototype of a spline • Manipulating polynomials with matrices • A general formulation for polynomial splines
– Not just Bézier: also Catmull-Rom, B-Splines, …
In This Video
2
![Page 3: CS-C3100 Computer Graphics Bézier Curves and Splines 3.2 ...](https://reader031.fdocuments.net/reader031/viewer/2022013022/61d18117c4ba87263a0621bf/html5/thumbnails/3.jpg)
3
The Cubic Bézier Curve
![Page 4: CS-C3100 Computer Graphics Bézier Curves and Splines 3.2 ...](https://reader031.fdocuments.net/reader031/viewer/2022013022/61d18117c4ba87263a0621bf/html5/thumbnails/4.jpg)
4
Cubic Bézier Curve• User specifies 4 control points P1 ... P4 • Curve goes through (interpolates) the ends P1, P4 • Approximates the two other ones • Cubic polynomial
![Page 5: CS-C3100 Computer Graphics Bézier Curves and Splines 3.2 ...](https://reader031.fdocuments.net/reader031/viewer/2022013022/61d18117c4ba87263a0621bf/html5/thumbnails/5.jpg)
5
Cubic Bézier Curve• 4 control points • Curve passes through first & last control point • Curve is tangent at P1 to (P1-P2) and at P4 to (P4-P3)
A Bézier curve is bounded by the
convex hull of its control points.
![Page 6: CS-C3100 Computer Graphics Bézier Curves and Splines 3.2 ...](https://reader031.fdocuments.net/reader031/viewer/2022013022/61d18117c4ba87263a0621bf/html5/thumbnails/6.jpg)
6
Cubic Bézier Curve• 4 control points • Curve passes through first & last control point • Curve is tangent at P1 to (P1-P2) and at P4 to (P4-P3)
A Bézier curve is bounded by the
convex hull of its control points.
![Page 7: CS-C3100 Computer Graphics Bézier Curves and Splines 3.2 ...](https://reader031.fdocuments.net/reader031/viewer/2022013022/61d18117c4ba87263a0621bf/html5/thumbnails/7.jpg)
• P(t) = (1-t)3 P1 + 3t(1-t)2 P2 + 3t2(1-t) P3 + t3 P4
x(t) = (1� t)3 x1+
3t(1� t)2 x2+
3t2(1� t) x3+
t3 x4
y(t) = (1� t)3 y1+
3t(1� t)2 y2+
3t2(1� t) y3+
t3 y4
7
Cubic Bézier CurveThat is,
![Page 8: CS-C3100 Computer Graphics Bézier Curves and Splines 3.2 ...](https://reader031.fdocuments.net/reader031/viewer/2022013022/61d18117c4ba87263a0621bf/html5/thumbnails/8.jpg)
• P(t) = (1-t)3 P1 + 3t(1-t)2 P2 + 3t2(1-t) P3 + t3 P4
x(t) = (1� t)3 x1+
3t(1� t)2 x2+
3t2(1� t) x3+
t3 x4
y(t) = (1� t)3 y1+
3t(1� t)2 y2+
3t2(1� t) y3+
t3 y4
8
Cubic Bézier CurveThat is,
Vectors with coordinates of control
points
Scalar polynomials
![Page 9: CS-C3100 Computer Graphics Bézier Curves and Splines 3.2 ...](https://reader031.fdocuments.net/reader031/viewer/2022013022/61d18117c4ba87263a0621bf/html5/thumbnails/9.jpg)
9
Cubic Bézier CurveVerify what happens for t=0 and t=1
• P(t) = (1-t)3 P1 + 3t(1-t)2 P2 + 3t2(1-t) P3 + t3 P4
![Page 10: CS-C3100 Computer Graphics Bézier Curves and Splines 3.2 ...](https://reader031.fdocuments.net/reader031/viewer/2022013022/61d18117c4ba87263a0621bf/html5/thumbnails/10.jpg)
10
“Bernstein Polynomials”For cubic: • B1(t)=(1-t)3
• B2(t)=3t(1-t)2
• B3(t)=3t2(1-t)
• B4(t)=t3
– (careful with indices, many authors start at 0)
• But defined for any degree
![Page 11: CS-C3100 Computer Graphics Bézier Curves and Splines 3.2 ...](https://reader031.fdocuments.net/reader031/viewer/2022013022/61d18117c4ba87263a0621bf/html5/thumbnails/11.jpg)
�
11
Properties of Bernstein polynomialsB1 + B2 + B3 + B4� 0 �• for all 0 t 1
• Sum to 1 for every t – called partition of unity
• (These two together are the reason why Bézier curves lie within convex hull)
• Only B1 is non-zero at 0 – Bezier interpolates P1
– Same for B4 and P4 for t=1
![Page 12: CS-C3100 Computer Graphics Bézier Curves and Splines 3.2 ...](https://reader031.fdocuments.net/reader031/viewer/2022013022/61d18117c4ba87263a0621bf/html5/thumbnails/12.jpg)
12
Interpretation as “Influence”
• Each Bi specifies the influence of Pi
• First, P1 is the most influential point, then P2, P3, and P4
• P2 and P3 never have full influence – Not interpolated!
![Page 13: CS-C3100 Computer Graphics Bézier Curves and Splines 3.2 ...](https://reader031.fdocuments.net/reader031/viewer/2022013022/61d18117c4ba87263a0621bf/html5/thumbnails/13.jpg)
13
Bézier Curves, Concise Notation
• P(t) = P1B1(t) + P2B2(t) + P3B3(t) + P4B4(t) – Pi are 2D control points (xi, yi) – For each t, the point P(t) on a Bézier curve is a linear
combination of the control points with weights given by the Bernstein polynomials at t
![Page 14: CS-C3100 Computer Graphics Bézier Curves and Splines 3.2 ...](https://reader031.fdocuments.net/reader031/viewer/2022013022/61d18117c4ba87263a0621bf/html5/thumbnails/14.jpg)
14
Bézier Curves, Concise Notation
• P(t) = P1B1(t) + P2B2(t) + P3B3(t) + P4B4(t) – Pi are 2D control points (xi, yi) – For each t, the point P(t) on a Bézier curve is a linear
combination of the control points with weights given by the Bernstein polynomials at
• Very nice, but only works for Bernstein polynomials.. there are other splines too!
![Page 15: CS-C3100 Computer Graphics Bézier Curves and Splines 3.2 ...](https://reader031.fdocuments.net/reader031/viewer/2022013022/61d18117c4ba87263a0621bf/html5/thumbnails/15.jpg)
15
Basis for Cubic Polynomials
What’s a basis?
• A set of “atomic” vectors – Called basis vectors – Linear combinations of basis vectors span the space
• Linearly independent – Means that no basis vector can be obtained from the
others by linear combination • Example: i, j, i+j is not a basis (missing k direction!)
i
jkIn 3D
⌅v = x⌅i + y⌅j + z ⌅k
![Page 16: CS-C3100 Computer Graphics Bézier Curves and Splines 3.2 ...](https://reader031.fdocuments.net/reader031/viewer/2022013022/61d18117c4ba87263a0621bf/html5/thumbnails/16.jpg)
16
Canonical Basis for Cubics
• Any cubic polynomial is a linear combination of these:
– The as are the weights
• They are linearly independent – Means you can’t write any of the four monomials as a
a linear combination of the others. (You can try.)
{1, t, t2, t3}
0 0.2 0.4 0.6 0.8 1
0
0.2
0.4
0.6
0.8
1
1tt2t3
![Page 17: CS-C3100 Computer Graphics Bézier Curves and Splines 3.2 ...](https://reader031.fdocuments.net/reader031/viewer/2022013022/61d18117c4ba87263a0621bf/html5/thumbnails/17.jpg)
17
Different basis • For example:
– {1, 1+t, 1+2t+t2, 1+t-t2+6t3}
– {t3, t3+t2, t3+t, t3+1}
• These can all be obtained from by linear combination – Just like all bases for Euclidean space can be obtained
by linear combinations of the canonical i, j, … • Infinite number of possibilities, just like you have
an infinite number of bases to span R2
1, t, t2, t3
2D examples
![Page 18: CS-C3100 Computer Graphics Bézier Curves and Splines 3.2 ...](https://reader031.fdocuments.net/reader031/viewer/2022013022/61d18117c4ba87263a0621bf/html5/thumbnails/18.jpg)
18
Why we bother:
![Page 19: CS-C3100 Computer Graphics Bézier Curves and Splines 3.2 ...](https://reader031.fdocuments.net/reader031/viewer/2022013022/61d18117c4ba87263a0621bf/html5/thumbnails/19.jpg)
19
Matrix-Vector Notation For Polynomials
• For example: – 1, 1+t, 1+t+t2, 1+t-t2+t3
– t3, t3+t2, t3+t, t3+1�
⇧⇧⇤
11 + t
1 + t + t2
1 + t� t2 + t3
⇥
⌃⌃⌅ =
�
⇧⇧⇤
1 0 0 01 1 0 01 1 1 01 1 �1 1
⇥
⌃⌃⌅
�
⇧⇧⇤
1tt2
t3
⇥
⌃⌃⌅
�
⇧⇧⇤
t3
t3 + t2
t3 + tt3 + 1
⇥
⌃⌃⌅ =
�
⇧⇧⇤
0 0 0 10 0 1 10 1 0 11 0 0 1
⇥
⌃⌃⌅
�
⇧⇧⇤
1tt2
t3
⇥
⌃⌃⌅
Change-of-basis matrix
“Canonical” monomial
basis
These relationships hold for each
value of t
![Page 20: CS-C3100 Computer Graphics Bézier Curves and Splines 3.2 ...](https://reader031.fdocuments.net/reader031/viewer/2022013022/61d18117c4ba87263a0621bf/html5/thumbnails/20.jpg)
20
Matrix-Vector Notation For Polynomials
• For example: – 1, 1+t, 1+t+t2, 1+t-t2+t3
– t3, t3+t2, t3+t, t3+1�
⇧⇧⇤
11 + t
1 + t + t2
1 + t� t2 + t3
⇥
⌃⌃⌅ =
�
⇧⇧⇤
1 0 0 01 1 0 01 1 1 01 1 �1 1
⇥
⌃⌃⌅
�
⇧⇧⇤
1tt2
t3
⇥
⌃⌃⌅
�
⇧⇧⇤
t3
t3 + t2
t3 + tt3 + 1
⇥
⌃⌃⌅ =
�
⇧⇧⇤
0 0 0 10 0 1 10 1 0 11 0 0 1
⇥
⌃⌃⌅
�
⇧⇧⇤
1tt2
t3
⇥
⌃⌃⌅
Change-of-basis matrix
“Canonical” monomial
basis
Not any matrix will do! If it’s singular, the basis
set will be linearly dependent, i.e.,
redundant.
![Page 21: CS-C3100 Computer Graphics Bézier Curves and Splines 3.2 ...](https://reader031.fdocuments.net/reader031/viewer/2022013022/61d18117c4ba87263a0621bf/html5/thumbnails/21.jpg)
21
Matrix Form of BernsteinCubic Bernstein: • B1(t)=(1-t)3
• B2(t)=3t(1-t)2
• B3(t)=3t2(1-t) • B4(t)=t3
Expand these out and collect powers of t.
The coefficients are the entries in the matrix B!
�
⇧⇧⇤
B1(t)B2(t)B3(t)B4(t)
⇥
⌃⌃⌅ =
B⌥ ⌦ ��
⇧⇧⇤
1 �3 3 �10 3 �6 30 0 3 �30 0 0 1
⇥
⌃⌃⌅
�
⇧⇧⇤
1tt2
t3
⇥
⌃⌃⌅
![Page 22: CS-C3100 Computer Graphics Bézier Curves and Splines 3.2 ...](https://reader031.fdocuments.net/reader031/viewer/2022013022/61d18117c4ba87263a0621bf/html5/thumbnails/22.jpg)
• or, in matrix-vector notation
Bézier in Matrix-Vector Notation
22
matrix of control points (2 x 4)
Bernstein polynomials (4x1 vector)
point on curve (2x1 vector)
P (t) =�
x(t)y(t)
⇥=
�x1 x2 x3 x4
y1 y2 y3 y4
⇥⇤
⌥⌥⇧
B1(t)B2(t)B3(t)B4(t)
⌅
��⌃
• Remember: P(t) = P1B1(t) + P2B2(t) + P3B3(t) + P4B4(t) is a linear combination of control points
![Page 23: CS-C3100 Computer Graphics Bézier Curves and Splines 3.2 ...](https://reader031.fdocuments.net/reader031/viewer/2022013022/61d18117c4ba87263a0621bf/html5/thumbnails/23.jpg)
• Remember:
•
Bézier in Matrix-Vector Notation
23
matrix of control points (2 x 4)
Bernstein polynomials (4x1 vector)
point on curve (2x1 vector)
P (t) =4⇧
i=1
Pi Bi(t) =4⇧
i=1
⇤�xi
yi
⇥Bi(t)
⌅
P (t) =�
x(t)y(t)
⇥=
�x1 x2 x3 x4
y1 y2 y3 y4
⇥⇤
⌥⌥⇧
B1(t)B2(t)B3(t)B4(t)
⌅
��⌃
�
⇧⇧⇤
B1(t)B2(t)B3(t)B4(t)
⇥
⌃⌃⌅ =
B⌥ ⌦ ��
⇧⇧⇤
1 �3 3 �10 3 �6 30 0 3 �30 0 0 1
⇥
⌃⌃⌅
�
⇧⇧⇤
1tt2
t3
⇥
⌃⌃⌅<= Flasback from two
slides ago, let’s combine with below:
![Page 24: CS-C3100 Computer Graphics Bézier Curves and Splines 3.2 ...](https://reader031.fdocuments.net/reader031/viewer/2022013022/61d18117c4ba87263a0621bf/html5/thumbnails/24.jpg)
• Combined, we get cubic Bézier in matrix notation
Phase 3: Profit
24
P(t) =�
x(t)y(t)
⇥=
�x1 x2 x3 x4
y1 y2 y3 y4
⇥⇤
⌥⌥⇧
1 �3 3 �10 3 �6 30 0 3 �30 0 0 1
⌅
��⌃
⇤
⌥⌥⇧
1tt2
t3
⌅
��⌃
point on curve (2x1 vector)
“Geometry matrix” of control points P1..P4
(2 x 4)“Spline matrix”
(Bernstein)
Canonical monomial basis
![Page 25: CS-C3100 Computer Graphics Bézier Curves and Splines 3.2 ...](https://reader031.fdocuments.net/reader031/viewer/2022013022/61d18117c4ba87263a0621bf/html5/thumbnails/25.jpg)
25
General Spline Formulation
• Geometry: control points coordinates assembled into a matrix G=(P1, P2, …, Pn+1)
• Spline matrix B: defines the type of spline – Bernstein for Bézier
• Power basis T: the monomials (1, t, ..., tn)T • Advantage of general formulation
– Compact expression – Easy to convert between types of splines – Dimensionality (plane or space) doesn’t really matter
![Page 26: CS-C3100 Computer Graphics Bézier Curves and Splines 3.2 ...](https://reader031.fdocuments.net/reader031/viewer/2022013022/61d18117c4ba87263a0621bf/html5/thumbnails/26.jpg)
26
What can we do with this?• Cubic polynomials form a vector space. • Bernstein basis defines Bézier curves. • Can do other bases as well: Catmull-Rom splines
interpolate all the control points, for instance
BCR =
0
BB@
0 �1 2 �12 0 �5 30 1 4 �30 0 �1 1
1
CCA1
2BCR =
0
BB@
0 �1 2 �12 0 �5 30 1 4 �30 0 �1 1
1
CCA
![Page 27: CS-C3100 Computer Graphics Bézier Curves and Splines 3.2 ...](https://reader031.fdocuments.net/reader031/viewer/2022013022/61d18117c4ba87263a0621bf/html5/thumbnails/27.jpg)
27
3D Spline has 3D control points
• The 2D control points can be replaced by 3D points – this yields space curves. – All the above math stays the same except with the
addition of 3rd row to control point matrix (z coords) – In fact, can do homogeneous coordinates as well!
![Page 28: CS-C3100 Computer Graphics Bézier Curves and Splines 3.2 ...](https://reader031.fdocuments.net/reader031/viewer/2022013022/61d18117c4ba87263a0621bf/html5/thumbnails/28.jpg)
28
Linear Transformations & Cubics• What if we want to transform each point on the
curve with a linear transformation M?
P’(t)= M�
⇧⇧⇤
1 �3 3 �10 3 �6 30 0 3 �30 0 0 1
⇥
⌃⌃⌅
![Page 29: CS-C3100 Computer Graphics Bézier Curves and Splines 3.2 ...](https://reader031.fdocuments.net/reader031/viewer/2022013022/61d18117c4ba87263a0621bf/html5/thumbnails/29.jpg)
29
Linear Transformations & Cubics• What if we want to transform each point on the
curve with a linear transformation M? – Because everything is linear, it’s the same as
transforming the only the control points
P’(t)= M
= M
�
⇧⇧⇤
1 �3 3 �10 3 �6 30 0 3 �30 0 0 1
⇥
⌃⌃⌅
�
⇧⇧⇤
1 �3 3 �10 3 �6 30 0 3 �30 0 0 1
⇥
⌃⌃⌅
![Page 30: CS-C3100 Computer Graphics Bézier Curves and Splines 3.2 ...](https://reader031.fdocuments.net/reader031/viewer/2022013022/61d18117c4ba87263a0621bf/html5/thumbnails/30.jpg)
30
Linear Transformations & Cubics• Homogeneous coordinates also work
– Means you can translate, rotate, shear, etc. – Also, changing w gives a “tension” parameter
• Note though that you need to normalize P’ by 1/w
P’(t)= M
= M
�
⇧⇧⇤
1 �3 3 �10 3 �6 30 0 3 �30 0 0 1
⇥
⌃⌃⌅
�
⇧⇧⇤
1 �3 3 �10 3 �6 30 0 3 �30 0 0 1
⇥
⌃⌃⌅
0 1
0 1
0 1
0 1
0 1
0 1
0 1
0 1
![Page 31: CS-C3100 Computer Graphics Bézier Curves and Splines 3.2 ...](https://reader031.fdocuments.net/reader031/viewer/2022013022/61d18117c4ba87263a0621bf/html5/thumbnails/31.jpg)
31
Recap• Splines turn control points into smooth curves • Cubic polynomials form a vector space • Bernstein basis gives rise to Bézier curves
– Can be seen as influence function of data points – Or data points are coordinates of the curve in the
Bernstein basis • We can change between bases with matrices