Page 12: Curve review

We covered a lot about curves this week. To make sure you got everything, this page has a summary, and a few exercises to test your understanding.

Outline of Curve Topics

The main points in the workbooks / lectures about curves:

1. The idea of curves, and their basic definitions.
2. The idea of parametric representations - where we describe curves as a function of a free parameter.
3. The idea of tangents and, more generally, the derivatives of curves.
4. The idea of continuity, where we talk about how curve pieces connect to make bigger curves.
5. The idea of splines or piecewise polynomial representations, which are the most common way we represent curves in computer graphics.
6. The idea of using cubic polynomials for the curve pieces, which is the most common thing we do in computer graphics.
7. The idea of using Hermite interpolation to give easy control over cubics by specifying the beginning and end of each segment.
8. The idea of using cardinal interpolation to give easy control over Hermite interpolation by computing the derivatives from the point positions. Catmull-Rom splines are an important special case.
9. The reasons why we prefer to do interpolation by using a piecewise polynomial (like a cardinal spline), rather than fewer higher-order pieces. (this was emphasized more in the book and lecture)
10. The reasons why we often prefer approximating curves to interpolation, to give us better control of a curve shape.
11. The nice properties of Bézier curves that make them a very popular choice in graphics applications.
12. The geometric derivation of Bézier with the DeCastlejau construction which provides us with intuitions for how the curves work, but also practical algorithms.
13. The specific form of Bézier Cubics, which resemble Hermit cubics and are very common in graphics applications.
14. The Basis Functions of Bézier curves, which provide a way to evaluate the curves and a sense of the mathematical elegance.
15. How Bézier curves are applied in the APIs we use.
16. The idea of arc length parameterizations of curves, where the length of the curve is used for parameterization, allowing for the parameter to have a more direct connection to location.

These are all important, and it’s a lot, so some practice may be worthwhile.

Drawing Cardinal Splines

Cardinal splines are very useful, but they are not built into the Web APIs. This isn’t a problem because it is easy to convert Cardinal segments to Bézier segments, and APIs can draw Béziers well.

To practice that, here is a Cardinal Spline to draw. In this figure there are 5 points to connect with a Cardinal spline - we’ve drawn line segments between the points rather than Cardinals. Replace the line segments with Cardinal splines, so that the picture is $C(1)$. Use Catmull-Rom splines (cardinals with t=0, or s=0.5).

There are two catches here:

1. Canvas doesn’t have Cardinal Splines - you must convert each Cardinal segment to a Bezier segment. You need to replace each of the lineTo commands in 05-12-01.js with a bezierCurveTo command, and compute the positions of the control points.
2. The spline is “looped” - the last point connects to the first. This means when you need to get the “next” point after the last point, you go around the loop.

Edit 05-12-01.js to do this exercise - you shouldn’t need to change 05-12-01.html.

Observe how the the cardinal spline does not fit within the original “control polygon”. You will have Bézier control points outside of the original cardinal control polygon - since the Bézier curve does stay inside of its control polygon.

To earn advanced points and also practice arc-length parameterization which is useful for the next workbook (Project 1), draw 20 points that are equally spaced (equal arc-length between consecutive points) along the curve. The points should have a different color than the curve itself (so they are clearly visible) and they can be either squares or circles. You can earn some of the advanced points if you have 20 points along the curve that are not equally spaced.

Bézier Curve Algorithms

We discussed both algebraic ways to compute Bézier curves (the blending function polynomials), and geometric approaches.

Using the blending functions may be easier/faster for computing values in a program. I find it easier to use DeCastlejau when I have to compute things by hand. The DeCastlejau algorithm is useful when we need to split curves, and it has the advantage that it provides us with the tangents as part of the computation process.

To practice with using the DeCastlejau algorithm, take the curve in this figure 05-12-02.svg and split it into three parts with even parameter amounts (e.g., u=1/3 and 2/3). Take the one curve in the picture, and replace it with 3 curves that are different colors (make the first one red, the second one green, and the third blue) - that are geometrically the same curve. We need to make separate curves because in SVG we haven’t learned to make a single curve that is three colors. (even if you know how to do that, don’t - we will check that your result has 3 separate path statements).

Round numbers to integers (when you do the computations, you may get fractions).

And now to make good use of this…

Move on to Next: The 559 2D UI Code where we will do something interesting with curves.