Interative Line Drawing

You will be creating an interactive line drawing program as shown below:

Requirements

A cursor (point) will follow the mouse as it moves within the canvas. When clicking the mouse, a single vertex is established at the current location of the cursor. After a vertex is established a line will be rendered from the current location of the cursor back to the vertex. The line will follow the cursor to show the path of the next drawn line. Each click will add one additional line segment to the drawing. If the color is changed, the cursor color will change immediately as will a portion of the line segment (this is automatic via WebGL’s color interpolation). After a color change, the first line drawn will feature a blend of both colors, but subsequent lines will be one solid color until the next color change. A point will only be drawn on the screen to show the cursor location, and not rendered for each location between line segments. When refreshing the webpage, the dropdown list for colors will always start on the first color and the color order will be: black, red, yellow, green, blue, magenta, and cyan. Pressing the clear button will remove all content on the screen and only show the cursor in the presently selected color.

Implementation

You will NOT use an array of points that holds all of the vertices. The bufferData function will be called only twice in the init function to establish the size of the vertex and color buffers to hold a maximum of 50 values (flattened vec types). This means you will not have a points or colors array in the javascript to hold the rendering data. You will only use the bufferSubData to manipulate the color and vertex buffers. You may have one array of colors for use with the dropdown list color change functionality. You will implement a helper function that will handle converting the mouse coordinates to clip coordinates.

Grading

You will earn up to 70 points for this exercise, broken down as follows:

• 5 points - The program contains a helper function to handle converting mouse coordinates to clip coordinates
• 15 points - Cursor and line color updates once the dropdown item has be selected and the dropdown list closes
• 15 points - Only one point primative is on the screen at any given time representing the cursor that follows the mouse
• 1 point - The cursor must always be drawn on top of the lines
• 1 points - Use the sizeof dictionary to determine the storage size of vec types
• 5 points - The program only uses a javascript array for the list of colors in the dropdown control
• 20 points - Only bufferSubData is used to change the color and vertex buffers.
• 1 points - The program can only hold a maximum of 50 points and colors (this includes the cursor and it’s color are included)
• 3 points - Clear empties the screen of all lines and ensures that the cursor is the correct color on click
• 3 points - Refreshing the web browser resets the application and ensures that the dropdown control is set to the first color
• 1 points - Dropdown list colors are in the correct order