CMPT 361 Computing

Computing Science CMPT 361 Spring 2021
Assignment #2 (12 marks)
Written parts are exercises, no submission; solutions posted progressively over time.
Programming part due: Friday, Apr. 16, 11:45 p.m. via electronic submission.
Programming (12 marks): Shading and controlling a robotic arm
Write a program in robotArm.js and robotArm.html to display and control a robotic arm
to pick up and move a sphere. Check out the sample code by unzipping:
https://www.dropbox.com/s/xcm...
and look into the baseline scripts and associated shaders. Make sure that all the files reside
in the same directory when you load the WebGL code into your browser. You are to build
your program based on them, using the same file names as they are now. On the two files
robotArm.js and robotArm.html need to be modified.
The robot is composed of three parts: the base, a lower arm, and an upper arm. First, run
the sample code and see what it does by interacting with the interface and observing how
the robot arm’s movements are altered. Pay special attention to the transformations used to
control which part to rotate and how the rotation is done. Note that no collision detection
needs to be handled. Read Section 9.3 of the text on hierarchical models to learn more.
You have four tasks to complete:
● [2 mark] Model the Robot Arm: Change the dimensions
of the two arms to 2 × 0.32 and the base shape to a cylinder
with height 0.5 and both base radii 0.5, looking roughly
like the model shown in the right figure. You are free to
find resources, even a pre-defined model, for creating the
cylinder. If you used someone else’s model/code, cite it.
● [5 marks] Illumination and shading: Add Phong local
illumination and smooth polygon shading to make the robot arm object look more
realistic. It is encouraged to specify material properties that resemble those of a
metallic object. You are free to define the lighting parameters. No transparency.
But do make sure that there is specular highlight somewhere on the model.
● [2 marks] Two views: Add an additional toggle menu which alternates between
“Top View” and “Side View” when the item is selected. This menu item specifies
which view to use for the robot arm. Side view allows you to view the robot from
the side (like in the figure above) and top view is from the top. For the top view,
select your view and parallel projection parameters properly so that in top view,
o The whole robot is within your view for any possible robot movement.
o The robot base is located at the center of the window.
● [3 marks] Fetch a sphere object: Modify your program so that it accepts six
arguments as text fields instead of the original sliders:
old_x old_y old_z
new_x new_y new_z
Also, add a pressable button named "Fetch". When this button is pressed, it should
first display a solid sphere with radius 0.15, centered at (old_x, old_y, old_z), and
with material and reflectance properties defined at your choice. Feel free to use any
resources to model the sphere object, as you did for the cylinder base. Note that the
robot arm should be displayed from the start, even before pressing the button.
Then, starting from its initial position, the robot base and arms should undergo
appropriate motion (i.e., rotations, similarly to what is performed on the sample
code provided) so that the tip of the upper arm touches the sphere. At this moment,
the sphere should be picked up and attached to the upper arm and then it is moved,
by having the robot base and arms undergo appropriate motions again, to the new
location (new_x, new_y, new_z). When this is done, the robot should return to
its initial position and the sphere should remain at its new location (no gravity!).
You may assume that both input sphere locations are reachable by the robot arm. The
motion of the arm should be smooth and shown at appropriate speed.
What to submit: You should modify the sample programs into your own code, adding
extra files, if necessary. Your program should implement the two views, the input text
fields, and the “fetch” button. Submit your entire folder zipped in a single file called
robotArm.zip. You may also include a README for documentation and/or instructions.
Exercise 1: “Spinning of the wheel”
In movies and on TV, you can often see the wheels of a car appear to be spinning in the
wrong direction. What causes this artifact? Can anything be done to fix this problem?
Exercise 2: Texture mapping without distortion
What kinds of surfaces can be texture mapped (assuming that the texture is a planar image)
without any distortion? Try to provide as general an answer as possible.
Exercise 3: Mean vs. median filtering
In mean filtering of an image, we assign to each pixel (i, j) an average of a set of
neighboring pixels of (i, j). In median filtering, we take the median instead of the mean.
Please compare the two approaches in terms of quality of results and efficiency.
Exercise 4: Triangular coverage on summed area table
Describe how to efficiently compute the sum of intensities covered by an arbitrary triangle
over a texture map, using a pre-computed summed area table. You can assume that the
texture map stores one intensity value per texel and that the vertices of the triangle locate
at texel centers. Your calculation should be based purely on values stored in the summed
area table and no intersection tests between triangle edges and grid lines should be
computed. Hint: Try to cover only cases that are really distinct and use figures to assist the
description of your solution. Make you algorithm as efficient as you can.
Exercise 5: Parametric curve design
Determine the change of basis matrix for a quintic (that is, degree-5) parametric curve
which is defined by four points and two tangent vectors, as shown below. Use the transpose
of [P1 R1 P2 P3 P4 R2] as your vector of control points or observable quantities. Expressing
your solution as the inverse of a computed matrix is sufficient.
Exercise 6: Approximating a circular arc using a Bezier curve
Very efficient algorithms exist to draw cubic Bezier curves. In
fact, these algorithms are so efficient that other types of curves
are often converted to Bezier curves for display purposes. You
are to approximate a 90° circular arc (it is part of the unit circle
located in the first quadrant) with a Bezier curve. Derive the
coordinates of the four control points of a Bezier curve that
approximates the arc. This approximation should touch and be
tangent to the arc at both of its endpoints as well as at its midpoint.
P1: t = 0
P4: t = 1
P2: t = 1/3 P3: t = 2/3
R1: t = 0
R2: t = 1