Graphics Town Instructions (Start Here)

Page content

Graphics Town 2021: Instructions Rubric Hints Advanced

Unlike most workbooks, the instructions are here on the web.

Your actual work goes into the workbook. Be sure to clone the workbook from github classroom (the link is on Canvas, not on the open web).

Short version: Make a “town” in the world on the grtown.html page in the workbook. Get points for making things. If it’s cool, you’ll get a good grade.


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, farms with cows and chickens, farms where flying saucers came and abducted the cows, … 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. 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. However, we encourage you to focus on the core requirements first.

The hard part in specifying this assignment is providing grading criteria. The short version: do enough cool stuff and document it, and you’ll get a good grade. Giving specific criteria is hard (which is why the rubric page is so long and complicated): we want to allow students to be creative and try things out, but we also want to make sure that assignments focus on the graphics aspects. We also understand that students want to know what they need to do to get the grade they want. Previous versions of the assignment had long complicated lists of grading criteria. This semester, it’s simpler, but there are still lots of options listed.

You will create your town by building on top of the “Graphics Town Framework” that we will provide. You have been using this framework over the past several workbooks. In fact, you can take objects from prior workbooks and put them in your town. When you try the example, you will notice that there are some additional features of the framework that you haven’t used yet (like the ability to ride objects or look at specific objects) - these will make it easier for us to see things in your world.

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.


Ideally, we would give you as much time as possible so you have lots of time to make cool stuff. But, because of the end of the semester, we are limited in how much time we can give you. There are University rules, and practical issues with getting things graded on time.

Officially, the assignment is due Wednesday, April 28, 2021. This workbook will have a different late policy. We will not be able to allow a whole week (as we have with prior workbooks). Note that this workbook counts double (you have 2 weeks), and cannot be dropped from grading.

If you turn in your workbook (including the handin survey) on or before Wednesday, April 28, 2021, we will pre-check your assignment to make sure that it seems to work (e.g., you remembered to include all files in your repository, …). While we won’t catch all problems, we hope to be able to ask you to make fixes. If you turn in things late, we will not have as much opportunity to make fixes.

We will be able to accept late assignments until April 30. There is a possibility that we will be able to accept later assignments, but please do not plan on it.

In the event that there is a change in deadline, we will make a posting on Canvas.

Remember, turning in your assignment means doing the Canvas Quiz. We won’t know to grade your assignment if you do not do the quiz.


The 12-grtown.html page (in your workbook) 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 a simple “world.” You need to change that simple world into something more interesting. You will need to add new objects (and probably remove the ones that are there). You will need to arrange the objects in a meaningful way. You will need to give the (at least some of the) objects behaviors. We use the term “behavior” for the code that makes the object move and do stuff.

The real requirement is to make a cool world that shows off your ability to do graphics programming. The Graphics Town Rubric 2021 gives some more specific things that you must do in order to get full credit. But basically, it is to make objects and put them in the world. The rubric may seem long and complicated, but that is because we are trying to quantify “cool enough” in a way that gives students flexibility.

The framework provides the required user interface (Graphics Town Hints 2021). You should not need to change the framework code. You should use the framework correctly in order to provide the required user interface.

You will need to define new object types (with behaviors, through their stepWorld 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. Note: be sure to use the timeDelta parameter of stepWorld: your objects must stop when the the world is stopped, and the speed control of the world must work. See the Graphics Town Hints 2021 for some details.

The objects you create have names that allow them to be identified in the user interface. This means that all objects should have meaningful names, and these names have to be unique. Objects are automatically put on the “lookat” list in the user interface.

You must identify some objects to be on the “highlight” list in the UI: this is a shorter version of the “lookat” list that allows us to find interesting objects quickly. The rubric will specify which objects should be placed on this list. See the Graphics Town Hints 2021 for some details on highlight.

The examples directory contains a bunch of sample objects, as well as an example “setup” function that places them into the world. You may use the objects (see below about using objects from others). 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 town must look like a reasonable scene - it can’t just be a collection of random objects placed haphazardly (as the sample scene is).

Your program needs to run at a reasonable frame rate on a testing computer. Not all of the TAs and graders have fast computers with fancy GPUs. Don’t go too overboard with excessive numbers of objects.

You must also provide documentation by filling in the textboxes on page 3 of the workbook. This is very important! We cannot give you credit for things that you do not document!

Collaboration: Use, Re-Use and Attribution

You must complete this assignment yourself. We are not allowing students to work in pairs this year.

For this assignment, we do allow you to use pieces made by others, or that you have made for prior assignments. However, there are a bunch of rules for this.

  1. You must give attribution for anything that you do not make yourself. If you find it on the web, you must give a link. If you get it from someone else, you must explicitly name them in your documentation (text boxes on workbook page 3).
  2. You must give attribution if you copy from yourself (e.g., use something you have from a previous assignment).
  3. You must have permission to use anything that you did not make yourself. If you find it on the web, make sure that it has an open license. If you get it from someone else, make sure it is OK with them.
  4. You may use examples provided by the course staff. For example, if your train didn’t work in Workbook 6, you can use the example solution. You must give attribution.
  5. Many requirements specifically say that you must make the object or behavior yourself. You cannot use something from someone else for those.
  6. It is allowable to use an object or behavior (JavaScript code) from another student’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 give proper attribution. These cannot count for requirements.
  7. The actual world must be put together by the person submitting the assignment.
  8. You may only highlight objects that you made, or created a behavior for. (we will explain highlighting later)

To give you an example: if another student made a nice house for Workbook 9, you can use it with their permission and if you give proper attribution. It will not count as one of the objects that you made, and you cannot use it to fullfill a technical requirement. However, you can put it in your world next to the objects that you do make so that you have more variety in your world. Or, if you like a piece of construction that was in the example solution, you can include it. Again, subject to these rules.

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. In fact, some of your 2D assignments can be converted (the fireworks and train are good candidates).

You may use examples provided by the course staff. For example, if your train didn’t work in Workbook 6, you can use the example solution posted.

It is allowable to use an object or behavior (JavaScript code) from another student’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 give proper attribution in the textboxes file. Objects and behaviors made by others do not count towards your requirements. (this is explained more in the rubric). Note that this includes example code that you find on the web.

You may use art assets (e.g. 3D model files and images) that you obtain online. 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. Note that an object loaded from a 3D model file fulfills a requirement, but not all of your objects can be files you obtained.

If your work is based on a tutorial, online document, or something like that, please specify it in the textbox. Even if you don’t copy the code verbatim.

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


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. The past two years, students had a similar (but not identical) assignment:

There is a Gallery for some years past. Remember, these were different assignments: in older assignments students didn’t have a high level API (like THREE) to work with, and they were given less starter code. It’s pretty remarkable how creative the students were.

The 2000 Graphics Town Assignment Page is an interesting historical artifact. Things have come a long way in 20 years.

Summary of Other Pages

Graphics Town 2021: Instructions Rubric Hints Advanced