Painful Paint Programming Using javascript

In the latter part of chapter 3, the CAD program is introduced. We are going to expand on that and make some improvements.

You will add the following functionality.

1. Allow the user to select if they want filled or outline.

2. Allow the user to change the color (Hint: look up HTML form color input)

3. You will have buttons (Preferably toggle inputs) to allow the user to draw a rectangle, an n-point polygon, a line, circle and a triangle.

4. You will allow the user to draw a rectangle with the same method that he employs, however, you will draw a temporary rectangle showing the user where the first point was clicked and where the mouse cursor is.

5. For the N-point polygon you will draw the current polygon until the user has finished.

6. For the line you will simply select a point and then another point. (Again draw a temporary line to show the user where the line would currently be)

7. For the circle, select the center of thecircle selecta second point to specify the radius (Again creating a temporary circle to show the user where it would be).

1. If the circle is filled, you can use triangle fan to fill it.

2. However, you will only want to use triangle fan on circle.

8. For the triangle, the user will select three points to draw the triangle. (A temporary triangle will be drawn while the user is selecting the 3rd point).

9. At anytime the user can cancel drawing an object by clicking the right button.

BIG HINT: Dont forget your data structures. Instead of using one global array of vertices, make classes for each particular type that have their own render functions which take the gl and program parameters. Once the user has finished adding the object push that object onto a list. Then call each of their render methods with the gl and program variables sent in as parameters.

Minor Hint: You only clear before you start going through the list of objects, that way they all show up. You will only need to clear the screen when you are drawing the temporary outlines for the user. In this particular situation you will need a temporary array of vertices and change the vertices each frame while the user is drawing the object.