Page 1: Curves

FCG4 Chapter 15 and the lectures describe multiple ways to define curves. We are going to focus on parametric curves in this workbook. You still need to know about subdivision and implicit representations. (we’ll talk about subdivision more later in the class)

Think of curves as something you can draw with a pen. For this workbook, we’ll be considering curves in 2D (so the tip on the pen is on a piece of paper). Almost everything applies to curves in higher dimensions (for example, if we recorded the position of the pen in 3D space).

As in the reading and lectures, there are two different “mathematical” definitions of curves.

1. The set of points (i.e., the places the pen went over the time of drawing)
2. The mapping from time to position (i.e., the movement of the pen)

To see the difference: imagine tracing the same line twice. The first time, you go slowly at an even speed; the second time you start slowly and speed up. These are the same curve, according to definition 1, but different curves according to definition 2. Generally, we will use definition 1, and refer to the different mappings as different parameterizations of the same curve.

Box 1: Parametric Curves in 2D

A parametric curve (in 2D) is a shape represented by a function $f(u)$, which returns 2D values. We can think of it as either $\mathbf x=f(u)$ or as separate functions for each dimension, $x=f_x(u), y=f_y(u)$.

The parameter $u$ of this function is the “free parameter” and it goes over some range. The curve maps the interval (the range of the parameter) to a set of points in 2D.

To define such a function, we will need to know the range of its input parameter. We will typically use the symbol u for an input parameter that goes from 0 to 1.

Restricting the input range to [0, 1] causes no loss of generality - we can always shift or scale the parameter to a different range inside our function.

05-01-01.js ( 05-01-01.html) has examples of some curves:

You can look for the parametric functions in 05-01-01.js, but the actual code is in 05-01-curves.js. You should also look at the plotter function. Various parametric functions are defined elsewhere in the file, and then passed into the plotter via its func parameter. This allows the plotter to draw any parametric function whose input ranges from 0 to 1. Notice that given a u value, each parametric function returns a list of 4 values: 2 for the position (x,y), and 2 for the tangent (x’,y’).

Notice that the first three functions all draw the same line segment - however, the point moves differently. Notice that in the third line segment, the point starts out slowly and speeds up.

The circle and parabola should not be surprises.

The V shaped curve is effectively two line segments, with an if statement that switches between them at u=.5. This is an example of how we make a compound shape from simpler pieces.

The last curve - the two line segments on the right - is a single curve, it is just not connected. The pen “jumps” at .5 (look at the way the function is defined). This is very similar to the V shape, except that rather than just changing direction at .5, the pen jumps to a different spot.

If you look at the plotter function, you can see that these curves are actually being drawn by approximating them by a number of line segments. Canvas is actually capable of drawing all of these shapes directly, but our code emphasizes the idea that we can draw parametric curves by sampling a bunch of parameter values. We’ll return to this idea later in the workbook.

In this program, we are drawing the curves by choosing parameter values with even spacing. But this means that we need to know how many samples to use when drawing the curve. For line segments, we only need two samples: u=0 and u=1, representing the endpoints of the line segment. However, for the smoother shapes we use many segments (the circle uses 50) so that the shape looks as if it were a continuous circle. If you look carefully, you’d see it’s really a 50-sided polygon.

For curves where there is an abrupt change (such as the abrupt change in direction in the V or the jump in position in the two lines on the right), we need to be careful to choose values around the jump. In fact, for the two lines, we are not using the plotter code (which assumes that things are connected). We will call curves where there is a sudden change discontinuous. We’ll discuss continuity and discontinuity on a future page.

Tangents

The tangent to a curve at a particular point is the line that touches the curve at that point. Another way to think of it is that the tangent is the velocity vector of the pen. To determine the tangent at a particular point, we take the derivative of the point location (the parametric function) with respect to the parameter.

This figure is similar to Figure 1, except that we are now drawing the tangent vectors (the drawing code scales the tangents by 40% so they fit nicely in the box). Note that we did not put the tangent in for the parabola: that is left as an exercise. Have the parabola function in 05-01-curves.js return the correct derivatives. This is good practice at doing calculus in code for curves. We’ll do more later. (note: the drawing code does the 40% scaling, your function should return the actual derivatives that make up the tangent).

Observe that in all cases (after you fix the derivatives for the parabola), the tangent vector points in the direction that the pen moves as the parameter goes up in value.

Notice that for the first two lines the tangent is constant, while for the third line (the one that starts slowly and speeds up) the tangent grows as the point moves downward.

And notice how the tangent changes abruptly for the V and disconnected lines. This is a discontinuity in the derivatives.

Summary: Parametric Functions

In this page, we looked at parametric functions and how to draw them. On Page 2: Piecewise Parameteric Curves and Continuity we will look at continuity in more detail.