In this lab we will explore transformations in HTML Canvas. As you go through the lab, the text poses a number of questions. Discuss these with the people at your table (or other group) and make sure that everybody understands and agrees with the answer.
Study the code
Download a copy of the lab starter code. This lab is divided into several parts. If you open the index.html file, you will see links to each of the other parts. These are stored in the other separate files included in the zip archive. You will work on them one at a time, and should begin with part one.
Part One: Translations
Look at the code in the file named part1.html. You will see that the draw() method creates four squares of different colors. Currently they are all drawn on top of one another so that only the green one is visible in the result. (To see the outcome of this code, run the repl and click the link for Part One.)
We want to add translations between each of the drawn squares so that they do not appear directly on top of one another. For example, if you insert the following just before the green square is drawn, it will shift its location.
graphics.translate(30,30);
Experiment with adding different translations before each square is drawn. How do translations added in one location affect the rest of the squares? If you put two translations in one place, what is the effect? Can you use negative numbers as translations? (Be careful; if you move too far in any direction your square might be outside the visible area and seem to disappear!)
To complete this section, try to adjust your added translations so as to produce the image below (the blue square should be in the top left of the window):
Part Two: Rotations with Translations
Next move on to part2.html. Again you have four colored squares and need to insert transformations in between. This time the necessary transformations will be a combination of translation and rotation. To warm up, try the following before the green square is drawn:
graphics.rotate(Math.PI/4); graphics.translate(56,28);
Is the result what you expected? Now try reversing the order of the translation and the rotation. Is the result different? Again, is it what you expected? Experiment with other combinations, taking care to keep the squares within the visible region of the window.
To complete this section, try to add translations and rotations between the drawn squares so as to produce the image below (again, the blue square should be in the top left of the window). Note that you may order the transformations in whatever manner seems easiest to you.
Part Three: Translation, Rotation, and Scaling
Now it is time to add scaling to the mix. This part is located in the file part3.html. Again you have four colored squares and need to insert transformations in between. This time the necessary transformations will be a combination of scaling, translation and rotation. To warm up, try the following before the green square is drawn:
graphics.scale(0.5,0.5); graphics.translate(80,80);
Is the result what you expected? Note that the distance moved by the translation is affected by the scaling that happened just before. Now try reversing the order of the translation and the scale. Is the result different? Again, is it what you expected? Experiment with other combinations, scaling both larger and smaller.
To complete this section, try to add transformations between the drawn squares so as to produce the image below. Note that you may order the transformations in whatever manner seems easiest to you. In my solution, I sometimes perform the translation before the scaling, and other times after, so as to avoid computing distances on a diagonal. The scale factor between squares of different sizes here is 0.7
Part Four: Animated Tail
This section is contained in the file part4a.html and part4b.html. As written, the first file introduces an animated tail based on mouse motion. Open it up and study how it works. As the mouse is moved over the canvas, the sequence of its positions over time is recorded in the variable tail. With each move, the drawCircles function is then called to redraw the tail. The animation here is implemented without using transformations, by changing the coordinates and radius of the circles that are drawn based on the values in tail.
Your job for this part of the lab is to make the second file (part4b.html) work the same as the first, using transformations to make the drawn circles come out in the right size and position. The function drawCircles has been partly written to get you started. It always draws circles of fixed radius at the origin. Without changing the draw command, your task is to add transformations at the indicated position in the code that will make the circle appear in the correct spot, and also make it the correct size. Note that due to the use of graphics.save() and graphics.restore() at the beginning and end of the file, any transformations you apply will be reset the next time through the loop. That means that each iteration is independent of the previous one, and you don't need to compute an incremental transformation.
Challenge: if you like, see if you can write a third version, lab4c.html, that doesn't use graphics.save() and graphics.restore() each time through the loop. The transformations you write will have to be applied cumulatively, and modified accordingly to achieve the same effect as before. (Hint: this may not be as easy as it seems, because of the interaction between the two types of transformation.)
Finish Up
You do not have to turn this lab in, but make sure that everyone in your group understands the code by the end of the lab. Feel free to experiment with different transformations and variations on the interval timer. We will continue working with the ideas from this lab in Homework 3.