CSE 470 Homework #2: Spinning Cubes Instructor: D. Hansford, Ph.D. Big Picture: Create a WebGL program that allows the user to click in the canvas to create spinning cubes. After five clicks, a slight scaling up of the cubes, and a selection of “Rotate Random Axis”, the program will look as follows. Concepts: • 3D geometry with z-buffer hidden surface removal • 3D clip volume • Model instance • Modelview matrix (rotation about a fixed point) in the vertex shader • User interaction / event handling (click in window, button, slider) • Geometry: representation of 3D object as triangle mesh • JS graphics programming / program organization Detailed Specifications: 1. Create a delineated canvas and instructions for the user to click to add a cube. Your program should look like the figure above. 2. Create the cube and colors as done in the “cube” program. This code should live in its own file, called “createCube.js”. In the primary js code file, “spinningCube.js”, send the cube and colors to the GPU once. (There is no need for bufferSubData in this program.) a. The cube should be colored with solid face colors and each face must have a different color. (Do not include a white, black, or the background color.) 3. When the user clicks in the canvas, a new cube is created, centered at the click location. The z- coordinate of the cube’s center is assigned via a random number. (It must be in clip space). a. See the “cad1” program for an example of window to clip coordinate transformation. b. JS arrays have a handy push function that can be used store information for each cube as they are added. 4. The new cube will be assigned an initial rotation angle and rotation speed via a random number. a. The rotation direction (plus or minus angle), which is controlled by the speed setting, should be between -1 degree and 1 degree. 5. All cubes are the same size, which is a scaling of the model instance of the cube. The default scaling is 10% of the model instance. a. Add a slider that modifies the scale of the cubes from 10% to 100% of the model instance definition. (See “rotatingSquare3” for an example.) 6. Include four rotation control buttons that when clicked, call an event handler that will change the rotation axis to be the x-, y-, z-, or “random-” axis. a. The latter is defined using random numbers each time the button is clicked. (The “rotate” function from MV.js will normalize this vector for you.) b. The cubes will rotate about one axis at a time. (Do not follow the example in the “cube” program, rather the example in the “CubeTransformation” program.) 7. Set up a modelView matrix for the transformations. The matrix definition must be in render(). Pass the definition via a uniform to the vertex shader. Follow the example in “CubeTransformationDemo”. 8. Below the canvas, output HTML text to communicate to the user what this program is all about. See my example Figure for what is required. General Guidelines: 1. Create three files: spinningCube.html, spinningCube.js, and createCube.js. 2. All assets you created must be in one zipped file. Do not zip the program folder. Do not include the Common folder. Name your zip file: LastnameFirstInitial_HW2.zip 3. Turn in your assignment on Canvas. 4. We will grade the last submission only.
