Exercise 1: Transforms

The file transforms2d.html uses WebGL to draw an image, webgl.jpg, onto a canvas. Note that because that page loads an image dynamically, it probably won't work when loaded from the file system. In most web browsers, it needs to be loaded through a web server. If you work in Aptana Studio and use Aptana's Run button to run the file, it will work fine because Aptana uses its own internal web server to run web applications. Your other choice is to put the files that you are working on in your www folder and load them through the web server on math.hws.edu.

The page also contains a pop-up menu labeled "Draw using transform number". The options in the menu are the numbers 1 through 9. At the beginning, the pop-up menu has no effect. Your job is to apply different transforms to the image, depending on the setting of the pop-up menu. You can do this by adding code to the draw() function, near the top of the page. (The location is marked with a TODO.) You don't have to do any work outside of this function, and you don't have to understand anything else on this page. The function already has a variable, transformSelection, which contains the selected integer from the pop-up menu. When transformSelection is 1, the page should display the untransformed image. For the other possible values, you have to apply some transforms. You will need a different transform -- and in some cases, a combination of transforms -- for each of the values 2 through 9.

A transform is represented by an object of type AffineTransform2D. This class is defined in the file affineransform2d.js. We have discussed AffineTransform2D in class. There is a variable transform of type AffineTransform2D in the draw method. You will apply transforms by calling methods such as transform.rotate and transform.scale.

The sample file transform-demo.html demonstrates the effect of some basic transforms on a simple drawing.

Here are the nine images that should be shown for the nine setting of the pop-up menu. The images in your program should be exactly the same as these:

1.	2.	3.
4.	5.	6.
7.	8.	9.

Exercise 2: Hierarchical Graphics

The file hierarchical2d-example.html contains an example of hierarchical graphics. Your assignment is to create your own example. That is, you should construct an animated scene geometric modeling and transformations. You can use hierarchical2d.html as a starting point. The file hierarchical2d.html draws a trivial (non-hierarchical) animation that shows a rotating square. To produce hierarchical2d-example.html, I created a few new simple objects (vane and ground) in the init() function, I added several subroutines for drawing more complex objects (drawSun, drawWindmill, drawCart, and drawWheel), and I replaced the body of the drawFrame function with code that draws all the objects in the scene.

Recall the basic idea: Objects are defined in their own natural coordinate system, then they are scaled, rotated, and scaled by a series of transforms to place them into the world. This is geometric modeling. The modeling is hierarchical becasue complex objects can be composed from simpler objects. Transformations are applied to the simple objects to place them into the complex object. Then, a further set of transforms can be applied to the complex object to place it into the scene (or into an even more complex object). This, for example, a "windmill" is made out of a transformed "square" and three transfomed "vanes". This is done by the drawWindmill() function, which draws the windmill with its base at the point (0,0) with a pole of height 3 and vanes that are rotated by an amount depending on the frameNumber and then translated up from their natural position to the top of the pole. In the scene, there are three windmills. Each windmill is drawn by applying transformations that will resize and move the windmill, and then calling the same drawWindmill() function.

This application uses a very simple class, SimpleObject to represent basic objects, that is, objects that can be drawn as single WebGL primitives. It used subroutines to represent complex objects that are composed of simpler objects. It uses an object of type AffineTransform2D to represent the transform that is applied to the objects, and it uses the push() and pop() methods of the transform object to implement the hierachical geometric modeling.

You should design and code your own animated, hierarchical scene, by modifying the file hierarchical2d.html. You are required to add a few new SimpleObjects. You are required to write a few subroutines to define complex objects. And you are required to have more than one instance of at least one of those complex objects (like there are two wheels and three windmills in my scene). Try to make something that is, like my scene, vaguely realistic. Grading will be based partly on originality, complexity, and appearance.