this is how it looks when i run the code but i want to add three fingers and a thumb to the

robot so it will look like this

$\backslash (2\backslash )$

Show Transcribed Text

and here is the code that you need to modify so it will be just like i want i mean just like the final photo.

"use strict";

var gl;

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\},$

$\}$;

var mv $=$ new mat$4()$;

var p $=$ new mat$4()$;

var mvLoc, projLoc;

var shoulder $=0,$

elbow $=0$;

var wireframeMode $=$ false; $//$ Variable to toggle wireframe mode

var perspectiveMode $=$ true; $//$ Variable to toggle perspective mode

var red $=$ vec$4(1\mathrm{.}0,0\mathrm{.}0,0\mathrm{.}0,1\mathrm{.}0)$;

var green $=$ vec$4(0\mathrm{.}0,1\mathrm{.}0,0\mathrm{.}0,1\mathrm{.}0)$;

var blue $=$ vec$4(0\mathrm{.}0,0\mathrm{.}0,1\mathrm{.}0,1\mathrm{.}0)$;

var lightred $=$ vec$4(1\mathrm{.}0,0\mathrm{.}5,0\mathrm{.}5,1\mathrm{.}0)$;

var lightgreen $=$ vec$4(0\mathrm{.}5,1\mathrm{.}0,0\mathrm{.}5,1\mathrm{.}0)$;

var lightblue $=$ vec$4(0\mathrm{.}5,0\mathrm{.}5,1\mathrm{.}0,1\mathrm{.}0)$;

var white $=$ vec$4(1\mathrm{.}0,1\mathrm{.}0,1\mathrm{.}0,1\mathrm{.}0)$;

shapes.axes.points $=[$

vec$4(2\mathrm{.}0,0\mathrm{.}0,0\mathrm{.}0,1\mathrm{.}0),$

vec$4(-2\mathrm{.}0,0\mathrm{.}0,0\mathrm{.}0,1\mathrm{.}0),$

vec$4(0\mathrm{.}0,2\mathrm{.}0,0\mathrm{.}0,1\mathrm{.}0),$

vec$4(0\mathrm{.}0,-2\mathrm{.}0,0\mathrm{.}0,1\mathrm{.}0),$

vec$4(0\mathrm{.}0,0\mathrm{.}0,2\mathrm{.}0,1\mathrm{.}0),$

vec$4(0\mathrm{.}0,0\mathrm{.}0,-2\mathrm{.}0,1\mathrm{.}0),$

$]$;

shapes.axes.colors $=[$green$,$ green, red, red, blue, blue$]$;

var cubeVerts $=[$

vec$4(0\mathrm{.}5,0\mathrm{.}5,0\mathrm{.}5,1),$

vec$4(0\mathrm{.}5,0\mathrm{.}5,-0\mathrm{.}5,1),$

vec$4(0\mathrm{.}5,-0\mathrm{.}5,0\mathrm{.}5,1),$

vec$4(0\mathrm{.}5,-0\mathrm{.}5,-0\mathrm{.}5,1),$

vec$4(-0\mathrm{.}5,0\mathrm{.}5,0\mathrm{.}5,1),$

vec$4(-0\mathrm{.}5,0\mathrm{.}5,-0\mathrm{.}5,1),$

vec$4(-0\mathrm{.}5,-0\mathrm{.}5,0\mathrm{.}5,1),$

vec$4(-0\mathrm{.}5,-0\mathrm{.}5,-0\mathrm{.}5,1),$

$]$;

var wireCubeLookups $=[0,4,6,2,0,1,0,2,3,1,5,1,3,7,5,4,5,7,6,4,4,0,1,5,4,6,2,0]$;

var solidCubeLookups $=[$

$0,4,6,0,6,2,1,0,2,1,2,3,5,1,3,5,3,7,4,5,7,4,7,6,4,0,1,4,1,5,6,7,3,6,3,2,$

$]$;

for $($var i $=0$; i $<$ wireCubeLookups.length; i$++)\{$

shapes.wireCube.points.push$($cubeVerts$[$wireCubeLookups$[$i$]])$;

shapes.wireCube.colors.push$($white$)$;

$\}$

var colorNum $=0$;

var colorList $=[$lightblue$,$ lightgreen, lightred, blue, red, green$]$;

for $($var i $=0$; i $<$ solidCubeLookups.length; i$++)\{$

shapes.solidCube.points.push$($cubeVerts$[$solidCubeLookups$[$i$]])$;

shapes.solidCube.colors.push$($colorList$[$colorNum$])$;

if $($i $\%6==5)$ colorNum$++$;

$\}$

var points $=[]$;

var colors $=[]$;

function loadShape$($myShape$,$ type$)\{$

myShape.start $=$ points.length;

points $=$ points.concat$($myShape$.$points$)$;

colors $=$ colors.concat$($myShape$.$colors$)$;

myShape.size $=$ points.length $-$ myShape.start;

myShape.type $=$ type;

$\}$

window.onload $=$ function init$()\{$

var canvas $=$ document.getElementById$("$gl$-$canvas"$)$;

gl $=$ canvas.getContext$("$webgl$2")$;

if $(!$gl$)\{$

canvas.parentNode.innerHTML$("$Cannot get WebGL$2$ Rendering Context"$)$;

$\}$

gl$.$viewport$(0,0,$ gl$.$drawingBufferWidth, gl$.$drawingBufferHeight$)$;

gl$.$enable$($gl$.$DEPTH$\_$TEST$)$;

gl$.$clearColor$(0\mathrm{.}0,0\mathrm{.}0,0\mathrm{.}0,1\mathrm{.}0)$;

gl$.$enable$($gl$.$CULL$\_$FACE$)$;

var program $=$ initShaders$($gl$,$ "shader.vert", "shader.frag"$)$;

gl$.$useProgram$($program$)$;

loadShape$($shapes$.$wireCube, gl$.$LINE$\_$STRIP$)$;

loadShape$($shapes$.$solidCube, gl$.$TRIANGLES$)$;

loadShape$($shapes$.$axes, gl$.$LINES$)$;

var vertexBuffer $=$ gl$.$createBuffer$()$;

gl$.$bindBuffer$($gl$.$ARRAY$\_$BUFFER, vertexBuffer$)$;

gl$.$bufferData$($gl$.$ARRAY$\_$BUFFER, flatten$($points$),$ gl$.$STATIC$\_$DRAW$)$;

program.vPosition $=$ gl$.$getAttribLocation$($program$,$ "vPosition"$)$;

gl$.$vertexAttribPointer$($program$.$vPosition, $4,$ gl$.$FLOAT, gl$.$FALSE, $0,0)$;

gl$.$enableVertexAttribArray$($program$.$vPosition$)$;

var colorBuffer $=$ gl$.$createBuffer$()$;

gl$.$bindBuffer$($gl$.$ARRAY$\_$BUFFER, colorBuffer$)$;

gl$.$bufferData$($gl$.$ARRAY$\_$BUFFER, flatten$($colors$),$ gl$.$STATIC$\_$DRAW$)$;

program.vColor $=$ gl$.$getAttribLocation$($program$,$ "vColor"$)$;

gl$.$vertexAttribPointer$($program$.$vColor, $4,$ gl$.$FLOAT, gl$.$FALSE, $0,0)$;

gl$.$enableVertexAttribArray$($program$.$vColor$)$;

projLoc $=$ gl$.$getUniformLocation$($program$,"$p$")$;

mvLoc $=$ gl$.$getUniformLocation$($program$,"$mv$")$;

updateProjection$()$; $//$ Set initial projection matrix

var eye $=$ vec$3(0\mathrm{.}0,1\mathrm{.}0,10\mathrm{.}0)$;

var at $=$ vec$3(0\mathrm{.}0,0\mathrm{.}0,0\mathrm{.}0)$;

var up $=$ vec$3(0\mathrm{.}0,1\mathrm{.}0,0\mathrm{.}0)$;

mv $=$ lookAt$($eye$,$ at$,$ up$)$;

requestAnimationFrame$($animate$)$;

$\}$;

var prevTime $=0$;

function animate$()\{$

requestAnimationFrame$($animate$)$;

var curTime $=$ new Date$().$getTime$()$;

if $($prevTime $!=0)\{$

var timePassed $=($curTime $-$ prevTime$)/1000\mathrm{.}0$;

handleKeys$($timePassed$)$;

$\}$

prevTime $=$ curTime;

render$()$;

$\}$

function render$()\{$