I will attach the assaignment below. I also need to complete this code for this assaignment: function render$()\{$

gl$.$clear$($gl$.$DEPTH$\_$BUFFER$\_$BIT $|$ gl$.$COLOR$\_$BUFFER$\_$BIT$)$;

var armShape $=$ shapes.wireCube;

var matStack $=[]$;

$//$Save view transform

matStack.push$($mv$)$;

$//$Position Shoulder Joint

mv $=$ mult$($mv$,$translate$(-2\mathrm{.}0,0\mathrm{.}0,0\mathrm{.}0))$;

$//$Shoulder Joint

mv $=$ mult$($mv$,$rotate$($shoulder$,$ vec$3(0,0,1)))$;

$//$Position Upper Arm Cube

mv $=$ mult$($mv$,$translate$(1\mathrm{.}0,0\mathrm{.}0,0\mathrm{.}0))$;

$//$Scale and Draw Upper Arm

matStack.push$($mv$)$;

mv $=$ mult$($mv$,$scale$(2\mathrm{.}0,0\mathrm{.}4,1\mathrm{.}0))$;

gl$.$uniformMatrix$4$fv$($mvLoc$,$ gl$.$FALSE, flatten$($transpose$($mv$)))$;

gl$.$drawArrays$($armShape$.$type, armShape.start, armShape.size$)$;

$//$Undo Scale

mv $=$ matStack.pop$()$;

$//$Position Elbow Joint

mv $=$ mult$($mv$,$ translate$(1\mathrm{.}0,0\mathrm{.}0,0\mathrm{.}0))$;

$//$Elbow Joint

mv $=$ mult$($mv$,$ rotate$($elbow$,$vec$3(0,0,1)))$;

$//$Position Forearm Cube

mv $=$ mult$($mv$,$ translate$(1,0\mathrm{.}0,0\mathrm{.}0))$;

$//$Scale and Draw Forearm

matStack.push$($mv$)$;

mv $=$ mult$($mv$,$ scale$(2\mathrm{.}0,0\mathrm{.}4,1\mathrm{.}0))$;

gl$.$uniformMatrix$4$fv$($mvLoc$,$ gl$.$FALSE, flatten$($transpose$($mv$)))$;

gl$.$drawArrays$($armShape$.$type, armShape.start, armShape.size$)$;

$//$Undo Scale

mv $=$ matStack.pop$()$;

$//$Restore mv to initial state

mv $=$ matStack.pop$()$;

$\}$

$//----------------------------------------------------------------------------$

$//$ Keyboard Event Functions

$//----------------------------------------------------------------------------$

$//$This array will hold the pressed or unpressed state of every key

var currentlyPressedKeys $=[]$;

$//$Store current state of shift key

var shift;

document.onkeydown $=$ function handleKeyDown$($event$)\{$

currentlyPressedKeys$[$event$.$keyCode$]=$ true;

shift $=$ event.shiftKey;

$//$Get unshifted key character

var c $=$ event.keyCode;

var key $=$ String.fromCharCode$($c$)$;

$//$Place key down detection code here

$\}$

document.onkeyup $=$ function handleKeyUp$($event$)\{$

currentlyPressedKeys$[$event$.$keyCode$]=$ false;

shift $=$ event.shiftKey;

$//$Get unshifted key character

var c $=$ event.keyCode;

var key $=$ String.fromCharCode$($c$)$;

$//$Place key up detection code here

$\}$

$//$isPressed$($c$)$

$//$Utility function to lookup whether a key is pressed

$//$Only works with unshifted key symbol

$//$ ie: use $"$E$"$ not $"$e$"$

$//$ use $"5"$ not $"\%"$

function isPressed$($c$)$

$\{$

var code $=$ c$.$charCodeAt$(0)$;

return currentlyPressedKeys$[$code$]$;

$\}$

$//$handleKeys$($timePassed$)$

$//$Continuously called from animate to cause model updates based on

$//$any keys currently being held down

function handleKeys$($timePassed$)$

$\{$

$//$Place continuous key actions here $-$ anything that should continue while a key is

$//$held

$//$Calculate how much to move based on time since last update

var s $=90\mathrm{.}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 $<mtext\; id="EditorElement\_341016"></mtext><mn\; id="EditorElement\_341017">9</mn><mn\; id="EditorElement\_341018">0</mn><mi\; id="EditorElement\_341019">)</mi>$ shoulder $=($shoulder $+$ d$)$;

else shoulder $=90$;

$\}$

if $(!$shift && isPressed$("$S$"))$

$\{$

if $($shoulder $>-90)$ shoulder $=($shoulder $-$ d$)$;

else shoulder $=-90$;

$\}$

$//$Elbow Updates

if $($shift && isPressed$("$E$"))$

$\{$

if $($elbow $<mtext\; id="EditorElement\_341282"></mtext><mn\; id="EditorElement\_341283">0</mn><mi\; id="EditorElement\_341284">)</mi>$ elbow $=($elbow $+$ d$)$;

else elbow $=0$;

$\}$

if $(!$shift && isPressed$("$E$"))$

$\{$

if $($elbow $>-144)$ elbow $=($elbow $-$ d$)$;

else elbow $=-144$;

$\}$

$\}$ CMPE $360$

Fall $2023$

Project $8$

WebGL

This assignment is due by $23$:$59$ on Sunday, $17$ December $2023$

Start with robot$\_$arm.html and robot$\_$arm.js from Project$08.$zip. When

you run robot$\_$arm.html you should see like below default robot arm.

First load the application and see how it works. Try pressing lower and uppercase $\text{'}$e$\text{'}$ to

move the elbow. Try pressing lower and uppercase $\text{'}$s$\text{'}$ 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 $\text{'}f\text{'}$ is

pressed and together when $\text{'}F\text{'}$ 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:

$\frac{x}{x}$ : to rotate the arm on the $x$ axis so you can see it from different angles

$\frac{y}{Y}$ : to rotate the arm on the $Y$ axis so you can see it from different angles