Shapes Activity

You will be creating a simple scene with three distict shapes as shown below:

You do not need to match the positioning perfectly, but the shapes must be of comparable size, and contained within their respective quadrants of the scene.

To help with the circle, you will need to know the following things:

1. It is best to make a function to create this object
2. You will need a center point for the circle and for gl.TRIANGLE_FAN
3. You will need a for loop to calculate each of the 50 vertices that make up the circle
4. You will need to use a modification to the parametric equation find each vertex (NOTE: cx and cy are the center x and y values and a is measured in radians (2pi))
   • x = cx + r * cos(a)
   • y = cy + r * sin(a)
   • In Javascript Math.cos, Math.sin, and Math.PI will help
5. You can use subscript notation to get a specific component from the center vertex (center[0] for x or center[1] for y)
   • You can also use the add(a, b) function provided by MV.js to add two vectors together

Grading

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

• 1 point - something was submitted
• 2 points - a right triangle appears in the top-left quadrant of the WebGL window (large enough to be seen) with the hypotenuse facing left
• 2 points - the right triangle vertices are colored Red, Green, and Blue starting with the vertex at the right angle and moving clockwise
• 2 points - a square made using a gl.TRAINGLE_STRIP and four vertices in the top-right quadrant of the WebGL window (large enough to be seen)
• 2 points - the square vertices will be WC3 color HotPink rgb(255, 105, 180)
• 4 points - a circle positioned in the bottom-left quadrant of the WebGL window with it’s center at (-0.5, -0.5), a diameter of 0.65, and comprised of exactly 50 total vertices using the gl.TRIANGLE_FAN
• 1 point - the circle vertices will be green
• 1 point - all three shapes are present and none of then are clipped, touching, or entering the other quadrants