Skip to main content
Course web for the Spring 2019 Computer Graphics Class

Assignments 11 and 12: Graphics Town

Update 5/4: We realize that in the UI, we call it “driving” and object, but in the description below, we call it “riding”. To try it out, select an object in the “drive” drop down. After you “drive” the object, you can switch to “follow” mode (and it will follow the same object).

Update 4/30: We better articulated the expectations on a separate posting.

Update 4/29: We didn’t specify what happens with objects you borrow from your previous assignment. These do count. However, please make at least some new objects.

Update 4/29: We didn’t give a driving system example (just cars around the track)

Update: 4/27: There are more example objects at

Note: the starter framework (workbook) for both Assignments (there is one GitHub classroom assignment for both assignments) is available in the Canvas assignment. You can see the starter code running online (it works with my cell phone!).

Note: The assignment description is long and complicated. Read it carefully, and check for updates/clarifications.

Assignments 11 and 12 are different than prior assignments. Please read this carefully.

Unlike prior assignments where each assignment was a separate “Workbook” that was its own GIT repository, Assignments 11 and 12 will have a single GIT repository and a common due date. You will turn in one repository for both assignments. In your documentation, you will explain how your program fills the requirements for each of the assignments.

Each assignment has its own requirements and a separate rubric (see below). Each has its own bonus point opportunities. You will receive two grades in Canvas. As far as the “drop 2” rule, this is two assignments. Each one counts like any other assignment.

No assignments will be accepted after Sunday, May 5th. We will start grading shortly after that. Officially, the deadline is the last day of classes, but all students get a free “no cost extension” until Sunday, May 5. There is no penalty for turning things in up to (and including) May 5th. But, if things are turned in after May 5th, we will not grade them.


The goal of this project is to create a town. It has to be a living town, with things moving around in it. We will provide you with a starter framework. But you must add the contents of the town. Your town cannot be a dead place: there must be things moving around in it.

We hesitate to tell you what to do, since students in the past have come up with some really creative things. We’ve seen cities with skyscrapers, space cities with flying saucers, tropical islands, a Harry Potter city with flying broomsticks, … There are gallery pages with some old projects if you want some ideas (see below).

If this sounds like its arbitrarily open-ended, you have the right idea. Clearly, you could make this as fancy as you want. Obviously, we will try to set our expectations to be only somewhat unreasonable 🙂 Our goal is to give you the opportunity to demonstrate your competence at writing 3D graphics programs, as well as an opportunity to experiment with some more advanced topics that you think are interesting.

In the process of creating one program that has the town in it, you will complete two assignments. In the first (Assignment 11), you will bring the town to life by making objects in it move. In the second (Assignment 12), you will create enough objects in the town such that it’s an interesting place. For each of these parts, there are specific requirements and a grading rubric.

The two assignments are put together into one program, and the pieces are connected. Assignment 11 is about the animation, but it’s more interesting to bring things to life if they are situated in an interesting world. Assignment 12 is about the world being interesting and having interesting looking objects (which might be the ones you animated). You will probably want to work on the two things together (not necessarily do one first).

We are calling this two assignments to better fit with the grading scheme of the class. You may view this as one big assignment that has two parts that are graded separately. You will turn in one program, but receive two grades.

You will create your town by building on top of the “Graphics Town Framework” code that we will provide. This is an extended version of the software framework we have been using for the past several assignments.

All of the requirements are objects that you add to the framework (you should have experience doing this from prior assignments). Some requirements are specific, while others are more broad.

Why is this so complicated?

The description of this assignment is quite long, and the rules are complicated. This is because we want to give students enough flexibility to do interesting things that are interesting to them, but we also need to set expectations so we can grade things in a consistent manner.


Your program must have an index.html page that has a view of your town that allows the user to explore and see everything. An appropriate interface is provided by the framework. The initial repository you start with provides an empty world that provides the required user interface. (see Required Features below). You must also provide documentation in the and files.

You should not need to change the framework code. You will need to define new object types (with behaviors, through their advance methods), and update the grtown.js file to create the world appropriately by placing objects into the GrWorld. You should be experienced with doing this from prior Workbooks.

We put a few sample objects into the world. You may keep them, or remove them (some are intentionally broken – you need to fix them). You cannot count these are objects that you make. You may want to make the groundplane bigger (you give yourself more “land”), or remove it altogether. Be warned: the framework code computes the initial camera position based on the groundplane, so if you have no groundplane, you will need to give an initial camera configuration.

Your program needs to run at a reasonable frame rate on a testing computer. Don’t go too overboard with excessive numbers of objects.

Assignment 11 (Animation) Requirements: you must have enough moving objects in your world. There must be at least 5 objects moving. There must be at least 3 different “behaviors” (types of motion). A car driving and a plane flying are 2 different behaviors: even if there are many cars driving and planes flying using those behaviors. You will need to describe the behaviors you implemented in your documentation.

The rubric (see below) defines the specific things you must do. Your grade is based on how many points you accumulate. One point gets you 1/2 letter grade. If you get 7 points, you get an AB. Any points after that count towards bonus points.

There are 4 points that are “required”. 5 objects moving, 3 types of behaviors, a train track, and a train. You must have a “train” that moves around a curved track. By “train” we main some vehicle that moves on a curved path (where the curved path is drawn). It can be a train, a monorail, a roller coaster, a race car on a twisty race track, or something else. To get full credit (see rubric) the track must be a spline (probably a cardinal spline like Workbook 5). You can re-use your 2D train and draw it in 3D (see re-use below).

Assignment 12 (World) Requirements: your world must be complex enough and visually interesting enough. We will set some minimums to establish expectations, however, we don’t want to preclude people from being creative. We will also award points for “technical challenge”. There are minimums for the number of different kinds of objects that you have, and we look for the technical challenge of the most interesting of these objects. See the rubric for more details. You must also provide pictures of your program.


You will only receive credit for things that you not only implement, but also document correctly. This includes describing them in the and files as well as providing pictures as required.

We also require that you include a few images from your program (as explained in the rubric).

Use, Re-Use and Attribution

You are encouraged to use pieces from your old Workbooks for this assignment. In the past, you’ve been using the Graphics Town framework to make houses, cars, shiny objects, amusement park rides, … You need to make some new stuff, but you are also encouraged to use old stuff as well. The goal is to have lots of stuff.

By now, sample solutions for many assignments are on the web. Official sample solutions were posted (Workbook 5 may be useful if your solution didn’t have a good train). I have seen that students have posted some of their solutions publicly, but there are rules about using someone else’s code.

It is allowable to use an object from someone else’s prior assignment provided: (1) it was in their prior assignment (i.e., they didn’t make it just for this assignment); (2) you have their permission (you must ask them – even if you find their code on the web); and (3) you must give proper attribution in the README and QUESTIONS. You have the course staff’s permission (step 2) to use code from the prior assignments and sample solutions. You will not receive “technical challenge” points for objects that you do not create, but they can contribute to the overall complexity of your world.

If you use code from prior assignments: please give correct attribution. Even if you use your own code (say explicitly in your README and QUESTIONS “I used the house I made for Workbook 8”). And definitely give attribution to the work of others.

If you use a model or texture (or any other “asset”) from the web, make sure you have the legal right to use it, and document where it came from when you give attribution. If you borrowed code from a tutorial or reference, please give it attribution as well.

Required Features of Your Program

The Graphics Town Framework provides a number of features that make it possible for a user to appreciate a town built in it. You should make sure that these features work in your program. They should work if you use the framework correctly.

  1. The user needs to be able to move around the world in order to explore the town.
  2. The user needs to be able to quickly look at an object of interest (for example, to look at something of interest without having to find it).
  3. The user should be able to “follow” a moving object (so see how it moves around in the world). At least some objects should be followable. In the framework, this requires the rideable property to be set (see the hints).
  4. The user should be able to “ride” a moving object (and see the world from that object’s point of view). At least some objects should be rideable. In the framework, this requires the rideable property to be set (see the hints).

It is strongly recommended that you use the framework code, as it provides these features. However, should you decide you need to either change the framework, or build your own things from scratch, you must create these features as we need them for grading.


This serves as an explanation of how we will assess assignments, but also, to suggest ideas. Note: while there are some requirements, we are generally open minded to what you make.

Assignment 11 Rubric

Your grade (up to an AB, or 3.5) is figured by counting the number of things that you’ve done from this list. Each point is worth 1/2 letter grade. The first four points are required – you can only count 3 of the ones after 4 towards the 7 you need to get the full AB grade. However, any of the ones that you do beyond 7 can count for bonus points. Also, for many of these, we may award bonus points for particularly well done things.

(note: we may add other ideas to this list)

  1. The framework runs with at least 5 objects showing up and moving.
  2. At least 3 distinct behaviors are identified in the documentation and visible in the world. Some of your behaviors may be simple (things moving in a circle) – you can still list them, even if they don’t count as a complicated
  3. There is a train track that is drawn and is a spline. Your train track can be simple (a curve in space), or it can be complicated (like parallel rails with cross ties). (complicated tracks can earn bonus points)
  4. The train must have an obvious front that faces forward on the track. The train must be “rideable”. (if you don’t have a spline track, you can still earn this point for having a train that goes in a circle).
  5. An object that follows a 3D curved path and banks appropriately. For example, this could be an airplane or a roller coaster.
  6. A particle effect. For example, fireworks (Workbook 2), smoke, fire, a fountain.
  7. Objects that move to a destination, do some secondary behavior at that destination, and then move to another. For example, your airplane can fly around, land, turn around, take off again. Your train can stop at a station and have people get on and off.
  8. Shapes that morph into different shapes.
  9. Key-Framed movements of an articulated figure. For example, people or animals that walk or run.
  10. A skinned articulated figure (which has to move enough that we can see that it is skinned)
  11. A driving system. (you will see one of these in the old c++ graphics town examples) This would have multiple vehicles moving in a coordinated fashion (eg, following roads).
  12. The “train” could show evidence of correct arc-length parameterization (e.g., uniformly spaced rail ties, keeps a constant speed despite long and short track segments, …). Note that in order to demonstrate this, you need to show where the segments are so. See Workbook 5.
  13. Simulated water or cloth. Don’t try to do real simulation, but you can try to make procedural movements to have the ripples of water in a pond or a flag waving in the wind.
  14. Something else that doesn’t fit into the descriptions above, but shows that you’ve thought about making complex motions. If you’re wondering if it’s “good enough to earn a complexity point” ask (on Piazza).

One object can get multiple complexity points. For example, your train could be a roller coaster with a 3D curved track where the cars bank correctly. Or, you could have an airplane that flies in a curved path with banking (1) and then lands and takes off again (3).

Important: you can only earn points if you (1) describe what you attempted in your documentation and (2) it clearly works as described. The
file is designed to make this easy.

Assignment 12 Rubric

Basic Setup: (2 points towards grade) the framework runs correctly and the town is visible. The objects of interest can be looked at, and the program runs at a reasonable rate. The different things in the world can be easily identified. The town looks like a coherent world (it’s not a bunch of randomly placed objects). If the sample objects are used, they are placed correctly and the obvious flaws fixed (no upside-down stop signs).

Object diversity: (2 points towards grade, plus bonus points) you need to have enough different types of objects. The minimum is 8 across three categories: “buildings”, “natural elements”, and “vehicles”. These categories are named for towns, so in a wilderness scene or space scene you might have different things. In the wilderness the “vehicles” might be birds rather than cars and helicopters. In space, you might have asteroids or planets rather than trees. You must also have at least one object with a texture, and at least one object loaded from a model file.

You cannot claim objects that you take from other peoples’ assignments (e.g., the sample code or borrowing from other people) as part of your 8 objects.

Technical Challenges: (2 points towards grade, plus bonus points). Here, we want you to list the technically interesting aspects of creating the objects. To get the point, you both need to do something challenging, but also use the technique to make a meaningful object in your world. Many of the techniques are built into THREE, so your challenge is figuring out how to use them. If you want to use something from THREE that is not built in, you will need to include files from THREE that aren’t part of the framework.

(note: we may add other ideas to this list)

  1. Curved Surface beyond a basic primitive. Use a subdivision surface or a generalized cylinder in a useful way.
  2. Environment map. Use an environment map that is correct for an object (not just some random texture).
  3. A procedural texture in a shader. Again, it must make sense for the object (it can’t just be taking a dot shader and applying it to a house).
  4. Procedurally generated geometry. For example, you could have trees with randomly generated branching structure.
  5. Point sprites or point billboards. (look these up in the THREE documentation). If you combine these with a particle effect (for Assignment 11), you can do very cool things.
  6. Some two-pass rendering effect (a TV that watches another location, a dynamic reflection map, …)
  7. Something else that we didn’t think of. If you’re in doubt, ask (on Piazza). This is your opportunity to try some technique that we might not get to in class (within reason).

The first two points count towards your grade. More points count as bonus points. Additionally, we will give bonus points for doing things particularly well or making really creative use of techniques.

Subjective Value: (1 point towards grade, plus bonus points): This is purely the grader’s discretion: is your world interesting enough? In general, if you meet all the requirements (for assignments 11 and 12) and things are cohesive (not just a bunch of objects that don’t make sense together), you will get the point towards the grade. We will also award bonus points for really creative, complex, or interesting worlds.

One object can be used for multiple things. You might make an airplane out of a curved surface that reflects the clouds as it flies (multiple technical challenge points, as well as filling animation requirements).

You must include screen shots of your program that show it off. You should have 1-2 pictures where you have positioned the camera to best show someone how cool your world is. You may also include a few (at most 4) pictures that show off specific objects that you don’t want us to miss. Place these pictures in the Pictures directory. You can save them as either .png or .jpg files.

Important: For object diversity and technical challenges, you must describe what you did in the documentation. will be set up to help you organize this.

Bonus Points

Both Assignments 11 and 12 have lots of bonus point opportunities. You can earn bonus points for doing more behaviors or technical challenges than required, doing any of these particularly well, and for the overall creativity shown in your assignment.

Because the assignment is open ended, you can potentially earn a lot of bonus points. However, we will only allow you to use at most 6 per assignment towards your class grade. While we want to reward cool assignments, we don’t want students to try to make up for a semester of not collecting bonus points.


The Graphics Town Project has a long history (since 2000), and students have generally liked it over the years. The history is described on this 2014 page. That page also discusses the old C++ framework code (which you don’t have to look at). The assignment is described at the 2014 Graphics Town Project Page. 2014 was the last year of the C++ version of the assignment.

The most interesting thing about the history is to see what other students have done to inspire you. There are Galleries: 2014, 2009, 2006 Gallery from 2003 and 2005. Remember, these were different assignments: and students didn’t have a high level API (like THREE) to work with.

The “2015 Graphics Town Project” is hardly graphics town – it’s more graphics table. 2015 Graphics Town

This is the first year that we are using a high-level API (THREE). In the past, doing “basic” things (like adding texture maps or loading model files) was technically challenging. Now, this is built in to the API. Many things we have asked students to do in the past (e.g., environment maps, generalized cylinders) do not need to be implemented since they already exist in THREE.

Note: unlike in previous years, we are not allowing students to work in pairs. This semester, you must do this assignment individually.

Getting Started

Read through the assignment, and plan what you want to make.

We will release the “workbook” repository (with the new framework code and, and files) via a GitHub classroom link (which will be given on Canvas).

The new version of the framework is a small modification to the versions we have used for recent assigments. You can start making objects using old versions of the framework (from old workbooks). While we are adding new features to the framework, the basic design (especially of GrObject) will not change.

We will give you examples. You can use this for inspiration, and you can even “borrow” objects for your assignment (remember the attribution rules).

There is also a page of hints.