Page 1: The Train: Intro

CS559 Spring 2023 Sample Solution

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, here is an example train Professor Gleicher made: train demo. 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. Note: the code is obfuscated, so you cannot refer to it in creating your own train.

The train uses similar UI code to the draggablePoints (it’s an earlier version) on the last page. 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 in the previous workbook). 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.

Note: we put the box on this page, but you probably want to look at it on its own as tr-01-01.html with the code in tr-01-01.js.

You must list the features you have implemented in the p1-workbook.txt on the next page.

Next: The Train: Assignment

Page 1 Rubric (53 points total)
Points (22):
Box tr-01-01
4 pt
Drawing the track as a single simple curve (cardinal spline) that interpolates the control points
Box tr-01-01
5 pt
Train goes around the track correctly ('evenly in parameter space' - continuous looping motion)
Box tr-01-01
2 pt
The interface still works (the track can be moved and the run slider works, even while the train is in motion)
Box tr-01-01
2 pt
Train has a front
Box tr-01-01
3 pt
Train points in the right direction as it goes around the track
Box tr-01-01
3 pt
Train direction and motion is correct even as points are added/removed
Box tr-01-01
3 pt
Default track configuration shows off arc length (train should speed up and slow down if arc length parameterization is turned off or not implemented)
Advanced points (31) :
Box tr-01-01
3 pt
Arc Length parameterization (train goes at a relatively constant speed as it goes around the track, no matter what the control point spacing is). You must add a checkbox to turn this on and off. This one is hard, but it enables several of the other things, so it is actually worth a lot
Box tr-01-01
2 pt
Rail Ties drawn perpendicular to track
Box tr-01-01
2 pt
Rail Ties drawn with correct spacing (this is simple once you have arc-length
Box tr-01-01
3 pt
Parallel rails
Box tr-01-01
3 pt
Multiple cars all of them centered on the track
Box tr-01-01
3 pt
Multiple cars that are fixed distance apart)
Box tr-01-01
3 pt
Trucked wheels (requires keeping the pairs of wheels the correct distance apart and on the track, and having the train car positioned appropriately - this is only for people who are into trains and appreciate this detail)
Box tr-01-01
2 pt
Slider to control tension
Box tr-01-01
4 pt
Switchable B-Splines
Box tr-01-01
2 pt
Smoke
Box tr-01-01
2 pt
Scenery
Box tr-01-01
2 pt
Scenery adapts to the track