$*$Computer Graphis

app.js

var canvas;

var gl;

var sq;

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

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

gl $=$ canvas.getContext$(\text{'}$webgl$2\text{'})$;

if $(!$gl $)\{$ alert$($ "WebGL $2\mathrm{.}0$ isn't available" $)$; $\}$

gl$.$viewport$(0,0,$ canvas.width, canvas.height $)$;

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

sq $=$ new Square$2$D$()$;

render$()$;

$\}$;

function render$()\{$

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

sq$.$draw$()$;

$\}$

square.js

class Square$2$D$\{$

static vertexPositions $=[$

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

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

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

vec$2(0\mathrm{.}5,-0\mathrm{.}5)]$;

static shaderProgram $=-1$;

static positionBuffer $=-1$;

static aPositionShader $=-1$;

static initialize$()\{$

Square$2$D$.$shaderProgram $=$ initShaders$($ gl$,"./$vshader$.$glsl$","./$fshader$.$glsl$")$;

$//$ Load the data into the GPU

Square$2$D$.$positionBuffer $=$ gl$.$createBuffer$()$;

gl$.$bindBuffer$($ gl$.$ARRAY$\_$BUFFER, Square$2$D$.$positionBuffer$)$;

gl$.$bufferData$($ gl$.$ARRAY$\_$BUFFER, flatten$($Square$2$D$.$vertexPositions$),$ gl$.$STATIC$\_$DRAW $)$;

$//$ Associate our shader variables with our data buffer

Square$2$D$.$aPositionShader $=$ gl$.$getAttribLocation$($ Square$2$D$.$shaderProgram, "aPosition" $)$;

$\}$

constructor$()\{$

if$($Square$2$D$.$shaderProgram $==-1)$

Square$2$D$.$initialize$()$

$\}$

draw$()\{$

gl$.$useProgram$($Square$2$D$.$shaderProgram$)$;

gl$.$bindBuffer$($ gl$.$ARRAY$\_$BUFFER, Square$2$D$.$positionBuffer$)$;

gl$.$vertexAttribPointer$($Square$2$D$.$aPositionShader, $2,$ gl$.$FLOAT, false, $0,0)$;

gl$.$enableVertexAttribArray$($Square$2$D$.$aPositionShader$)$;

gl$.$drawArrays$($ gl$.$TRIANGLE$\_$FAN, $0,4)$;

gl$.$disableVertexAttribArray$($Square$2$D$.$aPositionShader$)$;

$\}$

$\}$

Modify the code to create an image with WebGL that contains $1$ red pentagon $($any $5-$sided polygon$)$ that fits inside the default view volume.

You should also change the viewport so the pentagon is displayed in the upper left portion of the canvas.

Do NOT change the values of the vertices in the example. You may ONLY change their order and add new vertices.

Create a pentagon.js file from square.js with the appropriate changes and modify some of the remaining files to display your pentagon, instead of the square.

Here's an example of what I am looking for.