$25
The goal of the application contained in index.html, is to create 4 texture animations representing:
3. A rotating fan
In file UVanim.js there are four procedures Anim1(t) … Anim4(t)which receives as parameters a floating point value in the 0…1 range that represents the current time. Each procedure should compute and return the time-dependent transform matrix for the UV coordinates. Please refer to the recording of the corresponding lesson, to have an animated view of the intended result. All the four cases are based on the same texture, shown below:
In the application, the mouse turns the view, and the slider at the bottom of the page can be used to change the animation being displayed. To help you in the creation of objects, it is possible to display a color-coded version of the UV coordinates pressing space. File TextureRef.pdf provides a representation of the texture inside a grid, to help locating the correct UV parameters. Before transformation, the faces of the cube have the texture assigned in the whole range: u=0 on the left, u=1 on the right, v=0 on the bottom and v=1 on the top of the cube.
For making the transform matrices, you can use a helper library, such as the included utils.js, which was already presented in the first assignments. The first animation, shows a simple example of creating an animation by transforming the UV coordinates with a time-dependent translation.