CS461 - Assignment Three

Due: 2016-10-05 11:59p

Objectives

Tangrams

This week, you are going to play with tangrams. I'm sure the vast majority of you have encountered them before. Usually, the challenge is to figure out how to assemble your tangrams to match some sample pattern. For this assignment, your challenge is a little different. You are welcome to "cheat" and see which piece gets used where, because your challenge isn't to figure out what goes where, but how to get the pieces to the appropriate location.

In the end, you should have a page that allows the user to pick one of at least three tangrams from a list, which you then draw. Two of these, the square and the cat, you will find below. The third can be whatever you like (just search for "tangrams" on Google/Bing to find hundreds of ideas). The only requirement being that like the others, it must use all pieces.

Select a shape:

Building the shapes

There is a wrinkle. This would be fairly easy if I just let you make the shapes. You need to start from my starter code.

In that code, you will see I have given you an initialization function that returns a "renderer" object. This has limited functionality:

drawTriangle(red, green, blue)
This draw one triangle in the provided color, applying the "current matrix" as the transformation.
clear()
This clears the screen (it just calls gl.clear())
currentMatrix(m)
This returns the current matrix. Passing in a matrix as an argument sets the current matrix to something new.

You do not have access to the gl object, and you only get one triangle loaded into the VBO. All of your basic shapes will transformations of this triangle (or possibly a combination of multiple transformed triangles). The basic pattern for each shape will be to create a transformation matrix to scale, rotate, and translate the triangle to the right location, then draw the triangle in the appropriate color.

I suggest writing a separate function for each tile so you can just call it when you want to draw the shape. Please color each tile a different color (the choice of colors is yours).

Handling transformations

You will also note that you have one transformation matrix. This means that you need to concatenate a number of transformations together using matrix multiplication. There are three different uses for transformations in this assignment:

You will want to keep these separate. The functions that draw the shapes should just draw the shapes and not know anything about location. However, since you have to concatenate all of the transformations together, the transformations to the shape and to the whole image will need to be incorporated when the transformation matrix is sent down to the card. To handle this, I would like you to adopt an approach that was standard in old school OpenGL: a current transform matrix and a matrix stack.

The current transform matrix is a pretty straightforward idea. You just need a common matrix that everything can see and can access. You don't worry about what the current transformation currently does, you just multiply matrices on to the end of it, as if you were currently at the default orientation at the origin. So, when you are drawing the tiles, you just draw them as if you were at the origin, adding the the current matrix as required to draw your shape. When it is time to draw, pass this transformation matrix down to the shader.

Note that this is why is is useful to be able to read matrix operations from left to right.

The matrix stack is a somewhat subtler idea. We acknowledge that perhaps there is some important information in the current transform matrix (like a universal transformation that should apply to all tiles). We need to modify the matrix for our current needs, but we don't want to have to redo the current transform matrix over and over.

The solution is to use a stack. If we are going to make a change to the current transformation matrix, we push the current transformation matrix onto the matrix stack. Then, when we are done changing things and drawing, we pop the matrix stack and load the matrix back into the current transformation matrix.

So, for example, you might set up a universal transformation, like scaling things down to fit. When you got to draw the first tile, you save the current transformation before adding in all the transformation required to move your first tile to the correct place. When you are done, just pop the old matrix into the current transformation matrix slot, and it is like you never tinkered with it.

Please implement push() and pop() as separate functions of the renderer so the details of interacting with the current transformation is hidden from the rest of the program.

Grading

This assignment is worth 55 points.

Points Metric
5 Presentation - good commenting, name in the files, followed naming convention, no spaghetti code, sensible allocation of responsibilities
10 Tiles - the tiles are all the right size and shape
10 Square - formed the square just through transformations of a single triangle
10 Cat - formed the square just through transformations of a single triangle
10 Other - third shape
10 Stack - the matrix stack is made correctly and is used correctly

For the square, cat, and whatever else you pick, I'll be looking to see if it looks like you used geometry to figure out where things go (good) or you got there based on trial and error, and your result is sort of right (less good).


Turning in your work

Create a directory called username_hw03 and put your code inside (making sure your HTML file is called index.html). Please zip the directory and submit it to Assignment three on Canvas.

I would also like to make all of the submission live off of the website. As we get more involved, this will be very interesting. In the meantime, I think you will benefit from being able to look at how your peers approached the assignments. If you would like to opt out from this, please tell me so in the text box on the assignment submission form.