CSE 3431, Fall 2018 Assignment 1
Marks: 42.
Collaboration: None. 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 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. There is an executable posted at the webpage that you can use to see what is expected. In the executable ‘A’ toggles the animation.
Requirements:
- (a) The entire scene should fit in a window 512×512 (2 Marks).
- (b) You have to use a hierarchical approach (5 Marks).
- (c) You have to use real time to synchronize your animations. (2 Marks).
- (d) Ground box, 2 (Marks).
- (e) Two rocks (spheres), (4 Marks).
- (f) Seaweed modeling: each strand has 10 ellipses. (4 Marks)
- (g) Seaweed animation (4 Marks).
- (h) Seaweed positioning (3 strands) (3 Marks).
- (i) Fish modeling: 2 eyes with pupils, 1 head, 1 body, 2 tail fins, (6 Marks).
- (j) 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).
- (k) 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
visually similar (4 Marks).
- (l) Programming style (comments, functions) (2 Marks).
(m)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.
(n) 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.
– 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(t) = Acos(w*TIME+h)