For your first Machine Problem, you will create a 2-D animation of a dancing Illinois Victory Badge (as shown right). To complete the MP, you will need to create a digital model of the badge, write code to render it, and write code to animate it.
You will need to model the badge with a 2-D mesh of triangles. You can use more than one mesh; you could create a mesh for the blue part and then separate meshes for the orange bars. Or you could do something different...it just has to look like the badge. One approach to creating the mesh would be to get some graph paper, draw the badge and figure out a set of coordinates for the vertices and a set of edges for the triangles that works. Once you have the coordinates and triangles, just write up a set of JavaScript arrays in your code containing those numbers.
You should color the badge and the background as shown above. For this MP, you can render using the gl.drawArrays call, with the primitives specified as gl.TRIANGLES. Note that this will draw a triangle for each group of three consecutive vertices. For example, 12 vertices create 4 separate triangles. This means that the coordinates of vertices shared by multiple triangles will be repeated in the buffer. If you wish, you can use a different implementation (it just has to work), but the one suggested here is probably the simplest.
You will need to write a program to change the location of vertices over time to animate your model. Your code should use two different methods for changing the vertices:
You will need to submit the following files in a zip archive via Compass:
All of your original code should be in those 2 files. You should also include any additional files you use. In particular you can use gl-matrix and the WebGL utilities used in the examples in class:
The assignment will be graded based on the following scale:
Name your submission as ${NetID}_MP1.zip and submit it to Compass. This MP (as are the other MP's) is more than just an assignment for a grade to verify graphics programming proficiency. It is also an opportunity to impress me, your friends/family and your future employer or graduate school. These assignments are designed to provide the student with a portfolio of graphics programs and associated images and animations that can be used to demonstrate graphics expertise. Many students ask me to write letters of recommendation for jobs or grad school and I base these recommendations on their MP results. Use this MP as a chance to show off your graphics skills and make a strong impression.