[SOLVED] Java javascript graph Web3D Assignment 2Due Date: 9pm Friday Week 12 May 29th 2019Tom the Turtle using Threejs and JavascriptAssessment: 40%

Web3D Assignment 2Due Date: 9pm Friday Week 12 May 29th 2019Tom the Turtle using Threejs and JavascriptAssessment: 40%

Side view: Solid, Lighting

Top view: Solid, Lighting

Side view: Wireframe, Lighting

Side view: Solid, No Lighting
Unsupported video format
Animated Turtle (right click on image for controls)
Unsupported video format
Turtles with Collisions (right click on image for controls)
Changes, Corrections and Clarifications
None so far

Overview
In this assignment, you will write a JavaScript program which uses the Threejs library to render the turtle from assignment 1 instead of X3D. ThreeJS is a higher level scene graph library built on top of the lower level WebGL library which is what actually allows 3D graphics to be displayed in the browser.
There are two main parts: (1) a single turtle whose joints can be interactively controlled via the keyboard and (2) a group of turtles swimming in the fish tank which are animated using an animation engine built using Javascript, along with collision detection and turtles eating food.
Animation will need to be performed using an linear interpolation engine written in Javascript, instead of using an inbuilt or library provided animation capability.
A higher level feature is instead of having just one turtle, there is a group of turtles in the fish tank/aquarium which are swimming around. Collision detection between turtles is to be implemented. The turtles can be feeding, eating simple pellets, or live tadpoles which themselves can swim, and possibly try to get away from the turtles.
The diagrams from the previous assignment apply to this assignment as well, including the square bipyramid (diamond) and the hexagonal bipyramid.
The tutorials will again teach the fundamentals required in for the assignment and it is recommended that you follow the tutorial exercises.
The assigment may be done as individuals, or in pairs.
Part 1
Details
The turtle should be made of the same shapes and have the same hierarchy as in assignment 1.
As in assignment 1 you will create shapes for the body parts using custom geometry objects, in part to show the pivot points at the joints in the animation.
The hexagonal bipyramid coordinates should be worked out using code and trignometry, rather than just typed in.
Joints and body segments are to be rendered with an axes object, with the ability to disable rendering them.
The figure should be properly constructed according to a hierarchy/scene graph as per assignment 1 with the torso at the root, legs, tail and head attached to the torso via joints. The limbs will have upper and lower segments and a foot, with joints in between.
There is to be a world scene object that the turtle is a child of, along with the fish tank/aquarium. The scene object will have mouse controls to rotate the whole scene using the ThreeJS Trackball object.
The program should support basic colours and materials as well as lighting with Lambert material. It should be possible to toggle between the basic colours and lighting colours via a key toggle. The colour used in the images is 0xff9966.
Your assignment should take advantage of functions to simplify the creation of the turtle and its components.
Code should be strict Javascript (use use strict;), which helps reduce bugs and other problems. Code should be simply annotated, i.e. commented, so that it is easy to identify the different areas of your program. And the program should be split into several logical files based on the content of the file, e.g. the interpolation code could be in a separate file.
All joints are to be able to interactively rotated via the keyboard. This will help show the joints and hierarchy have been constructed correctly.
Key bindings for joint manipulation are +/- keys to increase/decrease angles, up and down array keys to choose front/rear, and left and right arrow keys to choose left/right side. Then specific joint key bindings, the axis to rotate the joint about and the rotation range or limits are:
Joint
Key
Axis
Range
Hip
h
z (or y)
[-90,90]
Knee
k
z (or y)
[-90,0]
Ankle
a
y
[-60,60]
Neck
n
z
[-90,90]
Tail
t
z
[-90,90]
There are to be three rendering controls:
Key
Control
m
wireframe/filled mode
l
basic/lighting
x
enable/disable axes

These requirements hold for all assignments:
The code must be valid JavaScript (errors/warnings will result in less marks).
Your assignment is assessed using recent versions of chrome or firefox, make sure your assignment will run correctly on them, and in the Sutherland lab.
Functions
The recommended functions for creating your turtle are listed below, although the names and parameters can be, and might need to be, varied.
// returns square bipyramid (octahedron) object
function createSquareBipyramid(sizeX, sizeY, sizeZ, material){}

// returns hexagonal bipyramid (dodecahedron) object
function createHexagonalBipyramid(sizeX, sizeY, sizeZ, material){}

// returns joint axes object
function createJoint(name){}

// returns a whole leg
function createLeg(material){}

// returns the torso object
function createTorso(material){}

// returns the head object
function createHead(material){}

// returns the tail object
function createTail(material){}

// Uses the other functions to create the turtle
function createTurtle(material){}

Part 2
Details
The turtles should be created using the createTurtle() function (or possibly the clone() method on the root node of the turtle).
The turtles swimming around should not start until the s button is pressed. Direction and speed are random.
The turtles feeding should not start until the f button is pressed.
Different turtles can have different textures to distinguish them.
The turtle swim stroke animation is to be implemented using key frame animation and the interpolator taught in class, using the functions: function interpolate(keys, values, key)
function lerp(k1, v1, k2, v2, k)
function findInterval(keys, key)

Code should be simply annotated so that its easy to identify the different areas of your program. The assignment should be split into several logical files based on the content of the file.
Submissions
Submission is again by canvas.
Submit either two separate files, one for each part, or a single file if you have combined both parts into one program. If you put both parts in the one program then add a part 1/2 switch suggest use p.
The assignment deadline is as above. Late submissions receive a 10% per day penalty (calculated hourly on a pro rata basis, starting 9:00am next working day, i.e. Mon). Any assignment not submitted by 9:00pm the next Friday will receive 0 marks.
Rubric/Marking guide
This is a guide and may change. As usual, quality of implementation, code and how well a feature works is also taken into account:
PA: single turtle in water with interactive keyboard joint controls
CR: rendering controls
DI: key frame animation of the turtles swimming action/stroke
HD: multiple turtles in aquarium moving in random directions with random speeds, collision detection with wall , collision detection amongst turtles, feeding,