EECS 3431, Fall 2022 Assignment 1

Marks: 56.

Collaboration: You should work in groups of two. If you cannot find a partner you may work on your own.  You cannot collaborate with people other than your group     partner. If you discuss this assignment with others you should submit their names along with the assignment material.

The assignment must be done from scratch. Apart from the template provided, you  should not use code from any other source, including previous offering of the class.     Reverse engineering the sample executable is also considered plagiarism and is strictly prohibited.

Write a program in JavaScript/WebGL that draws the aquatic scene shown below. Use   the template code found at the course webpage.  For drawing objects, use only the          procedures provided, drawCube(), drawCone() and drawSphere(); for transforming the   objects use the functions provide by the template code.  You may write additional           functions and object classes.  There is a movie posted at the webpage that you can use to see what is expected.

Requirements:

(a) You have to use real time to synchronize your animations. (2 Marks). (b) Ground box, 2 (Marks).

(c) Two rocks (spheres), (4 Marks).

(d) Seaweed modeling: each strand has 10 ellipses. (4 Marks)

(e) Seaweed animation (4 Marks).

(f)  Seaweed positioning (3 strands) (3 Marks).

(g) Fish modeling:  2 eyes with pupils, 1 head, 1 body, 2 tail fins, (6 Marks).

(h) Fish animation: The fish must swim in a circle around the seaweed. It should always be aligned with the tangent of the circle. (4 Marks).

(i)  A burst of 4-5 bubbles should appear every few seconds. (4 Marks).   (j)  Each bubble should appear near the mouth of the character (2 Marks). (k) The shape of each bubble should oscillate with time. (2 Marks).

(l)   Each bubble should move straight up with time. (2 Marks).

(m) Each bubble should be removed/deleted after approximately 12 seconds. (1 Mark).

(n) Model a human character with no arms. (4 Marks).

(o) The character should move in the x and y world directions. (2 Marks).

(p) The legs of the character should kick (hips, knees) as shown in the video. (4 Marks). The feet do not move.

(q) You do not have to match the exact motion or dimensions of the objects shown in the sample executable.  However, your scene and the sample one should be           qualitatively and visually similar (4 Marks).

(r)   Programming style  (comments, functions) (2 Marks).

(s)   The scene should be 512x512. [-2 Marks if it is not.]

(t)  You have to submit a SINGLE file called <firstname-lastname>.zip (-2           Marks if you do not) that includes all the necessary files, unless the TA posts different submission instructions.

(u) You nave to include a readme.txt file that describes in full detail which of the required elements you have implemented successfully and which ones you     have not. [-4 if you do not].

If the code does not run, or no objects appear in the window, or only the template code is running properly, no partial marks will be given.

Instructions

- Make sure you rotate the body parts around the correct point, i.e. where they touch the parent body parts, so bodies do not appear to break apart.

- The three seaweed strands are identical and move exactly the same way.

- The fish is rotating around a vertical axis and also moves up and down.

- The bubbles move the same starting at the moment they are created.

- Start your code in main.js:render() and feel free to write additional functions

Hints:

•   Use the TIME variable to synchronize your animation elements.

•   Use setColor (r,g,b) to set the desired colors.

•   For the motions, you may want to use functions of the form  x(TIME) = A*Math.cos(w*TIME+h)

•   You may want to use perspective projection while debugging.  To do that Replace:

projectionMatrix = ortho(left, right, bottom, ytop, near, far);

with

projectionMatrix = perspective(45, 1, near, far);

and in render set the eye to:

eye = vec3(0,0,20)