below robot_arm.js code; //---------------------------------------------------------------------------- // State Variable Setup //---------------------------------------------------------------------------- // This variable will store the WebGL rendering context var gl; //Collect shape information into neat package var shapes = { wireCube: {points:[], colors:[], start:0, size:0, type: 0}, solidCube: {points:[], colors:[], start:0, size:0, type: 0}, axes: {points:[], colors:[], start:0, size:0, type: 0}, }; //Variables for Transformation Matrices var mv = new mat4(); var p = new mat4(); var mvLoc, projLoc; //Model state variables var shoulder = 0, elbow = 0; //---------------------------------------------------------------------------- // Define Shape Data //---------------------------------------------------------------------------- //Some colours var red = vec4(1.0, 0.0, 0.0, 1.0); var green = vec4(0.0, 1.0, 0.0, 1.0); var blue = vec4(0.0, 0.0, 1.0, 1.0); var lightred = vec4(1.0, 0.5, 0.5, 1.0); var lightgreen = vec4(0.5, 1.0, 0.5, 1.0); var lightblue = vec4(0.5, 0.5, 1.0, 1.0); var white = vec4(1.0, 1.0, 1.0, 1.0); //Generate Axis Data: use LINES to draw. Three axes in red, green and blue shapes.axes.points = [ vec4( 2.0, 0.0, 0.0, 1.0), //x axis, will be green vec4( -2.0, 0.0, 0.0, 1.0), vec4( 0.0, 2.0, 0.0, 1.0), //y axis, will be red vec4( 0.0, -2.0, 0.0, 1.0), vec4( 0.0, 0.0, 2.0, 1.0), //z axis, will be blue vec4( 0.0, 0.0, -2.0, 1.0) ]; shapes.axes.colors = [ green,green, red, red, blue, blue ]; //Define points for a unit cube var cubeVerts = [ vec4( 0.5, 0.5, 0.5, 1), //0 vec4( 0.5, 0.5, -0.5, 1), //1 vec4( 0.5, -0.5, 0.5, 1), //2 vec4( 0.5, -0.5, -0.5, 1), //3 vec4(-0.5, 0.5, 0.5, 1), //4 vec4(-0.5, 0.5, -0.5, 1), //5 vec4(-0.5, -0.5, 0.5, 1), //6 vec4(-0.5, -0.5, -0.5, 1), //7 ]; //Look up patterns from cubeVerts for different primitive types //Wire Cube - draw with LINE_STRIP var wireCubeLookups = [ 0,4,6,2,0, //front 1,0,2,3,1, //right 5,1,3,7,5, //back 4,5,7,6,4, //right 4,0,1,5,4, //top 6,7,3,2,6, //bottom ]; //Solid Cube - draw with TRIANGLES, 2 triangles per face var solidCubeLookups = [ 0,4,6, 0,6,2, //front 1,0,2, 1,2,3, //right 5,1,3, 5,3,7,//back 4,5,7, 4,7,6,//left 4,0,1, 4,1,5,//top 6,7,3, 6,3,2,//bottom ]; //Expand Wire Cube data: this wire cube will be white... for (var i =0; i

angles" //"a/A: to rotate the fingers on the x-axis with positive direction" //"b/B: to rotate the fingers on the x-axis with negative direction (all fingers sholuld rotate)" //"m/M: to rotate the fingers on the y-axis with positive direction (all fingers sholuld rotate)" //"n/N: to rotate the fingers on the y-axis with negative direction (all fingers sholuld rotate)" //"t/T: toggle between solid and wire cubes" //"p/P: toggle between perspective and ortho projections" var s = 90.0; //rotation speed in degrees per second var d = s*timePassed; //degrees to rotate on this frame //Shoulder Updates if (shift && isPressed("S")) { if (shoulder -90) shoulder = (shoulder - d); else shoulder = -90; } //Elbow Updates if (shift && isPressed("E")) { if (elbow -144) elbow = (elbow - d); else elbow = -144; } } below robot_arm.html code;

Oops ... your browser doesn't support the HTML5 canvas element

First load the application and see how it works. Try pressing lower and uppercase 'e' to move the elbow. Try pressing lower and uppercase 's' to move the shoulder Now, add three fingers and a thumb to the robot. Use matStack.push() and matStack.pop() to separate the transformations for each digit. Do not attempt to "untransform" with an inverse rotate, translate or scale. Finally, add some code that will make the finger and thumb move apart when 'f' is pressed and together when 'F' is pressed. The center of rotation should be at the wrist. You can interact with this sample solution to see how your arm might work. Click on it and use the keys described above. I have also added some additional controls: x/X: to rotate the arm on the X axis so you can see it from different angles y/Y: to rotate the arm on the Y axis so you can see it from different angles a/A: to rotate the fingers on the x-axis with positive direction b/B: to rotate the fingers on the x-axis with negative direction m/M: to rotate the fingers on the y-axis with positive direction n/N: to rotate the fingers on the y-axis with negative direction t/T: toggle between solid and wire cubes p/P: toggle between perspective and ortho projections

load the apolication and see how it works. Try pressing lower and uppercas