Assignment 1: Painting Geometric Shapes

Objectives

To create a scene structure that will support simple geometric shapes made out of triangles.  

Description

You will use the base code provided below to create a web application to draw simple geometric shapes made out of triangles. Your application is required to have the following features:

• A canvas where the user can click to draw simple geometric shapes.
  • When the user clicks on the canvas, a shape (square, triangle or sphere) is drawn on the clicked position.
  • When the user clicks and drags the mouse on the canvas, shapes are drawn along the dragged direction.
• Three buttons to choose between circle, square and triangle.
• A slider to determine the number of segments used to create a circle.
• A button to clear the canvas.
• A slider to set the shape size.
• Three sliders to control the shades of red, green and blue of the shape color.

Resources

Readings: 

• (WebGL) Needed for basic concepts of using WebGL Matsuda/Lea: Ch01, Ch02.
• (WebGL) The chapter that this assignment is built from: Ch03 (67-91). 
• (HTML/Javascript) Mozilla's "Getting started with the web": https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web Links to an external site.
• (HTML/Javascript) How to create HTML buttons: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/button Links to an external site.
• (HTML/Javascript) How to create HTML sliders: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range Links to an external site.

Base Code: 

• https://canvas.ucsc.edu/files/1257652/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_1.zip" (e.g. "Lucas_Ferreira_Assignment_1.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.