CSCE 4230 Computer Graphics

Dr. Doran's in-person hour long commute.

Program 1

Warm Up

Problem Statement

Modify the ClickedPoints example as follow:

1. Change the canvas size from 400x400 to 600x400.

2. Change the clearing color (background color) from black to grey level 0.3. That is, use 0.3 for for each of the RGB values.

3. Change the fragment color (point color) from red to yellow (with maximum intensity).

4. Change the point size from 10 to 25.

Submit both your HTML and JS on Canvas. Please do NOT put them in Zip archives or similar.

This shouldn't take very long at all to do, and is really mainly a warm-up exercise.

Program 2

Play the Chaos Game

Problem Statement:

Write a WebGL program that implements Michael Barnsley's 'chaos game'. See this link (Links to an external site.) for more information.

Submit your HTML and js files on Canvas

Program 3

Make a rotating Pendulum

Problem Statement:

Write a WebGL program that displays a rotating pendulum.

The pendulum bob is free to rotate through 360 degrees about an anchor point at the center of the canvas. The pendulum has the following three components:

1. The anchor point is a green square centered at the origin (0,0), with point size = 5 pixels.

2. The bob is a blue hexagon of radius r=0.1. Render this with a triangle fan centered at the origin (along with a ModelView matrix that translates and rotates).

3. The bob is attached to the anchor point by a rigid red wire of length l=0.8.

Use global variables for the point size of the anchor, the radius of the bob, the length of the wire, and the angular velocity of rotation in degrees per second. Set the initial angular velocity to 45 (degrees per second) and allow an interactive user to increase or decrease the value in multiples of 10 degrees per second with button presses.

Submit your HTML and JS files on Canvas

Program 4

Orthographic rotating cube

Problem Statement

Write a WebGL program that displays a cube with colored faces using an orthographic projection. Allow an interactive user to rotate the cube 15 degrees about the x and y axis.

The viewing volume defined by setOrtho should be chosen so that the cube occupies most of the volume but no clipping occurs.

Program 5

Graph a bivariate function

Problem Statement

Write a WebGL program that displays the graph of a bivariate function: z=f\left(x,y\right) for (x,y) in D=[0,1]*[0,1].

f(x,y) = \frac{1}{2} e^{[-0.04 \sqrt{(80x-40)^2 + (90y-45)^2)}]}cos(0.15\sqrt{(80x-40)^2+(90y-45)^2})

The following procedure creates the polygonal (triangle) mesh surface:

• partition D into a k+1 by k+1 uniform rectangular grid, and partition each of the k*k squares into a pair of triangles. A reasonable value of k is 50.

• Call f to obtain a z value at each of the grid points

• Use filled triangles with Gouraud shading and lighting. Note that each vertex normal must be computed by averaging the normals of the triangles which share the vertex.

• Use a depth buffer for hidden surface removal.

A good template for this program is LightedCube_animation in Matsuda Chapter 8 (one of our texts). It is sufficient to replace initVertexBuffers to create typed arrays of vertex positions, colors, normals, and indices for the triangle mesh surface rather than a cube.

Note, however, that the indices cannot be stored as 8-bit unsigned integers, and the third artument in function gl.drawElements must be changed from gl.UNSIGNED_BYTE to short or int.