Curve Drawing, Concepts for Splines

1. Curve Drawing,Concepts for Splines Glenn G. ChappellCHAPPELLG@member.ams.org U. of Alaska Fairbanks CS 481/681 Lecture Notes Friday, February 27, 2004

2. Review:VR User Interface • In CS 381, we discussed “view the world” and “move in the world” interfaces. We also discussed picking, keyboard-handling, and menus. • There are three problems here: • How to Navigate • “Move in the World”: flying, driving, etc. • How to Manipulate Objects. • “View the World”, picking • How to Initiate Actions • How to tell the computer what you want: picking, keyboard, menu. • All of these are trickier in VR. • Possible project: Implement a new idea for solving one of these problems in VR. • If you say, “I’m going to implement this idea,” and your proposal is approved, then implementing your idea, in a well-written program, gets you 100% on your project. • It may turn out that your idea was a lousy one. You will not be downgraded for this. CS 481/681

3. Review:Intro. to Object Descriptions • Descriptions of surfaces (and thus of 3-D objects) can be roughly split into three types: • Polygon List • A list of the polygons (and/or polylines, points) that make up a surface. • Example: triangle (0, 0, 0), (0.5, 0, 0), (1, 1.2, 0); triangle (1, 1.2, 0), (0.5, 0, 0), (2, 1, 1). • Explicit Description • Surface is described explicitly, using formulae. • We call this a parametric surface. • Example: (s, t, t2), for 0  s  1 and 0  t  1. • Implicit Description • Surface is described implicitly, using equations. • Example: x3 + 3xyz3 + 4z2sin y = 8. CS 481/681

4. Object Descriptions:Pro’s & Con’s [1/2] • Polygon List • Drawing is fast & easy.  • Hard to modify; the “original intent” is lost.  • E.g., what does “make this smoother” mean? • More on this soon. • Explicit Description • Easy to change smoothness, etc.  • Relatively quick to draw.  • It is sometimes difficult to generate formulae, based on an idea of what the surface should look like.  • Implicit Description • Easy to change smoothness, etc.  • Drawing can be slow & inaccurate.  • It is often easy to generate the surface description, based on an idea of what the surface should look like.  • Remember bitmap vs. outline/stroke fonts? CS 481/681

5. Object Descriptions:Pro’s & Con’s [2/2] • A quick (and vastly oversimplified) summary of the pro’s & con’s of explicit vs. implicit surface descriptions. Idea SurfaceDescription Polygon List&Rendered Image This part can be tricky when using explicit descriptions. This part can be tricky when using implicit descriptions. CS 481/681

6. Curve Drawing:Why Curve-Drawing? • OpenGL does not have any curve primitives. • Still, we would like to be able to draw curves and, more importantly, smooth curved surfaces. • Even graphics API’s that have curve primitives may not have primitives that fit our application. • For example, MacOS Quickdraw has an ellipse primitive. This is great for drawing round-cornered windows. But suppose we want to design a car using a Quickdraw-based program. Do we want every curve in our car to be an ellipse? (Hint: No.) • Thus, curve drawing is an important topic. • Now we look briefly at general ideas concerning curve drawing. • The ideas presented apply equally well to curved surfaces. • Shortly, we will cover specific types of curves & curved surfaces called splines. CS 481/681

7. Curve Drawing:Questions • How do we draw curves without curve primitives? • What are good ways to describe curves? • We want speed. • We want to be able to draw a smooth-looking curve very quickly. • We do not want to use up much space. • We want to be able to store the description of a curve (in memory or in a file) without taking up an large amount of space. • We need a good curve-designing interface. • Users do not want to write algebraic formulae; they want a curve that “looks like this”. • Users like to edit curves (“make it flatter here”). • Other issues. • What does it mean for a curve to be “smooth”? • Is there a notion of a “good looking” curve that is precise enough that we can write a program based on it? • We want to be able to take advantage of faster hardware to produce smoother-looking curves without completely rewriting our program. CS 481/681

8. Curve Drawing:Approximation [1/2] • How do we draw curves without curve primitives? • We approximate a curve using a polyline. • In OpenGL: GL_LINE_STRIP or GL_LINE_LOOP. • For example, we can approximate a circle using a polygon. • The more vertices we use, the better our approximation is. Lousy approximation (3 vertices) Better approximation (7 vertices) Very good approximation (many vertices) CS 481/681

9. Curve Drawing:Approximation [2/2] • We want to be able to take advantage of faster hardware to produce smoother-looking curves without completely rewriting our program. • We want to be able to store the description of a curve (in memory or in a file) without taking up an inordinate amount of space. • Think of a circle as a circle, not as a polygon using a particular set of vertices. • If we stored our “circle” using the coordinates of the 7 points in the middle approximation, then we could not make a smoother curve without recalculating the points. • On the other hand, if we write a function that approximates a circle using n points (where n is a parameter), then we can draw a smoother-looking “circle” simply by increasing n. Lousy approximation (3 vertices) Better approximation (7 vertices) Very good approximation (many vertices) CS 481/681

10. Curve Drawing:Circle Example [1/3] • Suppose we want to draw a circle of radius r, centered at the point (x,y). How should we do this? • Write a function that draws a circle of radius 1 centered at (0,0). Then r and (x,y) can be handled using the model/view transformation. • The x and y coordinates of any point on the unit circle centered at the origin are given by the cosine and the sine of some angle. • So we loop from 0 to (almost) 2 radians, stepping by the proper amount. • Our function should take one parameter: an int telling how many points to use when approximating the circle. • We will do only glVertex calls in our function. That way, we can use the same function to draw both filled and outline circles. CS 481/681

11. Curve Drawing:Circle Example [2/3] // drawcirc // Draw a unit circle centered at (0,0) in the x,y-plane. // Approximate using a regular polygon with n vertices. // Should only be called inside a glBegin/glEnd pair. // Uses cos, sin, M_PI from <cmath>/<math.h>. void drawcirc(int n) { for (int i=0; i<n; ++i) { double angle = double(i)*2.*M_PI/n; // angle in radians glVertex2d(cos(angle), sin(angle)); } } CS 481/681

12. Curve Drawing:Circle Example [3/3] • The function on the previous slide can draw a “circle”: • With any radius • Centered at any point. • Approximated with any number of points. • In any color. • Filled or outline. • Usage example(radius 2, centered at (3,4), drawn with 10 points, in red, filled): const int detail = 10; // Approximate circles using 10 points glTranslated(3.,4.,0.); // Center = (3,4) glScaled(2.,2.,1.); // Radius = 2 glColor3d(1.,0.,0.); // Red glBegin(GL_POLYGON); // Filled drawcirc(detail); glEnd(); CS 481/681

13. Curve Drawing:Beyond Circles • The above code is fine for circles (or, with clever scaling, ellipses), but we have other requirements that circles do not meet. • We want to draw more general curves that are: • Easily specified (“I want a curve that looks like this”). • Easily edited. • Smooth and “good looking” (whatever that means). • Still describable in a compact form and drawable quickly, just like circles. • The answer to our problems is called a spline. • We will be covering splines for the next few class meetings. CS 481/681

14. Concepts for Splines:Overview • We have mentioned a number of requirements that, if they were met, would make a useful way of describing curves. • All of these requirements are met by curves known as splines. • Splines are heavily used in CG and CAD/CAM. • They were invented in the 1960’s, for use in car design. • There are many types of splines. • We will spend most of our time on Bézier curves. • We will also mention some other types: cubic splines, Catmull-Rom splines, B-splines, and NURBS. • Now, we look at some of the background that is necessary for dealing with splines: • Parametric curves. • Curves in pieces. • Polynomials. • Curve-design user interface. CS 481/681

15. Concepts for Splines:Parametric Curves [1/4] • A (2-D) parametric curve is expressed as a pair of (mathematical) functions: P(t) = ( x(t), y(t) ), plus an interval [a,b] of legal values for t. • t is the parameter. • Example: x(t) = cos t, y(t) = sin t, t in [0,2].This gives a unit circle centered at (0,0). • The circle code discussed earlier is based on this parameterization. y t = /2 t =  t = 0 (start) x t = 2 (end) (cos t, sin t) CS 481/681

16. Concepts for Splines:Parametric Curves [2/4] • Here is the circle-drawing code again. • This is based on the parameterization shown on the previous slide (“angle” below is “t” in the parameterization). void drawcirc(int n) { for (int i=0; i<n; ++i) { double angle = double(i)*2.*M_PI/n; // angle in radians glVertex2d(cos(angle), sin(angle)); } } CS 481/681

17. Concepts for Splines:Parametric Curves [3/4] • In a parametric curve, the parameter is called “t”, because we often think of it as standing for “time”. • Think of a particle traveling along a curve. • Time starts at t = a and ends at t = b. • The position of the particle at time t is given by the function values: (x(t), y(t)). • The velocity of the particle at time t is given by the derivative: (x(t), y(t)). • The acceleration of the particle at time t is given by the 2nd derivative: (x(t), y(t)). CS 481/681

18. Concepts for Splines:Parametric Curves [4/4] • For our purposes, parametric curves have a number of advantages over the “y = f(x)” curves that are the main topic of algebra and lower calculus classes. • Every 2-D curve can be described as a parametric curve. • “y = f(x)” curves are limited to those that do not hit any vertical line more than once. • With parametric curves, we are never interested in dy/dx; all of our derivatives are taken with respect to t. Thus, vertical tangent lines and infinite slope do not present a problem. • Some other nice things about parametric curves: • There are very simple formulas for the velocity and acceleration vectors (see the previous slide). • Parametric curves also allow us to come up with a simple formal definition of what it means for a curve to be “smooth”, as we will see later. CS 481/681

19. Concepts for Splines:Curves in Pieces [1/2] • Rather than come up with some terribly complex formula that describes the entirety of a curve, we will allow ourselves to describe curves in pieces. • Each piece may have a different formula. • However, the pieces, when joined together, will form a smooth, seamless whole. • Now we look at some examples. • These are described visually; however, we can talk about smoothness in a precise mathematical way that does not depend on subjective judgment. CS 481/681

20. Concepts for Splines:Curves in Pieces [2/2] • Examples: • These two curves do not fit together at all. • These two curves fit together, but not smoothly. • These two curves fit together smoothly. CS 481/681

21. Concepts for Splines:Polynomials • We want to describe curves using polynomials. • Example: x(t) = 6.5t5 – 7.2t3 + 3t2 – 2.1t – 5. • Polynomial functions have a number of nice features. • Polynomials are easy to describe. • Only need the coefficients (above: 6.5, 0, -7.2, 3, -2.1, -5). • We can store a polynomial internally using a few double’s. Other functions require more complex structures. • Polynomials are easy to differentiate • Remember nxn-1. • Polynomials are easy to calculate. • Here, “easy” = “fast”. • Operations required are addition, subtraction, and multiplication. • The circle example we discussed did not use polynomials. • It used sine & cosine. CS 481/681

22. Concepts for Splines:User Interface [1/4] • One important issue related to curve description is that of user interface. • Users do not want to give formulas for curves; they want to say “I need a curve that looks like this.” • Users want to be able to edit curves without starting over. • We would like to do all this using a GUI. CS 481/681

23. Concepts for Splines:User Interface [2/4] P1 • A very successful technique for interactive curve design has been to allow users to specify a curve using control points. • Given a sequence of control points, we can draw a smooth curve in essentially two ways: • Interpolating (through the control points). • Approximating (near the control points). Example Control Points P3 P0 P2 P1 Interpolating Curve P3 P0 P2 P1 Approximating Curve P3 P0 P2 CS 481/681

24. Concepts for Splines:User Interface [3/4] • Edit curves by moving control points (click and drag): • Original curve. • Curve after P2 is moved. • This gives us a nice interactive editing procedure: • Draw some control points. • Look at the resulting curve. • Adjust the control points until the desired curve is achieved. P1 P3 P0 P2 P1 P3 P0 P2 CS 481/681

25. Concepts for Splines:User Interface [4/4] • Using control points is convenient in many situations. • Suppose I am writing a fly-through of a scene. I need to specify a camera path. • Specifying every single point on the camera path (that is, the position of the camera in every frame) would be extremely laborious; it also would require re-calculation if my frame rate increases. • Giving a formula for the camera path would also be difficult. • Solution: Specify the camera position at a few key frames. Use these positions as control points for the curve giving the entire camera path. CS 481/681