Prev: Q1, Next: Q2



# Practice Exam Questions 1

📗 Enter your ID (the wisc email ID without @wisc.edu) here: and click (or hit the "Enter" key) 

📗 Please report any bugs or mistakes on Piazza.

📗 Question 1
📗 [1 points] Redefine the color array so that the image on the left and the image on the right look the same. 

context.translate(100, 100);
context.fillStyle = "black";
for (let c of color) {
    context.fillRect(0, 0, 50, 50);
    context.translate(75, 0);
    context.fillStyle = c;
}



 Question 2
📗 [1 points] A looped Catmull-Rom (cardinal spline with s=12 or tension = 0) spline is drawn through the following 6 points. If the curve is converted to a series of 6 Bezier segments, the control points for the segment that connects point 4 and 5 are . Click to plot the curve based on these control points. If the red curve segment is on top of the blue curve segment, then the answer is correct.



📗 Question 3
📗 [1 points] A looped Catmull-Rom (cardinal spline with s=12 or tension = 0) spline is drawn through the following 6 points. The tangent vector to the curve at point 2 depends on which points?

Select the points on the diagram (selected points are red), and click : if all answers are correct, the points will turn green.


 Question 4
📗 [1 points] Reorder the following lines so that the code draws the image on the right.
context.fillRect(200, 200, 100, 100);
context.rotate(Math.PI/4);
context.translate(250, 250);
context.translate(-250, -250);
âž© The following lines are not used:
context.translate(200, 200);
context.translate(-200, -200);




📗 Question 5
📗 [1 points] Combine the following lines into one single line. 
context.translate(0, 60);
context.translate(20, 40);
context.translate(-40, -60);
is equivalent to: . Click to draw a random rectangle in light red based on this line and compare it with the same rectangle drawn in green based on the previous lines.



 Question 6
📗 [1 points] Combine the following lines into one single line. 
context.scale(4, -5);
context.scale(3, 2);
context.scale(-3, 2);
is equivalent to: . Click to draw a random rectangle in light red based on this line and compare it with the same rectangle drawn in green based on the previous lines.



📗 Question 7
📗 [1 points] Combine the following lines into one single line. 
context.rotate(90);
context.rotate(-120);
context.rotate(30);
is equivalent to: . Click to draw a random rectangle in light red based on this line and compare it with the same rectangle drawn in green based on the previous lines.



 Question 8
📗 [1 points] Define the constants gx, gy, rx, ry so that the image on the left and the image on the right look the same. 

context.translate(250, 250);
context.fillStyle = "blue";
drawTriangle(canvas, context);
context.save();
context.rotate(-Math.PI / 2);
context.translate(gx, gy);
context.fillStyle = "green";
drawTriangle(canvas, context);
context.restore();
context.save();
context.translate(rx, ry);
context.rotate(Math.PI / 2);
context.fillStyle = "red";
drawTriangle(canvas, context);
context.restore();



📗 Question 9
📗 [1 points] Suppose the 2D rotation matrix (4 numbers) is [0−110] that rotates the context by a certain amount θ, to rotate by twice that amount 2θ, what matrix should be used? .


The rotation from the black vector to the blue vector is θ and the rotation from the black arrow to the red arrow is 2θ. If the rotation matrix is correct, the green arrow should be on top of the red arrow.


 Question 10
📗 [1 points] The 2D point [70130] is transformed by the homogeneous transformation matrix [12501150001]. Select the position of the transformed point: if the answer is correct, the point will turn green.








Last Updated: April 15, 2025 at 3:43 PM