Assignment 2: Transforming Geometric Objects

Objectives

To transform (translation, rotation, scaling, etc) simple 2D geometric shapes and 3D objects using matrices.

Description

Modify your 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.
• 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:
  • (WebGL) Matsuda/Lea Ch3 (91-113) and Ch 4 (Appendix C)
  • (HTML/Javascript) How to create HTML file selectors: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file Links to an external site.
  • (HTML/Javascript) How read selected files in HTML: https://developer.mozilla.org/en-US/docs/Web/API/FileReader Links to an external site.
• Links to an external site.Assets:
  • Sample OBJs: https://canvas.ucsc.edu/files/1273576/download?download_frd=1
• Examples:
  • Code written in lab (04/23): https://canvas.ucsc.edu/files/1275257/download?download_frd=1

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_2.zip" (e.g. "Lucas_Ferreira_Assignment_2.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.