Office hours: Wednesday, 4-5pm

Text: Class notes (so make sure you come to class!), will be posted on-line after each lecture.

Graders:

Jonathan Tompson, Bowen Zhang, Weitao (Vito) Wang, Jianxing (Morgan) Chen

Discussion list:

TBA

Student homework pages

Lectures:

Introductory lecture (January 26)
Simple applets and 2D matrix transformations
3D matrix transformations
Modeling shapes with polygons
Perspective and animation hierarchy
Better animation hierarchy + Splines
Ray tracing 1
Ray tracing 2
Ray tracing 3
Ray tracing 3
Z-buffers, part 1
Z-buffers, part 2
Advanced topics (if there is time)

Setting up a homepage and access to computers:

Most of you have the homepage and computers thing already figured out. But just to make sure you have at least one way to show your work on line, your NYU webpage can be activated and modified as follows:

• Go to http://nyu.edu
• Click on the NYUHome Login tab at the top.
• Sign in with your NetID and Password.
• Click on the Files tab.
• Click on the option to activate your website, if you haven't already.
• Click on Files 2.0 Login.
• Log in using your password.
• Double click on the "public" folder to enter it.
• Download the file "index.html" to your computer.
• Edit the file to change it.
• Click on the upload button to replace the old index.html file by your new one.

To post assignments for this class, you should set up a subdirectory of your web site (preferably your NYU web site). Name this subdirectory "graphics". It should have a main "index.html" file, and that file should link to the various homework assignments. After the first class, you will send the grader an email, with subject line "graphics", telling him the URL.

In class on Feb 2 we showed how to create a simple java applet, by extending my java class BufferedApplet.java. Example applets we built in class were test1.java and test2.java. Feel free to download these and to use them as a basis to start your homework.

To compile and run from the command line, you can use the latest version of the Java Development Kit (JDK), which you can download from http://www.oracle.com/technetwork/java/javase/downloads

To compile all of your java files, you can just type in the command line:

   javac *.java

You can also develop from an Integrated Development Environment (IDE) such as Eclipse.

You can download Eclipse from the Eclipse Downloads page. Be sure to download Eclipse IDE for Java Developers.

Installing Eclipse is slightly more involved if you are on Windows than if you are on a Mac. So if you are on Windows, you can read this Tutorial for installing Eclipse on Windows.

To get your Java applet running from the Web, or in appletviewer from the command line, you need an html file that contains an applet tag. The simple test1.html file I used in class looked like this:

   <applet code=test1 width=640 height=480>
   </applet>

If you have test1.html in your current directory, you can either type into the command line:

   appletviewer test1.html

or you can click on test1.html from a finder window, to launch the applet in a browser.

After going through some example programs, in class we started to discuss matrix transformations, beginning with two dimensional transformations -- which are done using 3×3 matrices.

Consider any point (x,y) on the 2D plane. We can represent a any point on the plane in homogeneous coordinates as a column vector:

   x
   y
   w

to represent the point at position (x/w, y/w). For most points, we can just let w = 1.

For points at infinity (that is, direction vectors) we can let w = 0.

For example, consider the two column vectors below. The first represents the point at location (1,0) and the second represents the positive x direction:

   1          1
   0          0
   1          0

This representation lets us use matrices to transform both points and directions by matrix-vector multiplication:

x'
               
m0,0 m0,1 m0,2
                    
x
y'
  ←  
m1,0 m1,1 m1,2
  ×  
y
w'
               
m2,0 m2,1 m2,2
                    
w

The identity matrix transforms every point to itself:

x
                    
1  0  0
                    
x
y
  ←  
0  1  0
  ×  
y
w
                    
0  0  1
                    
w

A translation matrix moves every point by a fixed amount (dx,dy):

x+dx
                    
1  0  dx
                    
x
y+dy
  ←  
0  1  dy
  ×  
y
w
                       
0  0  1
                     
w

A rotation matrix rotates every point about the origin by a fixed angle θ:

(x cosθ - y sinθ)
                    
cosθ 
-sinθ 
0
                    
x
(x sinθ + y cosθ)
  ←  
sinθ
 cosθ
0
  ×  
y
w
                       
0         
 0         
1
                     
w

We can build more complex transformations by multiplying together transformation matrices:

(a0,0b0,0+a0,1b1,0+a0,2b2,0) (a0,0b0,1+a0,1b1,1+a0,2b2,1) (a0,0b0,2+a0,2b1,2+a0,2b2,2)
 
a0,0 a0,1 a0,2
 
b0,0 b0,1 b0,2

(a1,0b0,0+a1,1b1,0+a1,2b2,0) (a1,0b0,1+a1,1b1,1+a1,2b2,1) (a1,0b0,2+a1,1b1,2+a1,2b2,2)
  ←  
a1,0 a1,1 a1,2
  ×  
b1,0 b1,1 b1,2

(a2,0b0,0+a2,1b1,0+a2,2b2,0) (a2,0b0,1+a2,1b1,1+a2,2b2,1) (a2,0b0,2+a2,1b1,2+a2,2b2,2)
 
a2,0 a2,1 a2,2
 
b2,0 b2,1 b2,2

But we need to be careful, because matrix math is not commutative -- the order that we perform these rotations matters.

For example, first translating by (1,0) and then rotating by π/2 does not produce the same transformation as first rotating by π/2 and then translating by (1,0):

0  -1  0 
  
0  -1  0 
  
1  0  1 
1   0  1 
 ←  
1   0  0 
 ×  
0  1  0 
0   0  1 
  
0   0  1 
  
0  0  1 
 
0  -1  1 
  
1  0  1 
  
0  -1  0 
1   0  0 
 ←  
0  1  0 
 ×  
1   0  0 
0   0  1 
  
0  0  1 
  
0   0  1 

Next week we will cover other sorts of matrix transformations, such as scaling, skewing and perspective, and we will talk about 3D matrix transformations.

Your homework, due next February 9 before class starts, will be to build upon the simple applets that I showed in class, to make your own cool animated scene. You are encouraged to be creative, to have fun with it. Show me your imagination! Remember, you can draw onto the Graphics object using any method found in the API for the java.awt.Graphics object class. You can find the API documentation page on the web by doing a Google search for java Graphics.

You should create a subfolder for each homework assignment, inside the main folder on your class website that contains your index.html page. This will make things a lot easier as the semester goes along.

Link to this assignment from your main index.html page. Graders should be able to see your applet running after they click on the link.

For this and other assignments, you should put up links to all of your Java source files on the assignment page, so the graders can see your actual code.

In class this week we discussed using 4×4 matrices to do linear coordinate transformations. After reviewing the form of the basic matrix primitives, below, do the this week's homework assignment. That assignment page contains extensive notes and hints about implementation.

3D Transformation Matrices:

Here are the basic 3D matrix primitives (not including perspective):

identity:	1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 1
translationMatrix(a,b,c):	1 0 0 a 0 1 0 b 0 0 1 c 0 0 0 1
xRotationMatrix(θ):	1 0 0 0 0 cos(θ) -sin(θ) 0 0 sin(θ) cos(θ) 0 0 0 0 1
yRotationMatrix(θ):	cos(θ) 0 sin(θ) 0 0 1 0 0 -sin(θ) 0 cos(θ) 0 0 0 0 1
zRotationMatrix(θ):	cos(θ) -sin(θ) 0 0 sin(θ) cos(θ) 0 0 0 0 1 0 0 0 0 1
scaleMatrix(a,b,c):	a 0 0 0 0 b 0 0 0 0 c 0 0 0 0 1

We covered two topics on February 23:

• Perspective
• Transformation Hierarchy

Please read over both of those pages of notes carefully. Your homework assignment, which will be due before the start of class on March 1, is described at the bottom of the notes about Transformation Hierarchy.

Better animation hierarchy

As we discussed in class, the way you did animation in the previous assignment was limited, since the animation hierarchy was "baked in" to the code. It's much better to do this hierarchy as data, rather than code, so that users can make changes to the hierarchy during run-time.

In class I explained how my little example of a one-armed man, shown in the old style as scenetest1.java, can be more elegantly expressed using the new style, as in scenetest2.java.

To support this, you can add some data structures to your Geometry object that support an interface something like the following:

public class Geometry
{
   ...
   public Matrix getMatrix() { ... }             // access to this geometry object's matrix
   public void add(Geometry child) { ... }       // add a child geometry object
   public void remove(Geometry child) { ... }    // remove a child geometry object
   public int getNumChildren() { ... }           // find out how many children there are
   public Geometry getChild(int index) { ... }   // get the ith child
   ...
}

The matrix of a Geometry object contains the object's transformation relative to its parent object. These structures allow the objects in your scene to form a hierarchical tree. You should make a special object called world, which forms the root of this tree. Your renderer will traverse the tree, starting at this root world object, to find all the objects in your scene.

Note that you do not need to maintain an explicit matrix stack. Instead, you can keep a separate globalMatrix inside each Geometry object, which contains the result, in each animation frame, of multiplying the parent object's globalMatrix by the object's relative matrix.

After you have computed the value an object's globalMatrix for the current animation frame, you can then use that globalMatrix to transform the vertices of the object, placing the transformed vertices into a working array (don't modify the values of the Geometry object's original vertices array).

You can then render the Geometry object by using the faces together with the transformed vertex locations in this working array.

Your homework, which will be due before class on Thursday March 22 (after Spring break), will consist of two parts: (1) Change over to the better way of maintaining a matrix/object hierarchy, and (2) Doing animation by implementing splines as we discussed in class.

For the first part of your homework -- changing to the improved method of specifying a hierarchical scene -- you can use the same scene and object hierarchy that you used in the previous assignment, or you can create something new. I leave that choice up to you -- but it's more fun to try something new.

For the course notes and assignment for the second part of the homework, here is a link to an introduction to animating with splines.

Notes (and homework) for the March 29 class about ray tracing are here.

Notes (and homework) for the April 5 class about ray tracing are here.

The notes and assignment for this week are here.

The notes and assignment for the second part of the z-buffer algorithm are here.

For those of you who are feeling confident and ambitious (and have gotten everything else done), here are some notes from this week's lecture on texturing.