Purpose: Animating a 3D model by applying transformations.

Skills: HTML, JavaScript, WebGL.

Task:

1. Create 2 enclosed objects; 1 6-sided and 1 8-sided. Use a different color for each side or vertex. Create a big canvas, but not bigger than 1680x1050 pixels. Have a border around your canvas.
2. Place 4 8-sided objects on the corners of your canvas. Make sure they are fully visible. Speed of animation needs to be reasonable (not too fast not too slow).
   1. Object in the top-left will rotate around the Y-Axis.
   2. Object in the bottom-left will rotate around the X-Axis.
   3. Object in the top-right will rotate around the Z-Axis.
   4. Object in the bottom-right will rotate in the axis of your choice while scaling. Start scaling at 1 and when it reaches scaling of 1.5 stop it and scale it down to 0.5 and keep continuously scaling it from 1.5 to 0.5.
3. Place 1 6-sided object in the middle of the canvas. Translate the object from -1 to 1 in the X-axis, while rotating the object in the Y-axis.
4. When a right mouse click is captured stop/start the animations of the 8-sided objects. You should be able to stop and start by clicking as many times as you want.
5. When a left mouse click is captured stop/start the animation of the 6-sided object. You should be able to stop and start by clicking as many times as you want.