Lab 3: Transformations in Canvas
graphics.translate(x,y); graphics.translate(30,40); // translate objects 30 pixels right and 40 pixels downMake sure to have this code before the code that draws the square. This makes sure that the vertices of the square are multiplied by the translation matrix. Now switch the order of your translate statements. What effect does this have on the shape?
graphics.rotate(angle); graphics.rotate(0.1); // rotate objects 0.1 radians (which way?)What happens? Which way does the shape rotate? Does it make sense? Now switch the order of the rotation statements. What effect does this have on the shape?
Comment out the rotation code. Now choose one rotation and one translation. Observe the result. Now switch the order of the statements. What effect does this have on the shape?
graphics.scale(ax,ay); graphics.scale(2,3); // scale x by 2 and y by 3Now switch the order of the statements. What effect does this have on the shape?
timer = setInterval(rotateCube, 150)Run this code. What happens? Does it make sense why? The rotations are accumulating! Now add one line of code in the right place to move the square so it rotates around the circle.
You do not have to turn this lab in, but make sure both you and your pair programming partner have a copy by the end of the lab. Feel free to continue this lab to help answer the questions in Homework 3.