• Available 2016-10-14

• Due 2016-10-18 17:30

  Initial Setup

• Base your work in this lab on `handout/matsuda-lea/ch07/ColoredCube.{js,html}

• Create a directory lab3 in your labs repository.

• Make yet another copy of handout/matsuda-lea/lib in your lab3 directory and commit it.

Q1

• Make the picture below by transforming and redrawing the cube. Call your solution Q1.{js,html}.

  

Q2

• Try adding a call to gl.clear in your loop in Q1 to show an animated cube. What do you observe? Write your answer in Q2.txt, paying attention to timing of the display.

Q3

Use the setTimeout function to turn your loop in Q1 and Q2 into a chain of callbacks. Call your answer Q3.{js,html,txt}. Your cube should complete exactly 5 revolutions, each revolution taking 2 seconds. The motion should look like this video. Start with 30 steps in a single rotation, and increase the number of steps until the motion is smooth and tear free. Approximately what "frame rate" is achievable?

Q4

Replace the drawing of a single cube at each step of the animation with the gear from Q1, i.e. animate a spinning gear. Approximately what frame rate is achievable? How could drawing the gear be made faster? You don't have to impliment it, just speculate. Save your answer in Q4.{js,html,txt}

Q5

• Replace your use of setTimeout in Q4 with requestAnimationFrame. You will have to change how the angle to rotate the gear is calculated in each invocation of the callback. Also, instead of counting steps as in Q3, you should count total elapsed time to see when to stop (after 10 seconds).

• What do you observe about the motion when using the default 2 second rotation time from above? What is the minimum revolution time for which the rotation is smooth?

• In terms of visual artifacts, what are the pros and cons of the setTimeout versus requestAnimationFrame approach?

• Write your answers in Q5.{js,html,txt}