CS 4722 - Computer Graphics and Multimedia

Module #5, Assignment #1

Exercise #1

Modify the given LookAtCubePerspective application so that it implements additional functionalities:

The current HTML code is given here: LookAtCubePerspective.html.

The current JavaScript code is given here: LookAtCubePerspective.js.

After your modifications, you should have the additional functioning sliders as shown:

In addition to the new sliders, make sure your program handles the Up Arrow and Down Arrow keys, so pressing the Up Arrow moves you closer to the cube in the scene, and pressing the Down Arrows moves you further away. And make the Left Arrow rotate the cube to the left, and the Right Arrow rotate the cube to the right. And make sure all four arrow keys work for both Perspective and Orthographic views, and that the Up Arrow and Down Arrow keys also change their corresponding slider values, and those keys don't allow those values to get smaller or larger than their minimum and maximum slider values, respectively.

Exercise #2

The TetraToSphere program given below creates a tetrahedron drawn with a wire frame that you can see through:

From the above angle, you cannot see that it is being drawn without opaque sides, but if you rotate it this issue becomes apparent:

Modify the TetraToSphere program so it is drawn with green opaque sides that have black borders along the triangular edges:

Furthermore, the tetrahedron() method in the code takes a fifth argument that controls how many times the sides of the tetrahedron will be recursively redrawn as smaller tetrahedrons, causing its sides to progressively expand into a sphere-like shape. After four expansions the tetrahedron looks like the following:

So, in addition to your other modification, modify the TetraToSphere program so that you add the following buttons that allow you to rotate it in a horizontal theta angle and a vertical phi angle, and add buttons that allow you to increase the recursive calls from a minimum of zero to a maximum of 6 (after 6 subdivisions, the program gets very slow):

In addition to these buttons, add key handlers so that when the user presses the Up Arrow the object rotates up, and when the user presses the Down Arrow the object rotates down, and when the user presses the Left Arrow the object rotates left, and when the user presses the Right Arrow the object rotates right.

The partial HTML code for the TetraToSphere program is given here: TetraToSphere.html.

The partial Javascript code is given here: TetraToSphere.js.

The first thing you need to do is add your six buttons with the appropriate labels to your HTML code below your canvas.

Then, you will need to modify your Fragment Shader so that it uses either the black and the green color when given an appropriate uniform flag value. Let's assume the uniform value will be called "useBlack" again, like before. But this time it will be a "bool" variable, and if that is the case, you will need to first declare that uniform variable, and then your Fragment Shader's main method should look something like the following:

        if (useBlack)
        {
            gl_FragColor = vec4( 0.0, 0.0, 0.0, 1.0 );   // Black color
        }
        else
        {
            gl_FragColor = vec4( 0.0, 1.0, 0.0, 1.0 );   // Green color
        }

In addition to this, you will need to make the following changes to your Javascript code:

Javascript code changes:

Most of your Javascript code has been given to you. For instance, you already have the modelViewMatrix and the projectionMatrix declared, and their values are already assigned correctly. But your program still needs to assign your theta and phi values to rotate the object horizontally and vertically. And you will need to declare the "useBlackLoc" uniform variables, along with a variable to keep track of how many times you are subdividing the tetrahedron sides:
```
var theta = 0.0;
var phi = 0.0;

var useBlackLoc;

var numTimesToSubdivide = 0;
```
Next, in your init() method, you will have to add your six button handlers. The "Increase theta" and "Decrease theta" button handlers should add or subtract 0.1 from the value of theta while the "Increase phi" and "Decrease phi" button handlers should add or subtract 0.1 from the value of phi.
For the "Increase Subdivisions" and "Decrease Subdivisions" button handlers you should add or subtract 1 from the value of numTimesToSubdivide. However, you have to be sure that the value does not go over six when you add to it, and you have to be sure that the value does not go under zero when you subtract from it. Furthermore, after you update the numTimesToSubdivide value, you need to re-build your vBuffer ARRAY_BUFFER. This means re-initializing the pointsArray and rebinding the buffer to it:
```
    index = 0;
    pointsArray = [];

    tetrahedron(va, vb, vc, vd, numTimesToSubdivide);

    gl.bindBuffer(gl.ARRAY_BUFFER, vBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, flatten(pointsArray), gl.STATIC_DRAW);
```
For this to work you will need to make vBuffer a global variable and make va, vb, vc and vd global variables as well, because with the code you are given they are local variables right now.
And the last thing you need to do in the init() method is to set the useBlackLoc value before you call the render() method with the following line:
```
    useBlackLoc = gl.getUniformLocation(program,"useBlack");
```
The following are the changes you need to make to the render() method:
1. Inside the render() method, before the line that sets the value of the eye vector with "eye = vec3(0,0,radius);", you need to normalize the values of theta and phi with the following code:
```
    if (theta > 2 * Math.PI)
        theta -= 2 * Math.PI;
    if (theta < 0)
        theta += 2 * Math.PI;

    if (phi > 2 * Math.PI)
        phi -= 2 * Math.PI;
    if (phi < 0)
        phi += 2 * Math.PI;
```
2. Next, in order to deal with the issue of which direction is up pointing in, put another if statement that tests the value of phi and if it is greater than or equal to PI/2 AND if it is less than 3 * PI/2, then set the up vector equal to the negative y-direction:
```
    vec3(0.0, -1.0, 0.0)
```
  Otherwise (else), set the up vector equal to the positive y-direction:
```
    vec3(0.0, 1.0, 0.0)
```
3. Next, modify the "eye = vec3(0,0,radius);" statement so that the eye vector has the following (x,y,z) values (which are slightly different than in the last homework assignment because cosine of theta is being used for the z-coordinate, and the sine of theta is being used for the x-coordinate:
  - The x value should equal: radius * sin( θ ) * cos ( ϕ ).
  - The y value should equal: radius * sin ( ϕ ).
  - The z value should equal: radius * cos( θ ) * cos ( ϕ ).
4. Next, right before the for-loop that draws the black lines using the gl.LINE_LOOP state, you need to set the useBlack uniform field to false, and draw the faces of the triangle with the gl.TRIANGLES state, like so:
```
    gl.uniform1i(useBlackLoc, false);

    gl.drawArrays(gl.TRIANGLES, 0, pointsArray.length);

    gl.uniform1i(useBlackLoc, true);
```
Now implement the key handlers and after that you should be all done.

Add a Comment block section to the top of your Javascript program in this assignment with the following information filled in using the following format:

/*
 * Course: CS 4722
 * Section: .....
 * Name: ......
 * Professor: ......
 * Assignment #: ......
 */

Be sure your program runs without error.

Deliverables

Turn in the files:

LookAtCubePerspective.zip (with your HTML and JS files)
TetraToSphere.zip (with your HTML and JS files)

Do this by uploading the file as an attachment to this Module's assignment drop box in D2L Brightspace.

Assignment 2

Notes

Show the following:

Adjust appearance:

CS 4722 - Computer Graphics and Multimedia

Module #5, Assignment #1

Exercise #1

Exercise #2

Deliverables

Annotate