Interactive Computer Graphics - Assignment 1

Getting Started

Topics:

• Running your first WebGL program

• Modifying your first WebGL program

• Specifying polygons with color in WebGL

• Specifying a viewport in WebGL

Download the code found here to get the WebGL software that displays a single white square that looks like this.

This starter code is based on the software that is available from Prof. Ed Angel of the University of New Mexico.
His WebGL software web site can be found here.

To locally run this starter code and view the above result in a browser you will need to

• Open a command line terminal and navigate to the directory containing index.html and app.js.
• Run the command "python3 -m http.server", which starts a local web server.
• Open Firefox and go to "http://localhost:8000/" to display your application.
  8000 is the default port. You should see the port number on your terminal output.
• When making changes to your application, make sure to clear cache or use private/incognito mode on your browser,
  as it may not update the WebGL output if it has the output saved in cache from a previous iteration.

Modify the starter 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.

This could be achieved by adding/changing as few as 4 lines of code in the various files.

Submit a zip file that contains a folder with your initials and assignment number, for example ak876_a1.
All the files required to run your program (source, common, etc.) should be inside this folder.

I should be able to unzip your file, go to your folder, and follow the above instructions to run your WebGL program.

Grading Scheme

1. Your code successfully displays a red pentagon: 5 points
2. The pentagon fits in the viewing rectangle: 1 points
3. The viewport has been modified correctly: 2 points
4. Not changing sample vertex values: 2 point

Last modified January 9, 2023.