Page 2: Parametric Curves

If you want to see a lecture-format segment explaining what is going on with the parameter in parametric curves, there is a 2023 lecture video. The 2023 lecture videos are optional (but the The Continuity of Splines is required).

If we think of curves as something you can draw with a pen, we can use this “process” (of the pen moving over the curve) to define the curve. The idea of a parametric representation is that we use this “free parameter” (time) to index the set of points. We define a curve by a function that maps from time to a position in space.

There is a second piece to the definition: we need to know the range of times that we can ask positions about. Without loss of generality, we can always describe the range as going from beginning (0) to end (1), which is quite convenient. Sometimes we might want to use a different range, but we can scale and shift the range accordingly.

It is often convenient to have the parameter range over the unit interval from 0 to 1. When the free parameter ranges over the unit interval, we often denote it as u (to remind us that this is a unit parameterization). This is a convention, but I will try to use the convention consistently. If you see a different parameter, it may mean something else.

Parametric Curves and Parameterizations

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 spans some range. The curve maps the interval (the range of the parameter) to a set of points in 2D.

Here is an example: the horizontal line segment from (0,0) to (1,0):

Hopefully, this makes sense: put in u values, and get out points on the line segment. If we put in “all” the times, we get “all” the points (the infinite set).

Imagine tracing the same line segment twice. The first time, you go slowly at an even speed; the second time, you start slowly and speed up. Or maybe you draw right to left rather than left to right.

Notice that all three dots trace over the same line segment over the unit interval. Since we define the curve as the set of points traced, all three ways to draw the line segment are equivalent. We call these different parameterizations of the curve.

If you’re curious, here are the functions for the different parameterizations of the line segment. (In terms of the unit line segment; in the code, I have transformed it to put it in the right place in the Canvas).

Notice that all of them map the interval [0,1] to the line segment [(0,0), (1,0)].

This is a boring function, but hopefully it makes the point that with a parametric representation we define curves as a function of the parameter, and that this is not unique. We can have multiple parameterizations.

Drawing Some Curves

Part of the reason we like parametric representations in computer graphics is that they are easy to draw. All we need to do is try a few different values of u, and connect the dots. Sometimes it’s a little trickier than that (since we need to know how many values to try, and how to connect them), but the simple strategy often works well.

Here is a box that shows some example curves:

The program is in 03-02-01.js . But let’s start by discussing the curves that it draws. All of these are curves that are defined over a u range of 0-1. You can see how the curve is “drawn” as u proceeds from 0 to 1. The drawing motion isn’t always important, if all we care about is the resulting thing that is drawn.

For each curve, we simply need to define some function $\mathbf{f}(u)$ that provides a 2D point for each value.

Notice that the first three functions all draw the exact same vertical line segment (offset along the x-axis) but do so slightly differently. Depending on the parameterization (which function is being used), the point (or “pen”) moves (or draws) the line in a different way. The “pen” may move faster or slower, or change its speed as it draws from time 0 to time 1.

Here are the functions:

20
21
22
23
24
25
26
27
28

function line1(u) {
  return [0, 100 * u];
}
function line2(u) {
  return [0, 100 * (1 - u)];
}
function line3(u) {
  return [0, 100 * u * u];
}

For this demo, we define the functions as functions. We assume that it is defined over the range 0-1.

The circle and parabola should not be a surprise. You can look in 03-02-01.js to find them.

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.

53
54
55
56

function twoLines(u) {
    if (u < 0.5) return [20 + 80 * u, 200 * u];
    else return [20+ 80 * u, 100 - 200 * (u - 0.5)];
  }

This simple example is important: notice how the curve “switches” at a u value. For each piece, it is well-behaved. But we may need to consider the switching point as a special case. The next example is connecting pieces from two circles (two arcs). It is similar.

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.

Now we can look at the plotter function. It draws a curve - the function for the curve is passed as an argument. The parametric function is passed into the plotter via its func argument. 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 two values for the position (x,y).

There is a slight catch that when the curves have discontinuities, we are careful about how we draw them. The code draws by “connecting the dots”, so it should only connect the dots that should be connected. And, the idea of drawing by taking uniform steps in u is very simple: in practice, we might want to choose the u values strategically (we’ll get to that later).

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 that exhibit a sudden change discontinuous. We’ll discuss continuity and discontinuity on a future page.

(optional) The idea that we draw curves by approximating them by a bunch of line segments (or other simple pieces) is described in a lecture video. This also talks about the issues in turning curves into pixels (which we won’t actually cover in this workbook).

Drawing Curves in Practice

Drawing a curve by sampling a bunch of u values will turn out to be an inefficient strategy: we need to figure out how many u values to choose to convey the curve. If we draw too few, it won’t look “curvy”. If we draw too many, it is wasteful. We want to base the number of curve points on the number of pixels: enough points so there are no gaps, but nothing wasted by drawing the same pixel many times.

For many kinds of curves, there are highly efficient algorithms for drawing them “pixel perfect”. Unfortunately, we won’t cover them in class. But, we know that the API (or even the graphics hardware) can do this. Therefore, the right strategy for drawing curves efficiently is (almost always) to try to convert them to the kinds of curves that the API knows how to draw efficiently. These include straight line segments, elliptical arcs (affine transformations of circles), and Bezier curve segments (we’ll explain those in a bit).

Summary: Parametric Functions

On this page, we looked at parametric functions and how to draw them. The workbook will explore them in depth. But, before we examine them further, we will look at the alternatives.