Exercise Solution

Part 1

  • Start from your solution to Part 2 of Worksheet 1: A web application that clears the canvas and then draws three points. [Angel 2.8]
  • Attach an event handler to the mouse click event and draw points on the canvas where the mouse was clicked. [Angel 3.7]
  • Points are offset from the tip of the mouse cursor. This is not as desired. Get the bounding rectangle of the canvas in the client area using event.target.getBoundingClientRect() and correct the mouse position using the left and top coordinates of this rectangle.

Please use a browser supporting HTML5

Part 2

  • Add a button that clears the canvas. [Angel 3.6.2]
  • Add a color selection menu where you can choose the color to be used when clearing the canvas. [Angel 2.5, 3.6.3, 3.10]
  • Use a color selection menu to set the color of the drawn point when the mouse is clicked. This requires updating your shaders to work with colors as in Part 3 of Worksheet 1.

Please use a browser supporting HTML5

Part 3

  • We would now like to have two different drawing modes. One where we draw points as before and one where we interactively build a triangle by placing three points. Add a button for each drawing mode. [Angel 3.6.2]
  • (Hint) The following is closely related to the textbook CAD example [Angel 3.10], where a polygon is built interactively. The main difference is that we have two drawing modes.
  • Create an empty array of point indices and an empty array of triangle indices. When drawing in point mode, we add vertex buffer indices of the points to the array of point indices. We also do this in triangle mode for the first two vertices, but with the third mouse click, we add the index of the first triangle vertex to the array of triangle indices and remove the indices of the first two vertices from the array of point indices. Use push and pop when working with the arrays.
  • When rendering, draw the vertices in the array of point indices as points and draw the vertices in the array of triangle indices as triangles. Try to call gl.drawArrays as few times as possible.

Please use a browser supporting HTML5

Part 4

  • Add a button for a circle drawing mode. [Angel 3.6.2]
  • Create an array for circle indices. When drawing in circle mode, add a point on the first click. On the second click add vertices for the circumference as in Part 5 of Worksheet 1 using the position of the second click to set the circle radius. As with the triangle, add the index of the center vertex to the array of circle indices and remove this index from the array of point indices.
  • Draw each circle as a triangle fan when rendering.

Please use a browser supporting HTML5