Interactive Pyramid Project

You will be creating an application to render and transform a pyramid.

Requirements

You will model a Pyramid using the vertex technique from the cube example. You will also add lines that represent the X, Y, and Z axes. Each line starts at the origin and extends along its respective axis to the maximum positive value in clip coordinates. The X, Y, and Z lines will be colored red, green, and blue respectively. Each face of the pyramid should be a solid color (no color interpolation).

When the geometry is complete you will need the following HTML controls:

• Text inputs that take numbers to enter rotation values in degrees
• Labels for each text input
• A button to update the rotations if you manualy edit the rotation values
• A button to reset the rotations to the default values

You will also need to add keyboard input controls when the following keys are pressed down:

• W - Rotate “up” along the X axis (clockwise)
• S - Rotate “down” along the X axis (counter-clockwise)
• A - Rotate “left” along the Y axis (clockwise)
• D - Rotate “right” along the Y axis (counter-clockwise)
• Q - Rotate “counter-clockwise” along the Z axis
• E - Rotate “clockwise” along the Z axis
• ENTER - Apply all the rotation values in in text inputs
• R - Reset all rotations

Implementation

The Pyramid must be constructed using the vertex technique. Color and vertex values used to construct the pyramid will be contained in two const arrays. The axis lines are also drawn using a function. The colors of each pyramid face must be: magenta, red, yellow, green, and blue (the order does not matter). One function will be used to create the entire pyramid, with helper functions to create the two different types of faces. Keyboard button presses result in an immediate change in the application. Editing the angles in the text inputs does NOT change the orientation of the pyramid until either the apply rotation button is clicked or the ENTER key is pressed. ALL ROTATIONS MUST BE DONE IN THE VERTEX SHADER and the rotations must be done in X, Y, Z order. All keyboard button presses that change the rotation of the pyramid will do so in 15 degree angle increments. Keyboard button presses should also update the angles in the text inputs.

Hints

• Do NOT use the draw_elements method for rendering the pyramid.
• You DO NOT have to do input validation, but you must use the correct text input for numbers
• Keycodes:
  • 87 - W
  • 65 - A
  • 83 - S
  • 68 - D
  • 81 - Q
  • 69 - E
  • 82 - R
  • 13 - Enter

Grading

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

• 4 points - Something was submitted
• 5 points - Each face of the pyramid is a solid color (no color interpolation)
• 2 points - Buttons are present, aligned vertically, and in the proper order
• 3 points - Text inputs and labels are present and in the proper order
• 12 points - Keyboard input works as described above
• 12 points - Rotations are done in vertex shader and in the correct order
• 5 points - Text input updates on keyboard press
• 3 points - Text inputs start initialized with 0 degrees on init
• 5 points - Axis lines are drawn using a function, with the correct colors, and in the proper orientations
• 4 points - Text inputs show rotations in degrees
• 5 points - Reset also updates the text inputs