Page 6: Curve Properties

In order to work with curves, we’ll need to understand the definitions of some of their basic properties.

Most of these you would learn in a Calculus class. Here, I want to give the visual intuitions (and a refresher if you don’t remember the calculus).

Some properties of curves describe only a single place on the curve, while other properties require knowledge of the whole curve. For an intuition of the difference, imagine that the curve is a train track. If you are standing on the track on a foggy day you can tell that the track is straight or curving and whether or not you at at an end point. These are local properties. You cannot tell whether or not the track is a closed curve, or crosses itself, or how long it is. We call the second kind a global property.

Global properties include whether or not a curve is closed, how long it is (from beginning to end), whether it crosses itself, and its bounding box.

Local properties refer to specific points on a curve.

Tangents

The tangent is a concept that you are hopefully familiar with from Calculus. We will review it here to give some geometric intuitions.

The tangent to a curve at a particular point is the velocity vector of the pen as it moves along the curve. To use a different metaphor, imagine the curve is a road and the “pen” is a car driving along the road. At any given time (parameter value) the car has a position on the road (that is given by the parametric function). Instantaneously, the car is going in a specific direction - the way the headlights are pointing. The line of that direction, the way the headlights go, is the tangent line.

The tangent can also be described as the line that touches the curve at a particular point. If the curve isn’t straight the tangent line will touch the curve at this one point. The idea of “touching” is local - if it touches at the current point, it doesn’t touch nearby (but it might touch farther away).

If the curve is a straight line, then the tangent line is this straight line. Notice here that when the point transitions from one line segment to the next as it goes around the triangle, the tangent jumps.

In fact, one way to think about the tangent is that even for a “curvy” curve, if you look at the curve at a point locally, you can think of it as an infinitesimal line segment. The tangent is a vector in the direction of this line, whose magnitude (length) is how fast the parameterization is “moving” through the point. If things move faster, the tangent has the same direction, but a greater magnitude.

This demo illustrates that. The smaller circle has the same angular rate, so its actual point velocity is much smaller, so it has a smaller tangent vector. On the right the point is moving faster (it goes around the circle twice), so its vector is longer.

Here is another illustration of that. There are two line segments: in one, the curve “speeds up”, in the other, it slows down.

Here’s a pair of circles, parameterized in opposite directions. Notice that at the point where the two circles meet, the positions and tangents are the same (the tangents both point downward).

Here is a curve made of half of each of those circles. Notice that when we “switch” from one circle to the other, the tangent vector is the same. However, the way that it is changing switches.

Computing Tangents

We compute the tangent vector by taking the derivative of the parametric function with respect to the parameter. If the parametric function is a vector valued function of the parameter, $(x,y)=\mathbf{f}(u)$, then the tangent is also a vector valued function (I’ll call it f’)

When we program, we need to define the tangent function somehow. There are many different ways to compute derivatives. For now, we’ll use a straightforward way: we’ll do the calculus by hand (take the derivative of the parametric function), and put that function into the code along with the parametric function.

Here is another version of the demo from Page  2  (Parametric Curves) that shows the tangent vectors for each of the curves. This means the program must compute the tangents for each of the functions. In this case, I chose to compute the position and tangent in one function; it is convenient to keep these things together. If you look at the parametric functions, you will notice that they return a list of four numbers: $x,y,t_x,t_y$.

Note that we did not put the tangent in for the parabola; that is left as an exercise. Have the parabola function in 03-06-01.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; the function should return the actual derivatives that make up the tangent.)

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

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 shape and disconnected lines. This is a discontinuity in the derivatives.

Beyond Tangents

A few other properties of curves will be useful for our discussion.

The second derivative of the curve, the rate that the tangent vector changes, is often useful. If we think of the tangent vector as the velocity, then the second derivative is the acceleration.

Here, we draw the acceleration vector in green (along with the tangent vector). For the circle, the tangent vector is constantly changing, it is always turning towards the center of the circle. Because the dot is moving at a constant rate around the circle, there is no change in the velocity in the direction the dot is traveling; all of the change is perpendicular to the direction of travel.

In contrast, here is the example from above where things do not change direction, but they do change speed. Here, the acceleration is constant (the motion is parabolic, $(u^2,0)$) and $(1-(1-u{)}^2)$.

We can think of acceleration in two parts: the amount of change in the direction of travel, and the amount of change in other directions (perpendicular to the tangent, or direction of travel).

We use the term normal to mean “perpendicular to the tangent.” As a direction, it is just perpendicular (the infinite line), but as a vector we use it to be pointing in the direction towards the center of the turn. For example, with the circle, the normal vector is always inward. For the line, we can define a normal direction line, but we don’t know if it should be right or left of the direction of travel.

More formally, the normal is the projection of the 2nd derivative vector into the space perpendicular to the tangent (the tangent line in 2D).

Why do we care?

Tangents and normals are important properties in graphics because they convey how things curve. This is important when we think about describing shape. It is essential when we try to define what it means for a shape to be “smooth”, which we will do on the next page.

Next: Page  7 - Smoothness and Continuity