Assignment 1: Painting

Objectives

To create a simple paint program that draws on the screen when you drag with your mouse.  

Description

You will  create a web application to draw simple geometric shapes made out of triangles. Your application is required to have the following basic features that get you to a B grade if complete:

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

Assignments which go sufficiently beyond the basics can get an A grade. Examples of the kinds of things that might make you awesome.

• A better brush shape that looks more like paint
• Aligning the brush shape the the stroke direction
• A better paint color picker
• Filling in the gaps during mouse drag
• Learning about and using 'alpha' to get 'transparent' paint
• Whatever you can think of that would make a better paint program

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.

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.