Curves Computer Graphics CSE 167 Lecture 11
CSE 167: Computer graphics Polynomial Curves Polynomial functions Bézier Curves Drawing Bézier curves Piecewise Bézier curves Based on slides courtesy of Jurgen Schulze CSE 167, Winter 2018 2
Modeling Create 3D objects How to create complex surfaces? Objective Objects should be visually pleasing (smooth) Begin with curves, then generalize to surfaces CSE 167, Winter 2018 3
Curves Surface of revolution CSE 167, Winter 2018 4
Curves Extruded surfaces CSE 167, Winter 2018 5
Curves Animation Provide a track for objects Use as camera path CSE 167, Winter 2018 6
Curves Can be generalized to surface patches CSE 167, Winter 2018 7
Curve Representation Why not specify many points along a curve and connect with lines? Does not yield smooth results when magnified Use more points Large storage and CPU requirements Alternative: specify a curve with a small number of control points CSE 167, Winter 2018 8
Spline Definition Term comes from flexible spline devices used by shipbuilders and draftsmen to draw smooth shapes Spline consists of a long strip fixed in position at a number of points that relaxes to form a smooth curve passing through those points CSE 167, Winter 2018 9
Interpolating Control Points Curve goes through all control points (or anchor points) Seems most intuitive, but difficult to control behavior CSE 167, Winter 2018 10
Approximating Control Points Control points influence curve Various curve models Most common: polynomial functions Bézier spline (our focus) B spline (generalization of Bézier spline) NURBS (Non Uniform Rational Basis Spline): used in CAD tools CSE 167, Winter 2018 11
Mathematical Definition A vector valued function of one variable x(t) Given parameter t, compute the 3D point x=(x,y,z) on the curve Could be interpreted as 3 functions: x(t), y(t), z(t) x(t) z y x(0.0) x(0.5) x(1.0) x CSE 167, Winter 2018 12
Tangent Vector Derivative Vector x Direction of movement Magnitude is speed x(t) z y x (0.0) x (0.5) x (1.0) x CSE 167, Winter 2018 13
Linear (1st order) Polynomial Functions Quadratic (2nd order) Cubic (3rd order) CSE 167, Winter 2018 14
Polynomial Curves in 3D Linear Evaluated as CSE 167, Winter 2018 15
Quadratic (2nd order) Cubic (3rd order) Polynomial Curves in 3D We usually define the curve for 0 t 1 CSE 167, Winter 2018 16
Control Points Polynomial coefficients a, b, c, d each have x,y,z components a, b, c, d can be used as control points They do not intuitively describe the shape of the curve There are other models with intuitive control points CSE 167, Winter 2018 17
Weighted Average Based on linear interpolation (LERP) Weighted average between two values Value could be a number, vector, color, Interpolate between points p 0 and p 1 with parameter t Defines a straight (first order) polynomial curve x(t) Lerp t, p 0, p 1 1 t p 0 t p 1 p 0. 0<t<1 t=0. p 1 t=1 CSE 167, Winter 2018 18
Linear Polynomial Curve is based at point p 0 Add the vector (p 1 p 0 ), scaled by t p 0..5(p 1 -p 0 ). p 1 -p 0. CSE 167, Winter 2018 19
In Matrix Form Geometry matrix Geometric basis Polynomial basis In components CSE 167, Winter 2018 20
Summary Grouped by points: weighted average Grouped by parameter t: linear polynomial Matrix form CSE 167, Winter 2018 21
Tangent Weighted average Linear polynomial Matrix form CSE 167, Winter 2018 22
Bézier Curves Higher order extension of linear interpolation p 1 p 1 p 1 p 2 p 3 p 0 p 0 p 0 p 2 Linear Quadratic Cubic CSE 167, Winter 2018 23
Cubic Bézier Curve Most commonly used case Defined by four control points Two interpolated endpoints (points are on the curve) Two points control the tangents at the endpoints Points x on curve defined as function of parameter t p 0 x(t) p 1 p 3 p 2 CSE 167, Winter 2018 24
Cubic Bézier Curve Give intuitive control over curve with control points Endpoints are interpolated, intermediate points are approximated Demo: http://blogs.sitepointstatic.com/examples/tech/ca nvas curves/bezier curve.html CSE 167, Winter 2018 25
Curve by Algorithmic Construction De Casteljau algorithm, developed at Citroen in 1959, named after its inventor Paul de Casteljau (pronounced Cast all Joe ) Developed independently from Bézier s work: Bézier created the formulation using blending functions, Casteljau devised the recursive interpolation algorithm CSE 167, Winter 2018 26
De Casteljau Algorithm A recursive series of linear interpolations Works for any order Bezier function, not only cubic Gives intuition about the geometry Useful for subdivision Not very efficient to evaluate Other forms more commonly used CSE 167, Winter 2018 27
De Casteljau Algorithm Given Four control points A value of t (here t 0.25) p 0 p 1 p 2 p 3 CSE 167, Winter 2018 28
De Casteljau Algorithm p 1 q 1 q 0 (t) Lerp t,p 0,p 1 q 1 (t) Lerp t,p 1,p 2 q 2 (t) Lerp t,p 2,p 3 p 0 q 0 q 2 p 2 p 3 CSE 167, Winter 2018 29
De Casteljau Algorithm q 0 r 0 q 1 r 0 (t) Lerp t,q 0 (t),q 1 (t) r 1 (t) Lerp t,q 1 (t),q 2 (t) r 1 q 2 CSE 167, Winter 2018 30
De Casteljau Algorithm r 0 x r 1 x(t) Lerp t,r 0 (t),r 1 (t) CSE 167, Winter 2018 31
De Casteljau Algorithm p 1 p 0 x p 2 Demo https://www.jasondavies.com/animated-bezier/ p 3 CSE 167, Winter 2018 32
Recursive Linear Interpolation x Lerp t,r 0,r 1 r Lerp t,q,q 0 0 1 r 1 Lerp t,q 1,q 2 q 0 Lerp t,p 0,p 1 q 1 Lerp t,p 1,p 2 q 2 Lerp t,p 2,p 3 p 0 p 1 p 2 p 3 p 1 q 0 r 0 p 2 x q 1 r 1 p 3 q 2 p 4 CSE 167, Winter 2018 33
Expand the LERPs q 0 (t) Lerp t,p 0,p 1 1 t p 0 tp 1 q 1 (t) Lerp t,p 1,p 2 1 t p 1 tp 2 q 2 (t) Lerp t,p 2,p 3 1 t p 2 tp 3 r 0 (t) Lerp t,q 0 (t),q 1 (t) 1 t 1 t p 0 tp 1 t 1 t p 1 tp 2 r 1 (t) Lerp t,q 1 (t),q 2 (t) 1 t 1 t p 1 tp 2 t 1 t p 2 tp 3 x(t) Lerp t,r 0 (t),r 1 (t) 1 t 1 t 1 t p 0 tp 1 t 1 t p 1 tp 2 t 1 t 1 t p 1 tp 2 t 1 t p 2 tp 3 CSE 167, Winter 2018 34
Weighted Average of Control Points Regroup for p: CSE 167, Winter 2018 35
Cubic Bernstein Polynomials x(t) B 0 p t 0 B 1 t p 1 B 2 t p 2 B 3 p t 3 The cubic Bernstein polynomials : B 0 B 1 B 2 B 3 t t 3 3t 2 3t 1 t 3t 3 6t 2 3t 3t t 3 3t 2 t t 3 B i (t) 1 Weights B i (t) add up to 1 for any value of t CSE 167, Winter 2018 36
B 1 0 B 1 1 General Bernstein Polynomials t t 1 B 2 0 t t 2 2t 1 B 3 0 t t 3 3t 2 3t 1 t t B 2 1 2t t 2t B 3 1 t 3t 3 6t 2 3t B 2 2 t t 2 B 3 2 3t t 3t 2 B 3 3 t t 3 B i n t n i 1 t n n i t i i n! i! n i! B n i t 1 n! = factorial of n CSE 167, Winter 2018 (n+1)! = n! x (n+1) 37
Any order Bézier Curves nth order Bernstein polynomials form nthorder Bézier curves B i n x t t n i 1 t n i t n i 0 B n i p t i i CSE 167, Winter 2018 38
Demo: Bézier curves of multiple orders http://www.ibiblio.org/enotes/splines/bezier.html CSE 167, Winter 2018 39
Useful Bézier Curve Properties Convex Hull property Affine Invariance CSE 167, Winter 2018 40
Convex Hull Property A Bézier curve is always inside the convex hull Makes curve predictable Allows culling, intersection testing, adaptive tessellation p 1 p 3 p 0 p 2 CSE 167, Winter 2018 41
Affine Invariance Transforming Bézier curves Two ways to transform Transform control points, then compute spline points from transformed control points Compute spline points from control points, then transform spline points If affine transformed, then results are identical Invariant under affine transformations CSE 167, Winter 2018 42
Start with Bernstein form: x(t) t 3 3t 2 3t 1 p 0 3t 3 6t 2 3t p 1 3t 3 3t 2 p 2 t 3 Good for fast evaluation Precompute constant coefficients (a,b,c,d) Not much geometric intuition p 3 Regroup into coefficients of t : x(t) p 0 3p 1 3p 2 p 3 t 3 3p 0 6p 1 3p 2 t 2 3p 0 3p 1 t p 0 1 x(t) at 3 bt 2 ct d Cubic Polynomial Form a p 0 3p 1 3p 2 p 3 b 3p 0 6p 1 3p 2 c 3p 0 3p 1 d p 0 CSE 167, Winter 2018 43
Cubic Matrix Form CSE 167, Winter 2018 44
Matrix Form Other types of cubic splines use different basis matrices Efficient evaluation Pre compute C Use existing 4x4 matrix hardware support CSE 167, Winter 2018 45
Drawing Bézier Curves Draw line segments or individual pixels Approximate the curve as a series of line segments (tessellation) Uniform sampling Adaptive sampling Recursive subdivision CSE 167, Winter 2018 46
Uniform Sampling Approximate curve with N straight segments N chosen in advance Evaluate x i x t i where t i i N x i r a i3 N 3 r b i2 Connect points with lines Too few points Poor approximation, curve is faceted Too many points Slow to draw too many line segments for i 0, 1,K, N N c r i 2 N d x(t) x 4 x 0 x 1 x 2 x 3 CSE 167, Winter 2018 47
Adaptive Sampling Use only as many line segments as you need Fewer segments where curve is mostly flat More segments where curve bends Segments never smaller than a pixel x(t) CSE 167, Winter 2018 48
Recursive Subdivision Any cubic curve segment can be expressed as a Bézier curve Any piece of a cubic curve is itself a cubic curve Any Bézier curve can be broken down into smaller Bézier curves CSE 167, Winter 2018 49
De Casteljau Subdivision p 1 p 0 q r 0 0 r x 1 p 2 q 2 De Casteljau construction points are the control points of two Bézier sub segments p 3 CSE 167, Winter 2018 50
Adaptive Subdivision Algorithm Use De Casteljau construction to split Bézier segment in two For each part If flat enough : draw line segment Else: continue recursion Curve is flat enough if hull is flat enough Test how far the approximating control points are from a straight segment If less than one pixel, the hull is flat enough CSE 167, Winter 2018 51
More Control Points Cubic Bézier curve limited to 4 control points Cubic curve can only have one inflection (point where curve changes direction of bending) Need more control points for more complex curves k 1 order Bézier curve with k control points Hard to control and hard to work with Intermediate points do not have obvious effect on shape Changing any control point changes the whole curve Want local support: each control point only influences nearby portion of curve CSE 167, Winter 2018 52
Piecewise Curves Sequence of line segments Piecewise linear curve Sequence of cubic curve segments Piecewise cubic curve (here piecewise Bézier) CSE 167, Winter 2018 53
Global Parameterization Given N curve segments x 0 (t), x 1 (t),, x N 1 (t) Each is parameterized for t from 0 to 1 Define a piecewise curve Global parameter u from 0 to N x 0 (u), 0 u 1 x 1 (u 1), 1 u 2 x(u) M M x N 1 (u N 1 ), N 1 u N x(u) x i (u i), where i u (and x(n) x N 1 (1)) Alternate solution: u defined from 0 to 1 x(u) x i (Nu i), where i Nu CSE 167, Winter 2018 54
Piecewise Bézier Curve Given 3N 1 points p 0,p 1,K,p 3N Define N Bézier segments: x 0 (t) B 0 (t)p 0 B 1 (t)p 1 B 2 (t)p 2 B 3 (t)p 3 x 1 (t) B 0 (t)p 3 B 1 (t)p 4 B 2 (t)p 5 B 3 (t)p 6 M x N 1 (t) B 0 (t)p 3N 3 B 1 (t)p 3N 2 B 2 (t)p 3N 1 B 3 (t)p 3N p 7 p 8 p 0 p p 2 1 x 0 (t) p 3 x 1 (t) p 6 x 2 (t) p 9 x 3 (t) p 12 p 10 p 11 p 4 p 5 CSE 167, Winter 2018 55
Piecewise Bézier Curve Parameter in 0<=u<=3N x(u) x 0 ( 1 u), 0 u 3 3 x 1 ( 1 u 1), 3 u 6 3 M M x N 1 ( 1 3 u (N 1)), 3N 3 u 3N 1 x(u) x i u i 3, where i 1 u 3 x(8.75) x 0 (t) x 1 (t) x 2 (t) x 3 (t) u=0 x(3.5) u=12 CSE 167, Winter 2018 56
Parametric Continuity C 0 continuity: Curve segments are connected C 1 continuity: C 0 and 1st order derivatives agree Curves have same tangents Relevant for smooth shading C 2 continuity: C 1 & 2nd order derivatives agree Curves have same tangents and curvature Relevant for high quality reflections CSE 167, Winter 2018 57
Piecewise Bézier Curve 3N+1 points define N Bézier segments x(3i)=p 3i C 0 continuous by construction C 1 continuous at p 3i when p 3i p 3i 1 = p 3i +1 p3i C 2 is harder to achieve and rarely necessary p 4 p 2 p 1 p 2 P 3 p 6 p 1 p 6 p 4 P 3 p 5 p 0 p 5 p 0 C 1 discontinuous C 1 continuous CSE 167, Winter 2018 58
Piecewise Bézier Curves Used often in 2D drawing programs Inconveniences Must have 4 or 7 or 10 or 13 or (1 plus a multiple of 3) control points Some points interpolate, others approximate Need to impose constraints on control points to obtain C 1 continuity Solutions User interface using Bézier handles to ascertain C 1 continuity Generalization to B splines or NURBS CSE 167, Winter 2018 59
Bézier Handles Segment end points (interpolating) presented as curve control points Midpoints (approximating points) presented as handles Can have option to enforce C 1 continuity Adobe Illustrator CSE 167, Winter 2018 60
Demo: Bezier handles http://math.hws.edu/eck/cs424/notes2013/ca nvas/bezier.html CSE 167, Winter 2018 61
Video Bezier Curves http://www.youtube.com/watch?v=hldyjneiyvu CSE 167, Winter 2018 62
Rational Curves Weight causes point to pull more (or less) Can model circles with proper points and weights Below: rational quadratic Bézier curve (three control points) CSE 167, Winter 2018 63
B Splines B as in Basis Splines Basis is blending function Different than Bézier blending function B spline blending function can be zero outside a particular range (limits scope over which a control point has influence) B Spline is defined by control points and range in which each control point is active CSE 167, Winter 2018 64
NURBS Non Uniform Rational B Splines Generalization of Bézier curves Non uniform Combine B Splines (limited scope of control points) and Rational Curves (weighted control points) Can exactly model conic sections (circles, ellipses) OpenGL support: see glunurbscurve CSE 167, Winter 2018 65