The gure above shows an articulated nine-part, seven degree-of-freedom (DoF) planar robot penguin. It has six rotational joints (depicted by circles), each with one rotational degree of freedom. The beak has a single translational degree of freedom: it can move up or down (in the local coordinate frame of the head). The whole penguin can also move up and down and left and right. Your task will be to draw such a robot penguin using Javascript and Canvas.
Hierarchical objects like this are often de ned by specifying each part in a natural, part-based coordinate frame, along with transformations that specify the relative position and orientation of one part with respect to another. These transformations are often organized into a kinematic tree (e.g., with the torso as the root, and the jaw as a leaf). In addition to the kinematic tree, one must also specify the transformation from the root (e.g., the torso) to the world coordinate frame. Then, for example, to draw the torso you transform the points that de ne the torso from the torsos coordinate frame to the world coordinate frame. Then to draw an arm, you must transform the points that de ne the arm in the arm's coordinate frame to that of the torso, and then from the torsos coordinate frame to the world coordinate frame. The same process should be repeated for drawing other parts.
Your Programming Task. Your task is to draw the articulated robot penguin using Javascript and Canvas. In this task, your code should be able to control the penguin by the sliders (top-right). After program, you should be able to run it in a browser and use the sliders to control the robot penguin.
[15 marks] Fill up the data transformation functions. When you move the sliders, the penguin should also move.
[20 marks] Draw the missing parts and display a complete penguin in the browser.
[20 marks] Hierarchical transformation should be utilized. For example, rotating the hip joint should also move the foot.
Helper Code. A line drawing function, a point transformation function, a transformation composition function, and the controlling functions (sliders, callback functions) are given. You need to ll up the remain-ing drawing and transformation functions, and utilize them to draw the missing parts of the penguin.
Turning in your Solution to Parts A and B. Your pdf le for part A and your submission for part B should go inside the same folder named a1 in a tgz le. All your code should remain in the directory a1/penguin. Note that this le should not be thought of as a substitute for putting detailed comments in your code. Your code should be well commented if you want to receive full (or even partial) credit for it.
To pack and submit your solution, execute the following commands from the directory containing your code (i.e., a1/penguin). Note that the submit script only works on CDF machines.
cd ../../
tar cvfz a1-solution.tgz a1
submit -c csc418h -a A1 a1-solution.tgz (if registered for CSC418)
submit -c csc2504h -a A1 a1-solution.tgz (if registered for CSC2504)
Note for Part A. Please make sure that you mention your name, student number, and CDF ID on the rst page of your submission for part A. Otherwise, expect a delay in receiving your grades.