CS 4722 - Computer Graphics and Multimedia

Module #8, Assignment #1

Exercise #1

Create the RobotArm application and from the code of the MoveArm application that was demonstrated in class:

The HTML code is given here: MoveArm2.html.

The JavaScript code is given here: MoveArm2.js.

In the MoveArm program, the arm is pointing up. In this program, the arm will be pointing down and it have 4 main components articulated on 3 joints. The red portion is the base which we will call Arm 1. The blue portion is Arm 2, the green portion is Arm 3, and the yellow portion is Arm 4 which is essentially a single finger. Joint 1 is the center point at the top of Arm 1, and it allows you to rotate Arm 1 around it. Joint 2 connects Arm 1 and Arm 2. And Joint 3 connects Arm 2 and 3. You can rotate around the Joints using the keyboard commands explained below, and this produces the type of motion shown here:

Notice that if you rotate Joint 1, then Joint 2 and Joint 3 maintain the same relative position and orientation to Joint 1. It is also the case that you can translate the base, Arm 1, along x and y and the entire Robot Arm will move. Arm 4 can be scaled along its local x, as shown above, changing it to a hammer from a finger. Note: all of the arm components are created by modifying a unit cube. The cube should not rotate around its center point. It should rotate around this point:

The user must be able to control the movement of the arm through keyboard keys using the following Key Codes: Q, W, A, S, Z, X, E, D, R and T. These codes indicate which Arm component to move or rotate and in which direction. The H code toggles Arm 4's state back and forth from a finger to a hammer.

The following summarizes how the Key Codes operate:

ROTATION Key Codes:

Q and W: When pressed they move Arm 1 (the base) in an unlimited rotation around the world's z axis (Q for positive and W for negative rotation)
A and S: When pressed they move Arm 2 around Joint 2 in a motion limited to -45 and +45 around local z axis (A for positive and S for negative rotation)
Z and X: When pressed they move Arm 3 around Joint 3 in a motion limited to -45 and +45 around local z axis (Z for positive and X for negative rotation)

TRANSLATION Key Codes:

E and D: Move the full arm along the world's y axis (E for positive and D for negative rotation)
R and T: Move the full arm along the world's x axis (R for positive and T for negative rotation)

SCALE Key Code:

H: Scales Arm 4 onlong its local x axis, toggling it back and forth between a finger and a hammer

PERSPECTIVE Key Code:

P: Toggles back and forth between Perspective and Orthographic projections.

Camera Eye Mode Key Code:

M: Toggles back and forth between 1st Person Camera (looking from above the arm down onto it) and 3rd Person Camera (looking at the arm from a distance)
First Person mode is typically the type of camera that is in first person shooters. It is as if the camera is inside the character's head. You are looking down at the arm from above it, inside the head of the character:
Third Person mode is the mode where you can see your character from a distance away. It is like the character has a pole sticking out of his/her head and there is a camera affixed to the end. (Since there is no walking in this program, you don't have to actually follow the character.) This is the default mode to start in.

ZOOM and Rotation Key Codes:

Up Arrow: Zooms into the scene (when you are in 3rd Person Camera mode).
Down Arrow: Zooms out of the scene (when you are in 3rd Person Camera mode).
Left Arrow: Rotates around the scene to the left.
Right Arrow: Rotates around the scene to the right.

To create this new functionality, the first thing you will need to do is remove the sliders from the screen. So go into your HTML file and do this by removing the <div> and </div> tag lines and everything in between them.

Next, while you are still in your HTML code, go into your Fragment Shader and find the following line:

        varying vec4 fColor;

Below that line, add the following line:

        uniform vec4 drawColor;

Then a few lines below that replace the word "fColor" with "drawColor" on the "gl_FragColor = fColor;" line to make the line instead become the following:

            gl_FragColor = drawColor;

Next, go into your JavaScript code and declare the following new variables and new constant values which you will use to reposition and reshape your arm:

const ARM1_HEIGHT = 2.5;
const ARM1_WIDTH = 1.5;
const ARM2_HEIGHT = 2.5;
const ARM2_WIDTH = 1.5;
const ARM3_HEIGHT = 2.5;
const ARM3_WIDTH = 1.5;
const ARM4_HEIGHT = 2.5;
const ARM4_WIDTH1 = 0.5;
const ARM4_WIDTH2 = 1.7;

const redColor = vec4(1, 0, 0, 1);
const blueColor = vec4(0, 1, 0, 1);
const greenColor = vec4(0, 0, 1, 1);
const yellowColor = vec4(1, 1, 0, 1);
var drawColorLoc;

const arm1Theta = 0;
const arm2Theta = 1;
const arm3Theta = 2;
var arm4Scale = 1;

var yOff = 0.0;
var xOff = 0.0;

var isOrtho = true;
var fovy = 140;
var up = vec3(0.0, 1.0, 0.0);
var at = vec3(0.0, 0.0, 0.0);
var eye = vec3(0.0, 0.0, 0.0);

var near = 0.1;
var far = 40;
var left = -10;
var right = 10;
var ytop = 10;
var bottom = -10;
var radius = 4;

var projectionLoc;
var cameraMode = false;
var phi = 0;

Next, find and remove the following commands in near the bottom of your init() method:

    document.getElementById("slider1").oninput =
        function (event) {
            theta[Base] = event.target.value;
        };

    document.getElementById("slider2").oninput =
        function (event) {
            theta[LowerArm] = event.target.value;
        };

    document.getElementById("slider3").oninput =
        function (event) {
            theta[UpperArm] = event.target.value;
        };

Next, add the following code in place of the code you just removed (be sure it goes above the render() call). Inside of this code is where your Key-Handler code will go:

    drawColorLoc = gl.getUniformLocation(program, "drawColor");

    document.addEventListener("keydown",
      function (event) {
          if (event.keyCode == 81) {   // Q
          }
          if (event.keyCode == 87) {   // W
          }

          if (event.keyCode == 65) {   // A
          }
          if (event.keyCode == 83) {   // S
          }

          if (event.keyCode == 88) {   // Z
          }
          if (event.keyCode == 90) {   // X
          }

          if (event.keyCode == 69) {   // E
          }
          if (event.keyCode == 68) {   // D
          }

          if (event.keyCode == 82) {   // R
          }
          if (event.keyCode == 84) {   // T
          }

          if (event.keyCode == 72) {   // H
          }

          if (event.keyCode == 80) {   // P
          }

          if (event.keyCode == 77) {   // M
          }

          if (event.keyCode == 37) {   // Left
          }

          if (event.keyCode == 39) {   // Right
          }

          if (event.keyCode == 38) {   // Up
          }

          if (event.keyCode == 40) {   // Down
          }

      }, false);

Next, find and remove the following 3 functions in your code: base(), upperArm() and lowerArm().

Instead of just 3 parts to the arm, now there will be 4, and they will be called: arm1(), arm2(), arm3() and arm4(). The following is the code for these 4 new functions that you should add where you removed the last 3 functions:

function arm1() {
    var s = scalem(ARM1_WIDTH, ARM1_HEIGHT, ARM1_WIDTH);
    var instanceMatrix = mult(translate(0.0, 0.5 * -ARM1_HEIGHT, 0.0), s);
    var t = mult(modelViewMatrix, instanceMatrix);
    gl.uniformMatrix4fv(modelViewMatrixLoc, false, flatten(t));
    gl.drawArrays(gl.TRIANGLES, 0, NumVertices);
}

function arm2() {
    var s = scalem(ARM2_WIDTH, ARM2_HEIGHT, ARM2_WIDTH);
    var instanceMatrix = mult(translate(0.0, 0.5 * -ARM2_HEIGHT, 0.0), s);
    var t = mult(modelViewMatrix, instanceMatrix);
    gl.uniformMatrix4fv(modelViewMatrixLoc, false, flatten(t));
    gl.drawArrays(gl.TRIANGLES, 0, NumVertices);
}

function arm3() {
    var s = scalem(ARM3_WIDTH, ARM3_HEIGHT, ARM3_WIDTH);
    var instanceMatrix = mult(translate(0.0, 0.5 * -ARM3_HEIGHT, 0.0), s);
    var t = mult(modelViewMatrix, instanceMatrix);
    gl.uniformMatrix4fv(modelViewMatrixLoc, false, flatten(t));
    gl.drawArrays(gl.TRIANGLES, 0, NumVertices);
}

function arm4() {
    var s = scalem(ARM4_WIDTH1, ARM4_HEIGHT, ARM4_WIDTH2);
    var instanceMatrix = mult(translate(0.0, 0.5 * -ARM4_HEIGHT, 0.0), s);
    var t = mult(modelViewMatrix, instanceMatrix);
    gl.uniformMatrix4fv(modelViewMatrixLoc, false, flatten(t));
    gl.drawArrays(gl.TRIANGLES, 0, NumVertices);
}

Next you need to replace your render() method with the following render() method that draws your new arm with the new 4 components in the right orientation:

function render() {
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

    eye = vec3(radius * Math.sin(angle) * Math.cos(phi),
                radius * Math.sin(phi),
                 radius * Math.cos(angle) * Math.cos(phi));

    if (isOrtho) {
        projectionMatrix = ortho(left, right, bottom, ytop, near, far);
    } else {
        projectionMatrix = perspective(fovy, 1.0, near, far);
    }

    gl.uniformMatrix4fv(projectionLoc, false, flatten(projectionMatrix));

    modelViewMatrix = lookAt(eye, at, up);

    gl.uniform4fv(drawColorLoc, redColor);
    modelViewMatrix = mult(modelViewMatrix, translate(xOff, yOff, 0.0));
    modelViewMatrix = mult(modelViewMatrix, rotate(theta[arm1Theta], 0, 0, 1));
    arm1();

    gl.uniform4fv(drawColorLoc, greenColor);
    modelViewMatrix = mult(modelViewMatrix, translate(0.0, -ARM1_HEIGHT, 0.0));
    modelViewMatrix = mult(modelViewMatrix, rotate(theta[arm2Theta], 0, 0, 1));
    arm2();

    gl.uniform4fv(drawColorLoc, blueColor);
    modelViewMatrix = mult(modelViewMatrix, translate(0.0, -ARM2_HEIGHT, 0.0));
    modelViewMatrix = mult(modelViewMatrix, rotate(theta[arm3Theta], 0, 0, 1));
    arm3();

    gl.uniform4fv(drawColorLoc, yellowColor);
    modelViewMatrix = mult(modelViewMatrix, translate(0.0, -ARM3_HEIGHT / 2, 0.0));
    modelViewMatrix = mult(modelViewMatrix, scalem(arm4Scale, 1, 1));
    arm4();

    requestAnimFrame(render);
}

Now, you have everything you need except the key handlers working. The last thing you need to do is to determine for each key code operation explained above, what program code you will need to add to implement the correct functionality.

For example, for the first functionality discussed, when the 'Q' key is pressed, the Arm 1 portion of the arm will rotate in the positive direction. To move it in the positive direction you have to add to the theta value for Arm 1 and to do that you would use code like the following in the Key-Handler code:

            if (event.keyCode == 81) {   // Q
                theta[arm1Theta] += 5;
            }

The code above implements the first functionality animating the arm so that it moves from its base when the 'Q' key is pressed. Once you have implemented the code for the rest of the functionalities, you are 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:

RobotArm.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 #8, Assignment #1

Exercise #1

Deliverables

Annotate