CS 398: Introduction to Graphics Programming
Assignment: Geometry
Base code
Once you downloaded the base code from Piazza and started a local web server, click here to open c_geometry.html
.
Check if you have started a local web server properly if the link is not working.
Extend this code to implement the following tasks.
All the tasks below should be done in 2D.
Task 1: Generating polygons
Implement a vertex shader to generate regular polygons with gl_VertexID
where uniforms.iNumVertices
defines the number of sides (i.e., uniforms.iNumVertices == 5
represents a pentagon).
Use gl.drawArrays
with POINTS
, LINES
(or LINE_STRIP
or LINE_LOOP
), and TRIANGLES
(or TRIANGLE_STRIP
or TRIANGLE_FAN
) properly to draw the respective geometries.
Draw points, lines, or triangles (i.e., the resulting polygon) when the value of geometryType
is 0, 1, and 2 respectively, so that you can cycle through different modes by pressing the up key.
Make sure that different types of geometry are clearly visible.
Your code should show the result of this task when processingType == 0
.
By default, you should be able to cycle through the results of Tasks 1 and 2, Task 3, and Task 4 pressing the down key.
Task 2: Affine transformation
Apply Affine transformation to the shape you generated in Task 1 based on homogeneous coordinates and Affine transformation matrices, so that the shape rotates around the point (0.3, 0.3)
.
You need to define the necessary matrices by yourself within the vertex shader (i.e., do not use predefined matrix functions from TWGL).
Change the angle of rotation according to iTime
to make animation.
Your code should show the result of this task when processingType == 0
.
Task 3: Composite transformation
Based on your code in Task 2, apply a sequence of translations and rotations to draw connected line segments so that they stay connected regardless of their rotations and the length of each segment stays the same.
Change the angles at each vertex according to iTime
to demonstrate your result.
Hint: You may want to consider the vertex at gl_VertexID == 0
as fixed, and apply transformation to generate the rest of vertices as the joint locations.
You should be able to see something like a robotic arm or a tentacle.
Your code should show the result of this task when processingType == 1
.
Use LINE_STRIP
in this task.
Task 4: Parametric curves
Draw a parametric curve defined by the control points given in the code.
Choose any parametric curve discussed in the lecture and say what you used in your README
.
Your code should be in the vertex shader.
Draw the resulting curve as many lines similarly to Task 1.
Increase the number of vertices so that the resulting curve looks smooth.
Your code should show the result of this task when processingType == 2
.
Use LINE_STRIP
in this task.
Task 5: Demo
Create something interesting based on what you have implemented in the previous tasks. Your program should go into the demo mode for this task when pressing the space key, and goes back the regular mode by pressing the space key again. Consider adding interactivity, such as user controls to manipulate the geometry or animations, and document any features you implemented. You are free to combine multiple features from different tasks into one (e.g., parametric curves + composite transformation). Your demo should showcase the capabilities of the code you have written.
Submission
The submission process for this assignment is basically the same as the one for Assignment: Warm-up.
See Assignment: Warm-up for instructions about how to prepare your submission.
If you are doing something extra, be sure to document them in your README.md
or README.txt
file.
If your changes are so radical that your modified program is incompatible with the original specification for each task, you must include a "compatibility mode" that makes the interface behave like the requirements here, or consider creating an entirely separate code.