Computer Graphic: Assignment 1

Part B (55 marks)
The figure 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 defined 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 define the torso from the torsos coordinate frame to the world coordinate frame. Then to draw
an arm, you must transform the points that define 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.
1
a) [15 marks] Fill up the data transformation functions. When you move the sliders, the penguin should
also move.
b) [20 marks] Draw the missing parts and display a complete penguin in the browser.
c) [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 fill up the remaining 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 file for part A and your submission for part
B should go inside the same folder named a1 in a tgz file. All your code should remain in the directory
a1/penguin. Note that this file 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
first page of your submission for part A. Otherwise, expect a delay in receiving your grades.
2