The book chapter (FCG15) describes multiple ways to define curves. We are going to focus on parametric curves in this workbook.
A parametric curve is a shape represented by a function , which returns 2D values. We can think of it as either or as separate functions for each dimension, .
The parameter 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.
For a function, we need to know the right range for the interval. For functions meant to go from 0 to 1, I'll use the parameter variable u.
There is no loss of generality - we can always scale the parameter to the right range.
Here are some examples of some curves:
You can see the parametric functions in the file
1-curve.js. You should also look at the
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 speed 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, but I wanted to emphasize the idea that we can draw parametric curves by sampling a bunch of parameter values.
In this program, I am drawing the curves by choosing parameter values with even spacing. But this means that I need to know how many samples to use when drawing the curve. For line segments, I can use 2 samples (0 and 1). However, for the smoother shapes I 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, I didn't even try to use 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.
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 I am now drawing the tangent vector (scaled by 40% so it fits nicely in the box). Note that I did not put the tangent in for the parabola: that is left as an exercise. (have the parabola function return the correct derivatives). This is good practice at doing calculus in code for curves. We'll do more later.
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.
For the lines, notice that 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.
In this page, we looked at parametric functions and how to draw them. On the next page we will look at continuity in more detail.