Workbook 12: Graphics Town (Main Page)

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.

Overview

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.

Deadlines and Parts

The official deadline for this workbook is the last day of classes (Friday, May 1st). University policy, and the practicality of grading, preclude us from having a deadline later than that.

There is a mandatory check-in on or before Sunday, April 26th. This is to check that you have at least started the assignment. The requirements are minimal: we will check that you have made at least one commit and push to your repository, and that your town is not identical to the example town. This check in is worth 10 points.

Close to the deadline, we will provide a form to fill out to help us with grading.

We may have a “peer review” component of the workbook, where you look at other students' assignments and give them feedback. This may or may not be graded (if it happens). Look for details around the deadline.

Requirements

The 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. 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 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 many of the things you need to do are simple, come from prior workbooks, or require very little code.

The framework provides the required user interface (Using the Framework). 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 tick 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.

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 in the README.md file. This is very important!

Documentation

You will only receive credit for things that you not only implement, but also document correctly. This includes describing them in the README.md file as well as providing pictures as required. The README.md file has a very specific format that enables us to grade your assignment. You may not get points for things you do if they are not described correctly in the README.md!

A sample README.md is provided in the examples directory to give you an idea of what we are looking for. Look for README-example.md (the README.md file describes the contents of the examples directory).

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. 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 on Piazza.

It is allowable to use an object or behavior (JavaScript code) 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 give proper attribution in the README 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 README. 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 README “I used the house I made for workbook 8”). And definitely give attribution to the work of others.

History

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 is a Gallery for . Remember, these were different assignments: in older assignments students didn’t have a high level API (like THREE) to work with. It’s pretty remarkable how creative the students were.

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

Last semester was the first time we were using the high-level API THREE.js. You can find examples of assignments that students have done for graphics town last semester here. In years prior to that, 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.

Pages for this assignment

Below are summaries of the pages and links…

Graphics Town Rubric

Summary: do enough cool stuff and document it, and you’ll get a good grade. The hard part is quantifying “enough” and “cool”. We might say “you’ll know it when you see it.” But instead, we have to try to write something… This page may be updated with clarifications and additional examples. The grading aspects of this assignment are what gets complicated. The assignment itself isn’t that complicated. Make a cool “town”, and you’ll get a good grade. Read more…

Using the Framework

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. The user needs to be able to move around the world in order to explore the town. 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). Read more…

Some Hints for Graphics Town

Making Behavior Use the tick method of GrObject to animate things. The basics were introduced in workbook 7. You can put the behavior into a class (like the example does with SpinCube. Over the later workbooks, you saw the use of tricks like adding methods to the objects after the object is created. SimpleBehaviors.js in the Framework folder has an example. Hidden in workbook 10, page 2 are more examples (the spinY function adds a method to an object, but the code to blink an object also adds a tick method, and takes advantage of the non-lexical this in JavaScript. Read more…