The next set of programming assignments (11 and 13 – there is no 12) are linked together to make one bigger assignment. Assignment 11 will have you do the basics, and figure out the infrastructure. Then assignment 13 will have you add more advanced features.
This project is a variant of the train project from previous 559. The train was a project in the first 559 (in 1999), and has been a favorite since. If you want to see some history, check out last year’s project (2014 train) that has links to previous assignments (including 1999). Be aware: this years assignment is quite different.
This year, we’re going to only do trains in 2D. You’ll use a 2D top down view of the track. This is a big simplification – it keeps the main pedagogical goals (teaching you about curves), but avoids having to do all the 3D stuff. A big reason for this is providing infrastructure, and a UI – modern GL (which WebGL is a variant) makes it harder to implement 3D user interfaces. You can make things in 3D if you want, but it isn’t the emphasis of this assignment.
The goal of this project is to give you a chance to try out making curves (for the train tracks), and then trying out some of the more advanced stuff about curves (like arc-length parameterization, using the tangent vectors to get orientation, …)
We will provide you with some basic framework code that gives a user interface. The code makes a canvas, and stores a collection of points. It lets you move the points around (so you can reshape the track), add points (use shift-click) and delete points (backspace key). It has a time slider that allows you to scrub through time, or let the thing run – with a speed control. You don’t have to use the framework code, but it will save you time. If you write your own, you’ll need to add, delete, and move control points, as well as have a scrub-slider and a run button.
The framework code is set up to work with both WebGL and HTML5 2D Canvas. We recommend using the latter. It’s a lot simpler, and you can make things that look nice in 2D with it (which is the goal). Look at the framework code to see how much grungier the WebGL code is. If you want to do fancy visual effects with shaders, then use WebGL.
The Train Track
The main thing to make is a train track. It should use the control points (that the user can drag around). It’s best if the track updates as the user drags (and adds/deletes) points, but if your program is too slow, you can make a button for updating things.
Your program can support multiple kinds of curves for the track. One of the track types should be C(1) continuous. We recommend Catmull-Rom (cardinal) splines. However, we also recommend you start with something even easier (line segments connecting the points) – it will look silly since the train will snap its direction between segments, but at least you can get it working. A simple track is better than no track at all.
To start with, it’s OK to draw the train track as a thin line. Later you can add nicer, advanced drawing (parallel rails, rail ties, …)
The track should always be a loop. Unless you intentionally make some more complicated track with switches – in which case you’ll also need a UI for keeping the train driving along the track (that would be an advanced bonus feature).
The Train
You can draw something nice for the top view of the train. Start with something simple (make a box that goes around the track) and then add to it to make it nicer. It’s better to have a simple train that goes around the track correctly than a fancy train that does not.
Your train should have a front, so it’s clear that it is going the right way around the track. Getting the train to face the right direction is an important feature (but is beyond the basics)
The Framework Code
You can download the framework code from here (github). You can try running the test program (not really a train) here (and the WebGL version). In the directory is part of my example solution – but it won’t run since I didn’t give you the actual code for the train or curves. It is meant as an example to look at to help you understand how to wire the pieces together.
The main things you need in the code:
- There is a DotWindow – a constructor that adds the UI for points onto a canvas.
- The DotWindow makes callbacks to draw objects besides the dots (add a function to the “userDraw” list). It also calls a function whenever the list changes (use this to rest caches if you are caching values)
- There is a file called “trainTime.js” that makes the slider/timeline controller. It’s main thing is that it calls all the callbacks on the “onchange” list whenever the time changes. If the number of points in your spline changes, you need to update the “max” value of the slider (unless you renormalize somewhere). You can look in trainCurveTest (look on the “onChange” function added to the dotWindow).
Again, look at trainCurveTest.js – it won’t work (since I didn’t give you the file that defines CurveCache – but it can give you some ideas as to how the UI gets attached. The Bezier and BSpline demos (written to show those concepts in class) may be useful as well.
The Assignments
For Program 11 (due November 19th) – you need to make a basic train. There needs to be a train and a track, and the train needs to go around the track. For this, a square for the train, a line for the track is OK. The main thing with this assignment is to get the hang of working with the framework code. You should have a C(1) curve. You can have more, since you’ll need to do it for the next assignment.
There is no assignment 12 (because November 26th is Thanksgiving). So you get 2 more weeks to do assignment 13.
For Program 13 (due Dec 3rd) – you will have a nice train project. Each of the following features is worth something – but you can think of others as well. The following parts relate to the curves and are worth more in terms of grading:
- Have the train point the right direction as it goes around the track
- Have arc-length parameterization (so the train goes a constant speed) – this is essential for many other features (like rail ties and multiple cars)
- Have multiple train cars (that follow at the right distance behind the train) – this requires arc length parameterization to keep things together.
- Have rail ties (the bars that go across the rails) – again, arc length parameterization is important to get the spacing right
- Support C(1) (cardinal splines) and C(2) (cubic B-Spline) curves
- Have parallel rails
- Have tension controls for the cardinal splines
- Have “trucked wheels” – Real trains have wheels at the front and back that are both on the track and that swivel relative to the train itself. If you make real train wheels, you’ll need arc-length parameterization to keep the front and rear wheels the right distances apart (make sure to draw them so we can see them swiveling when the train goes around a tight turn).
There are of course lots of other things to add…
- Make a nicer looking train (just because it’s from the top doesn’t mean it has to be simple)
- Make the tracks look nice
- Make scenery – the background doesn’t have to just be white
- Make smoke – have the train leave a trail of smoke that dissipates
- have train crossings – with gates that go down when the train goes by
- have multiple trains – and have them slow down to avoid crashing into each other
Of course, if you want to add a 3D view, you can.
You can look at last year’s assignment for more ideas. A lot of them don’t make sense in 2D.
Evaluation
For program 11, we will grade check/no-check. You will get a check if you turn in something that has a train that goes around a C(1) track.
For program 13, we will give you a letter grade. It’s hard to predict the scoring system – but having correct direction and arc-length parameterization is probably worth a B – to get a better grade, you’ll need to add more stuff.
For both programs… You will turn in the program into your handin directory. There are separate handin directories for P11 and P13. For P11, there will be no Canvas handin required. For P13, there is a canvas link. You just need to describe what features your program has (turn it in to your handin directory).
Note: you need to turn in Program 11. Yes, Program 13 subsumes it – but it would be very late for Program 11. We really want you to do Program 11 on time so we know that you’ve started the assignment. Don’t save P13 for the last minute.