Assignment 3: Transforming Geometric Objects
- Due Oct 21, 2018 by 11:59pm
- Points 10
- Submitting a file upload
Objectives
To transform (translation, rotation, scaling, etc) simple 2D geometric shapes and 3D objects using matrices.
Description
You will use the base code provided below to modify your Paint web application to draw 2D and 3D (a cube and .obj models) animated objects that can move, rotate and scale.Your application is required to have the following features:
-
A canvas where the user can click to draw 2D and 3D objects.
-
When the user clicks or drags the mouse on on the canvas, a 2D or a 3D object is drawn on the clicked position.
- If the object is a triangle, it should constantly scale up and down.
- If the object is a cube, it should constantly rotate in a way where it is possible to see more than one of its faces at the same time.
- If the object is a square, it should constantly rotate around its z-axis.
- If the object is a circle, it should wander around the screen randomly (translate in xy plane).
- If the object is an .obj model, it should be animated the way you want.
-
When the user clicks or drags the mouse on on the canvas, a 2D or a 3D object is drawn on the clicked position.
- Four buttons to choose between spinning squares, fluctuating triangles, randomly moving circles and tilted cubes.
- One button to select an .obj file stored in your computer.
- One button to load the selected .obj file and render it on the screen.
- A slider to determine the number of segments used to create a circle.
- A button to clear the canvas.
- A slider to set the size of the created objects (it does not apply to the .obj models).
- Three sliders to control the shades of red, green and blue of the shape color.
Resources
Readings: Matsuda/Lea Ch3(91-113) Ch 4 (Appendix C)
Base Code: ASG3.zip
What to Turn in
1. Canvas Submission
Zip your entire project and submit it to Canvas under the appropriate assignment. Name your zip file "[FirstName]_[LastName]_Assignment_3.zip" (e.g. "Lucas_Ferreira_Assignment_3.zip").
2. Live Hosted Submission
Host your assignment on your UCSC portal. This can be achieved by just putting your entire project directory into the 'public_html' folder which you can access via the UCSC Unix timeshare. Your site link is 'https://people.ucsc.edu/~ucsc_user_name/'.
WHEN SUBMITTING YOUR PROJECT ON CANVAS, PLACE YOUR SITE LINK AS A COMMENT OF THE SUBMISSION.
Read the SubmissionGuide.txt file for further explanation on how to submit your assignment.
Rubric
Find Rubric
| Criteria | Ratings | Pts |
|---|---|---|
|
Have buttons/sliders for clear, size and color as per Assignment 2.
threshold:
pts
|
pts
--
|
|
|
Have four HTML buttons to choose between spinning squares, triangles, randomly moving circles and rotating cubes.
threshold:
pts
|
pts
--
|
|
|
Have a button to load and render the selected .obj file in the scene and another button to load and render the selected .obj file in the scene.
threshold:
pts
|
pts
--
|
|
|
Implement SpinningSquare class extending Square.
Implement the SpinningSquare updateAnimation() function so that squares rotate around their z-axis (without moving their position).
threshold:
pts
|
pts
--
|
|
|
Implement FluctuatingTriangle extending Triangle.
Implement the FluctuatingTriangle updateAnimation() function so that triangles scale up and down.
threshold:
pts
|
pts
--
|
|
|
Implement RandomCircle class extending Circle.
Implement the RandomCircle updateAnimation() function so that circles wander around on the screen.
threshold:
pts
|
pts
--
|
|
|
Implement TiltedCube class extending Geometry.
Implement the TiltedCube updateAnimation() function so that cubes wander rotate in a way that one can see more than one face at a time.
threshold:
pts
|
pts
--
|
|
|
Add Model matrix to your Geometry class. Update the Geometry render() function and the vertex shader to use the current Model matrix of the geometry.
threshold:
pts
|
pts
--
|
|
|
Implement an animation loop.
Implement the function Scene updateAnimation() function, calling updateAnimation() for each geometry. Implement the tick() function in the tick.js file calling scene.updateAnimation(), scene.render() and requestAnimationFrame().
threshold:
pts
|
pts
--
|
|
|
Implement SendUniformMat4ToGLSL() function.
Sends a matrix to a uniform variable in the shader. This function is in the glslFunctions.js file.
threshold:
pts
|
pts
--
|
|
|
Draw an object on canvas each time the mouse is clicked or is held down.
threshold:
pts
|
pts
--
|