Curve Drawing, Concepts for Splines

1
Curve Drawing,Concepts for Splines

• Glenn G. ChappellCHAPPELLG_at_member.ams.org
• U. of Alaska Fairbanks
• CS 481/681 Lecture Notes
• Friday, February 27, 2004

2
ReviewVR 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, Im 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.

3
ReviewIntro. 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.

4
Object DescriptionsPros Cons 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?

5
Object DescriptionsPros Cons 2/2

• A quick (and vastly oversimplified) summary of
  the pros cons of explicit vs. implicit
  surface descriptions.

Idea
SurfaceDescription
Polygon ListRendered Image
This part can be tricky when using explicit
descriptions.
This part can be tricky when using implicit
descriptions.
6
Curve DrawingWhy 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 APIs 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.

7
Curve DrawingQuestions

• 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.

8
Curve DrawingApproximation 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.

Better approximation (7 vertices)
Lousy approximation (3 vertices)
Very good approximation (many vertices)
9
Curve DrawingApproximation 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.

Better approximation (7 vertices)
Lousy approximation (3 vertices)
Very good approximation (many vertices)
10
Curve DrawingCircle 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.

11
Curve DrawingCircle 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 ltcmathgt/ltmath.hgt.
• void drawcirc(int n)
• for (int i0 iltn i)
• double angle double(i)2.M_PI/n
• // angle in radians
• glVertex2d(cos(angle), sin(angle))

12
Curve DrawingCircle 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()

13
Curve DrawingBeyond 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.

14
Concepts for SplinesOverview

• 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 1960s, 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.

15
Concepts for SplinesParametric 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)
16
Concepts for SplinesParametric 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 i0 iltn i)
• double angle double(i)2.M_PI/n
• // angle in radians
• glVertex2d(cos(angle), sin(angle))

17
Concepts for SplinesParametric 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)).

18
Concepts for SplinesParametric 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.

19
Concepts for SplinesCurves 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.

20
Concepts for SplinesCurves 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.

21
Concepts for SplinesPolynomials

• 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
  doubles. 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.

22
Concepts for SplinesUser 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.

23
Concepts for SplinesUser 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
24
Concepts for SplinesUser 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
25
Concepts for SplinesUser 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.