Fall 2020 Fayetteville State University Albert Chan CSC451 Assignment 3 Computer Graphics Page 1 of 2 In this assignment, you will write an interactive WebGL program. Download the file csc451a3.html....

I need a Javascript file and html file for this assignment, anyone available?


Fall 2020 Fayetteville State University Albert Chan CSC451 Assignment 3 Computer Graphics Page 1 of 2 In this assignment, you will write an interactive WebGL program. Download the file csc451a3.html. This file is very similar to the gasket2.html file we have in Assignment 2. However, it adds a slider on the HTML page, so we can use it to control the graphics. The purpose of this program is to draw an n-sided polygon, along with ALL its diagonals. Here the value of n is controlled by the slider, which allows the user to select a value between 3 to 25 (inclusively), and with a default value of 5. The following figure shows what the web page should look like when you first load it: And the following figure shows the result of a 20-sided polygon: Fall 2020 Fayetteville State University Albert Chan CSC451 Assignment 3 Computer Graphics Page 2 of 2 Here is some helpful information: • The canvas should have a background of light gray (which contains 80% of white). • The polygon should be drawn in red (you don’t have to worry about this because it is set in the fragment shader in the HTML file). • All vertices of the polygon should sit on a unit circle. The following JavaScript function can return the coordinates of the ith vertex of an n-sided polygon. function computeVertex(i, n) { // return the i-th vertex on for an n-sided polygon // sitting on a unit circle var theta = 2.0 * Math.PI * i / n; // angle in radians return vec2(Math.cos(theta), Math.sin(theta)); } • You will need to add a callback function for the slider to change the number of sides of the polygon. • You need to re-animate the canvas so it will redraw the updated polygon. function render() { gl.clear(gl.COLOR_BUFFER_BIT); gl.drawArrays(gl.LINES, 0, points.length); requestAnimFrame(init); } • Your programs must be fully documented with comments. • The “gasket5” program in the Chapter 3 folder may be a good reference on how things should be done. • A skeleton program csc451a3.js is provided. You can start with this file, but it is not mandatory. You can create your program from scratch if you like to. Submission: • Submit only the JavaScript program (csc451a3.js) to Canvas. • Due date: Sunday October 09.