Computer Grafik

WorkSheet 2

Worksheet 2:
Input devices and interaction

Angel: Sections 3.2-3.11
The purpose of this set of exercises is to start interacting with the graphics elements that we draw using input devices. You will make a small 2D drawing program where primitive shapes of different colors can be added using the mouse. Although it is possible to draw 2D shapes using a 2D canvas context, you will do it with a WebGL context as it is really not much harder, and WebGL enables later extension to full 3D.
The following screenshot is an example of what the final web application could look like. Your version doesn’t have to be exactly like it. The important point is that it has the features we want.
In your drawing program, you should be able to:
  • Use the mouse to draw different primitive shapes (point, triangle, and circle).
  • Select the color of a shape while adding it.
  • Draw points at the first two vertices of a triangle and replace the points by a triangle for every third vertex.
  • Draw a point in the circle center and replace the point by a circle for every second mouse click (the second point sets the circle radius).
  • Use color interpolation between triangle vertices and radially in circles.
  • Clear the canvas to the selected color (delete all shapes).