The next set of programming assignments (P7, P8, P9) are linked together to form one bigger thing. Each week you’ll turn in a bigger and bigger piece – and then in the end, you’ll have something really cool.
The overall objective is to give you an opportunity to try out all the stuff we’ve been learning in class (lighting, texturing, advanced texture effects) and show it off in a creative way.
The assignment is modeled after the old 559 Project called "Graphics Town." It has been the last project in 559 for most of the time that I (Mike) have taught the class – and has been a favorite of the students. You can see last year’s assignment here. This year’s assignment is a lot different, but we’re keeping the name because we like it, and the spirit of the assignment is the same.
The idea is that we’ll give you a basic framework. It will store a list of "graphics objects," provide a basic user interface, and generally get things going. You can think of it as the system implements a world: you need to put stuff into the world. I’ve put some boring stuff into it as examples (a couple of cubes), but it’s your job to make it into something cooler by adding more objects.
Each week, we’ll ask you to add more stuff – based on things we’ve learned in class.
The framework has some basic features:
- It keeps a list of objects that make up the "world"
- It has a notion of time for animation, and the ability to "stop time". Animation time is not connected to "Time of Day."
- It has a notion of "Time of Day" which is mainly used for positioning the sun direction. Creative students have found more things to do with this.
- It has two different interfaces for controlling the viewpoint: an "ArcBall" that lets you look at the world from outside (and spin it around – as if it was a snow-globe), and a driving interface that let’s you drive around on the ground. We might add a third "flying" interface.
- It has a mode where you can examine a specific object (it shows only that one object, and puts it in the center of the view)
Note: you don’t have to use the framework. However, if you don’t use it, you’ll have to re-build it yourself. If you build your own, you’ll have to have the basic features above. We recommend using it so you can focus on the interesting parts of the assignment. The exercise of reading someone else’s code is important.
What to Make?
All we care about is that whatever you put on that piece of land (or table top, or whatever you imagine it being) is alive – there needs to be things moving around. It’s better if there’s some theme. The original GraphicsTown gave houses and roads and trees and road signs and cars. This year, we’re just giving you an empty world (with a few cubes and a pyramid to show you how to make objects). Get rid of the cubes and pyramid – make some more interesting stuff.
We hesitate to tell people how to populate their world. In the past, people’s imaginations outdid what we could suggest. We had desert islands, cities, space cities, snow scapes, a ski resort complete with a chairlift. There have been owls flying around at night, helicopters, airplanes landing at an airport, a fire truck that drove around (to buildings that would light on fire). People walking around, UFOs abducting people that were walking around, …. If you want to see some galleries of old assignments look (here for 2014) (here for 2006 & 2009).
Don’t expect to get to the fancy stuff right away. Start with a few simple objects (to get a hang of how things work), and be sure to fulfill the technical requirements of each assignment. In the past, this project was later in the semester and was an opportunity to showcase a semester’s worth of learning.
The Assignments
This year, we don’t have one big project – we have a series of smaller assignments. But since you can keep adding stuff to your world, it could get to be cooler and cooler as it goes. There will be more details in each programming assignment.
- Week 1 (Programming Assignment 7) (link coming) (due 10/22) – You need to make some objects that show off lighting and materials. You need to have objects that properly react to the light direction from the sun, show shininess (specularity), and other lighting properties. You need to have some objects that move.
- Week 2 (Programming Assignment 8) (link coming) (due 10/29) – You need to make some objects that show off texturing. You need to have at least one object that uses an image texture, and puts an image texture on something that isn’t a flat rectangle. You also will need to make one object that has a procedural texture.
- Week 3 (Programming Assignment 9) (link coming) (due 11/4) – You need to do something that does some form of more advanced appearance modeling – one of the fancier kinds of texturing discussed in class. Or some other visual effect we introduce.
- Week 4 (Programming Assignment 10) (link coming) (due 11/11) – A final project. Put enough stuff in to make it really cool!
With the specific assignments, we’ll give you a sense of how things will be evaluated, both the get the checks, as well as to get points towards a good grade.
Note that each assignment must be turned in separately, even though it is redundant. There is a separate handin for each. So even if you just turn in your P7 in again for P8 (since you had met the requirements early), you need to do so.
Working with the Framework
You should not need to change the framework code. In fact, we discourage it for the first two weeks (because we might improve it and send out a new version). After that, you might want to tinker with the framework to get it to add things (like special UIs for the objects you add).
The way things are built, you define objects in separate script files and they add themselves to a global "list of objects". After all the objects have put themselves into this list, the framework code runs.
To do this assignment, you will need to change the HTML file (to have it load your object script files, as well as to put in your shaders), and add some new files for objects. You should take out references to my objects (simplest and cube). You can remove the groundplane as well, if you like.
Each object only needs to do a few things:
- it needs a name. make sure the name is unique
- it needs to have an "init" function which is called before any drawing happens (but after the GL context is established)
- it needs to have a "center" function which returns a point (as a 3-vector) that is the center of the object. (this is used for "examine mode")
- it needs to have a "draw" function
Those last three things are "methods" – the are always called using method invocation (so "this" refers to the object), and they are passed a "drawingState" object that includes the gl context, and a few other things. This is documented in grobject.js.
You’ll notice that there is no explicit class. There isn’t even a single prototype. This is an experiment in programming style for me (I’m learning JavaScript as well). You can make any object you want that does the few things that graphics objects have to do. The documentation is in the comments, and in the examples.
I’ve made a few sample objects so you can see how it works. "simplest" is the simple thing. It’s a pyramid. It uses raw WebGL commands – it’s basically the triangles example from class. Read this first and see how it works. The next example is a Cube – which is done in a more object-oriented way. There’s a constructor function that makes cubes. Then there’s a "subclass" of Cube (SpinningCube) that uses prototype delegation to re-use a lot of the cube code. We will probably give you additional examples as well.
Handing things in
We will try a new handin mechanism for P7: you will upload you entire project to a directory in AFS (the CS department file server). Instructions will be coming.
The advantage of this method is that this directory is served by the web server. This gets around a lot of the web security issues with images and shaders. Things are set up so that you must be authenticated – only you and the course staff can see your project. You can let others see your assignment (instructions on the instructions page). Please make sure to check that your program works from the web server. Test the link. On Canvas, you don’t need to turn in your program: just a link to your directory on the CS server.
