Homework 4: A little Spin in 3d

Short Description:

Write a program that demonstrates your ability to display and perform transformation of models in WebGL.

Goals

When you finish this homework, you should

Have a working WebGL/Javascript environment.
Be able to transform objects in this environment.

Formal Description

For this assignment, please use one of twos types of models:

Note, the two types of models are different and will require different code to draw them. Please use only these models. No credit if you use other models.

Please create a program which displays one or more of these models. Ideally I would like four different scenes, displayed in the four corners of the canvas using viewports.

One should demonstrate simple rotation. For example a teapot slowly rotating about the y axis.
One should demonstrate translation. For example a small dino "walking" around in corner of the canvas.
One should demonstrate scaling. For example a teapot that shrinks and grows.
One should be a complex scene with multiple models. These should demonstrate a combination of transformations. For example a larger lizard rotating in the center of the screen while several xwing fighters and copters circle bout in different orbits.

Finally, you should provide at least one shader that will color the models differently.

You could color based on position:
- If the vertex has an initial positive x value, add red to the color.
- If the vertex has an initial positive y value, add green to the color.
- If the vertex has an initial positive z value, add blue to the color.
- So the point [10, 4, -2] would have the color (1,1,0)
You could color based on random values:
- Ie implement a random number generator in GLSL and use the sum/product/difference/concatenation of the coordinates as a seed. Use this to generate a random color for each vertex.
Do something completely different.

Points:

Each of the simple item is worth 15% of the points. (45% total)
The last item, a complex scene is worth 30% of the points.
Modifying colors is worth 20% of the points.
Following instructions, including coverpage 5%

Please use the following files:

https://mirkwood.cs.edinboro.edu/~bennett/GraphicsCode/NewShapes/ for shape files
https://mirkwood.cs.edinboro.edu/~bennett/GraphicsCode/Common/ for other standard .js files.

Documentation

Please provide a cover page that describes what you have done in each scene as well as a list of collaborators, including generative AI packages. Also, if you feel you deserve credit for extras, please document this.

Additional Requirements/Comments

I expect you to build your code based on my examples.

Extras

I find that I want to continue to play with simulations/visualizations of this type. Please do so, but only if you have sufficient time, do not enhance this, or any other project at the expense of your other classes.

Submission

When you have finished your assignment, please submit a tar or zip file containing all files needed for this project. Please do not post your project on line until after grades have been assigned.

Submit your file to the D2L homework folder Homework 4 by the due date. If you work collaboratively, I expect that each programmer will submit a copy of the final product.