CSS 450: Programming Assignment #3-Final

Simple Drawing With WebGL and simple behavior

 

Due time: Please refer to our course web-site

 

Objectives

This specification is a modification and extension to MP3 spec from here. You should follow the specification here (which is a slight superset of the previous version).

 

This main purpose of this assignment is for you to work on a “vertical slice” through our code base: from the interface to WebGL to connecting graphical primitive attributes to the GUI to simple application state behavior. More specifically, you will:

·         Work with WebGL vertex buffer to define geometries for new shapes

·         Connect the geometry to the user via Renderable and Shader objects

·         Allow user control of the attributes to the created shapes via GUI

·         Implement simple application state behavior [this is the addition from previous mp3]

 

Approach

You will build a web-site that supports the basic drawing of shapes and simple behavior. You system will have three modes:

·         View Mode: with no shape being worked on

·         Insert Mode: where your user will have the ability to control the attributes of the newly created shape.

·         Erase Mode: where you will move an eraser and erase the created shapes.

 

Supported shapes, you system must allow the user to select a shape to be created. You must support at least:

·         Circle

·         Square

 

Modes and mode transitions:

·         Insert Mode: activated by left mouse button (LMB) in the drawing area. Your system will respond by:

o    Creating a new shape centered at the position of LMB click

o    Showing the GUI elements to support the editing of attributes of this newly created shape

·         View Mode: activated by right mouse button (RMB) in the drawing area. Your system will respond by:

o    Hiding the attribute editing GUI elements.

·         Erase Mode: activated by a dedicated check-box. Your system will respond by

o    Hide all Insert and View Mode GUI elements.

o    When in Erase Mode, your system must

§  Show an eraser. The eraser (can be of any shape)

§  Drop all shapes at a constant rate of 1 unit per update

§  Remove all shapes with center y-position of less than 0 (if they left the screen)

§  Position controlled by the mouse position

§  When LMB is clicked: erase all shapes with centers within 20-pixel radius from the center of eraser.

·         Details:

o    When not in Erase mode: LMB always causes the creation of a new shape, and the attribute editing GUI will always edit the latest created shape.

o    Erase mode always transit to View Mode: either when user click on the check box, or, when there are no more shapes left


Supported attributes, while in Insert Mode, your system must allow the changing of attributes of the newly created shape and the changes must be reflected in the drawings immediately:

·         The transformation attributes: scale, translate, and rotation

·         The color

 

Additionally, you system must:

·         Echo the total number of created shapes to the user.

·         Echo the total number of shapes erased by the user

o    Each time your system goes into Erase mode, you must reset this number to 0.

 

Here are some screen shots to help explain the system:

 

·         System in View Mode with 11 created shapes

o    Notice: the options for selecting which shape to create and the fact there are 11 shapes showing on screen.

o    Notice: the reported zero erased.

 

·         LMB will transition into Insert Mode with the attribute editing GUI showing. The GUI will change the newly created shape (the circle):

o    Color selection: in Insert Mode, you must support color selection (with a friendly GUI):

§  You must self-learn and use a color editing tool. Alternatively, you can develop one if you know how:

·         You MUST support interactive selection of at least 10,000 color options (not a joke).

§  Here is the screen show of my color selection GUI:

 

·         Clicking on the Erase check box enables the Erase Mode.

o    Notice the white square under the mouse, this is the eraser

o    Notice all View/Insert Model specific GUI are hidden.

o    Notice the echo numbers: total on screen is now 6, and number of erased is 3. Some shapes dropped off the screen before I erased them.

 

·         When all shapes are gone, the mode is set to View Mode, notice the number of erased is left at 3. This number should be set to zero the next time Erase mode is activated.

 

 

 

Hints:

·         I used TRIANGLE_FAN to define my circle. Here is where you can find out more about TRIANGLE_STRIP and FAN: https://www.opengl.org/wiki/Primitive

·         My circle has 50 vertices (so there are 52 vertices in the buffer).

·         Color picker, this is the tool I used: https://github.com/buberdds/angular-bootstrap-colorpicker

·         It took me about 30 to 60 minutes to examine a couple of options and selected this (because it is the simplest I can find)

·         It took me another about 30 to 60 minutes to figure out how to use this in a very simple web-page.

 

 

Credit Distribution

Here is how the credits are distributed in this assignment:

 

1.

Support for drawing circles

 

20%

 

a.    Ability to draw one circle

b.    Ability to draw one circle AND one square

c.     Ability to draw many circles and many rectangles

10%

5%

10%

2.

Support for Insert Mode

 

20%

 

 

 

 

a.    Allow options of selecting square or circle

b.    Support transition to View Mode with RMB

c.     Proper showing of attribute editing GUI elements

d.    Proper GUI support for changing xform

e.     Proper GUI support for changing color

5%
5%

5%

10%

5%

3.

Support of View Mode

 

10%

 

a.    Support transition into Insert Mode

b.    Proper hiding of attribute editing GUI elements

5%

5%

4.

Support for Erase Mode

 

15%

 

a.   Eraser follow mouse position

b.   LMB click/drag erases shape within range

c.    All shape falls at 1 unit/update

d.   Hide all Insert/View model GUI

e.    Transition back into View Mode

 

5%

10%

5%

5%

5%

5.

Support for Color Editing

 

20%

 

 

 

a.    Ability to change color (even with radio button)

b.    Support for selection from continuous color space

10%

10%

6.

General GUI and Echo

 

10%

 

 

a.    Echo total shapes on screen

b.    Proper echo of num erased (reset to zero each time enabled)

c.     App looks “nice and reasonable”

 

5%

5%

7.

Submission:

 

5%

a.    proper zip file and project name

b.    No useless files submitted

 

 

 

Extra Credit:

 

Supports selection of current shape: to a shape other than the last one inserted

Surprise me!!: Do anything extra that is related to creation/editing/erasing, and make sure to tell us in the submission feedback. We will look at it, and I will decide how much extra credit your work will receive. Unrelated fancy UI (e.g., animated gif) will not fetch anymore extra credits. We have moved on J.

 

This programming assignment will count 18% towards your final grade for this class.