Assignment 1: Painting Points
- Due Oct 7, 2018 by 11:59pm
- Points 10
- Submitting a file upload
Objectives
Gain a basic understanding of how to work with Javascript/HTML, WebGL and GLSL.
Description
You will use the base code provided below to write a simple Paint web application to draw points on a canvas. Your application is required to have the following features:
-
A canvas where the user can click to draw points.
- When the user clicks on the canvas, a point (a square) is drawn on the clicked position.
- When the user clicks and drags the mouse on the canvas, points are drawn along the dragged direction (it does not have to be a continuous line).
- A button to clear the canvas.
- A slider to set the point size.
- Three sliders to control the shades of red, green and blue of the point color.
Resources
Reading: Matsuda/Lea Ch1 and Ch2.
Base code: ASG1.zip
Rubric
Find Rubric
Please include a title
Keep in mind that 20 students have already been assessed using this rubric. Changing it will affect their evaluations.
| Criteria | Ratings | Pts |
|---|---|---|
|
Have an HTML page with a canvas.
Canvas should be 500x500 pixels.
threshold:
pts
|
pts
--
|
|
|
Have a HTML button to clear screen.
threshold:
pts
|
pts
--
|
|
|
Have an HTML slider to set point size.
threshold:
pts
|
pts
--
|
|
|
Have three HTML sliders to set the shades of red, green and blue of the points.
threshold:
pts
|
pts
--
|
|
|
Implement SendUniformFloatToGLSL() function.
Sends a float value to the specified uniform variable within GLSL shaders.
threshold:
pts
|
pts
--
|
|
|
Implemnt SendUniformVec4ToGLSL()
Sends an Javasript array to the specified uniform variable within GLSL shaders.
threshold:
pts
|
pts
--
|
|
|
Implement SendTextToHTML() function.
Updates the text within an HTML element.
threshold:
pts
|
pts
--
|
|
|
Draw a point on canvas each time the mouse is clicked.
threshold:
pts
|
pts
--
|
|
|
Draw a point on canvas when mouse is held down and there is motion.
threshold:
pts
|
pts
--
|
|
|
Pass position to the vertex shader as well as color and size to the fragment shader.
threshold:
pts
|
pts
--
|