# Page 2: The Train: Intro

## CS559 Spring 2021 Sample Solution - Workbook 6

Written by CS559 course staff

You can try out the example solutions here. The interesting code is on page 3.

In this assignment, you’ll make a train that goes around a track. We’ve had students make trains since the first offering of CS559 (see the 1999 Train Assignment for historical perspective). If you’re really curious about the old assignment, you can see the 2014 Train Assignment (and the fun picture of the train expert from the 2008 Train Assignment). In the past, the train was later in the semester when we were already working in 3D. In 3D, the trains are more like roller coasters. Don’t worry, this is a much smaller assignment than the old 3D projects.

For this assignment, you’ll make a train in 2D with a top down view. You can make a 3D train or roller coaster later in the semester.

Before we actually have you make the train, I will let you play with one I made a few years ago. This was made as a test before we made the assignment, so it doesn’t meet all the requirements. And it’s from 2019. But it gives the basic ideas. You can play with it at the train demo. Note: the code is obfuscated, so you cannot refer to it in creating your own train.

My train uses similar UI code to the draggablePoints (it’s an earlier version) that you saw in last week’s workbook. You can drag the control points (the black dots). You can add more (by shift clicking), and delete points (by ctrl clicking). When you make your train, you also need to use draggablePoints.

You can use this demo to get an idea of some of the key features of the assignment on the next page. You may want to go back to the demo as you work on the assignment.

Here, I want to use the demo to show off some key curve ideas. The idea of the train assignment is that it lets you implement these curve ideas. But, just playing with the program can help you appreciate them. And since you haven’t made your own train yet, you can use mine.

1. The track is a cardinal cubic spline. Move the control points around to get a feel for how a cardinal spline behaves. To see the actual curve, click the simple track option. The track is a loop.The “simple track” option converts the cardinal spline to a series of Beziers (just like you did on the previous page). I do not show the Bezier control points.

2. The position of the train is determined by evaluating the cardinal spline. We compute the cardinal cubic at the parameter value to get the position. We evaluate the tangent at the parameter value to determine which direction the train is pointing (the train points in the direction it is moving). The assignment says the train must have an obvious front - for me it’s the side with the light on it.

3. To understand the parameters of the cardinal spline, turn off arc length parameterization. Notice that the slider (for the parameter) goes from 0 to the number of points. For example, a value of 2.5 says the train is between points 2 and 3, with $u$ value 0.5.

4. In case you haven’t figured it out already: use the slider to change the parameter value and make the train go around the track. If you click the button on the left of the slider it runs continually. This is a feature of the UI code that you will get.

5. To understand arc length parameterization… notice how (in the initial layout at least) the three points at the bottom are closer together than the points at the top. The spline segment between two of the close points at the bottom is much shorter than the segment between the points on top. Yet, each segment has the same $u$ range, so it takes the same amount of time to traverse. When you run the train (with arc-length parameterization off), it slows down on the parts where the points are close together, and speeds up when they are farther apart. If you turn on arc-length parameterization, the train goes at a constant speed around the track.

6. If you turn off “simple-track”, you’ll see my track with parallel rails and rail ties (the thing that go across the two rails). The rail ties always use arc-length parameterization, so they are spaced apart evenly. The rail ties are perpendicular to the track - we can use the tangent, and turn 90 degrees. If you don’t use arc-length parameterization, they are spaced unevenly and look silly.

7. The parallel rails are interesting because they turn out to be complex mathematically. To have “parallel curves” we need to have the curves be spaced apart, along the “normal” direction (the direction perpendicular to the tangent) by a fixed amount. This is called an offset curve. It turns out that the offset curve to a Bezier cubic (or any cubic), is (in general) not a cubic. (I’ve seen places say its a 10th degree polynomial). What I’ve done is approximate the offset curves by taking steps along the curve, computing the normal (by computing the tangent and turning 90 degrees), and then moving in that direction a bit. It’s kind of like connecting the ends of the rail ties, except that it’s smaller.

8. The smoke is a hack. You can watch it and figure out how simple and silly it is. I think it’s kind of fun.

9. Notice that the $C(1)$ interpolating cardinal spline isn’t very smooth - it still turns pretty sharply at the control points. To get a smoother track, we really need $C(2)$. I implemented a different type of curve, called B-Splines. If you click the B-Splines button, you will get this curve type. Notice that the B-Spline is much smoother, but it is an approximating curve: it is influenced by the control points, but it does not interpolate them. You can learn about B-Splines in the book; we will hopefully get to discuss them in lecture.

10. An important feature of my demo: all of the fancier features (parallel rails, rail ties, smoke, arc-length parameterization, B-Splines) can be turned on and off. Click the checkboxes, and you can see the basic train. If a grader were grading it, they could check that I did the basic assignment.

Hopefully, following along with that both gives you a sense of what the train is like, and also how it connects to many of the curve concepts we’ve seen. So you should be ready to try it yourself on the next page.

Next: The Train: Assignment