Course Links

Resources

External

Introduction

This homework has three parts. The goal of the first part is to practice working with transformation matrices in a computational setting. We'll implement each transformation matrix in JavaScript, writing our own versions of the graphics functions translate, rotate, and scale.

In the second and third parts of the homework you will use the built-in functions to create some animations, including a custom animation of your own choice. A bronze solution includes only simple motions. Silver will have multiple objects moving in different interesting ways, and include at least one element that changes its animation over time. A gold solution will do all of the above using objects to keep track of each individual part, and will include at least one element with hierarchical components.

Part I: Transformation Matrices

Download the starter files and open matrixTransforms.js. This is a file containing only Javascript code, which is referenced by testTransforms.html. Make sure that both files are in the same folder. As downloaded, testTransforms.html will look quite boring:

default testTransforms.html

Now take a look in matrixTransforms.js, which is where you will do your work. You will see six functions with the comment FILL IN inside them. The comment above the function tells you what it should do; your job is to fulfill that specification. The first three define 3x3 transformation matrces of different types. Two more define functions that actually apply such a transformation. (You can model them on myTranslate, which is done for you.) The last one defines a matrix multiplication function, which you may already have worked on from the matrix math lab.

The matrix multiplication function should take in two matrices, M1, and M2, and return the result of M1*M2 as a new matrix. Your function should be general, in the sense that it should be able to take in any two matrices with matching inner dimensions. If you have not finished Lab M, I strongly recommend that you try to write matrixMultiply for yourself before looking at any solution. You may use the solution to check your work and make sure that it is right.

The main purpose of this part of the homework is to help you visualize what is happening inside the graphics engine when you call translate, rotate, or scale. We have written our own versions of these called myTranslate, myRotate, and myScale. Examine how these work. Each one calls a function (written by you) to create the appropriate transformation matrix. Then they call applyTransform, which combines the new transformation with the existing one already stored in Tmatrix using matrixMultiply (also written by you). Along the way, it prints the new transform matrix to the console so that you can see what is going on.

When you have implemented all the functions correctly, the testTransforms.html should look like this:

completed testTransforms.html

The final transformation printed in the console window should be:

[[0.00	-0.20	50.00]
 [0.50	0.00	50.00]
 [0.00	0.00	1.00]]

Part II: Animated Figure 8

For this part you will create a new file named fig8.html. You can start with the third animation from lab 4, which has some of the code you will need. Your job is to create an animation that will make the small box follow a figure eight pattern (i.e. two adjacent tangent circles). In other words, the box will travel all the way around one circle. When it reaches the tangent point where they touch, it will shift to traveling around the other circle, until it has completed a full orbit and returned to the tangent point, whereupon it will go back to the original circle again. The animation should continue indefinitely, and the transition between circles should be smooth and uninterrupted.

Part III: Your Animated Masterpiece

For this part of the assignment you will create an animation of your choice from scratch. Be creative! Your work should not look similar to any of the examples we have seen so far in class. At minimum, it should include at least three different objects, each doing a different thing. The motion should appear smooth in most cases, except if objects appear or disappear. Your animation can be infinite and repeating, or it can run for a specified amount of time and be done. Refer to the set of example animations I have created for ideas. You are free to base your work on these examples and reuse portions of the code, so long as you adapt them to create something new and different.

There are a lot of possibilities for this part of the assignment. Here is a partial list of the things you might consider doing with your animation. See how many you can achieve. You don't have to do everything listed below; some items are mutually exclusive!

In your readme comment at the top of this file (required for this assignment!), please list all the features from the menu above that you have included and where, so that I can give you proper credit.

Submit

You'll have four separate files to submit for this homework: two from the first part, one from the second, and one from the third. They should all be named exactly as listed below. Your reflection on the assignment should appear in the last file (animation.html), and explicitly list all the features that you implemented in your animation.

Collaboration:

For this assignment, you may work with a partner (pair programming) as long as you pick someone with whom you have not worked before.