Winter 2021: CSI4130 Assignment 1
Jochen Lang
1 Curves, Animation and Viewing [8 in total]
In this assignment, you will build an interactive animation of a scene shown from two viewpoints in two viewports. The basis of this assignment are Laboratory 3 – Viewing, Laboratory 4 – Curves and Laboratory 5 – Object Loading and Viewing. As in this Laboratory 3, you will need to set up an animation and load the teapot. As in Laboratory 4, you will have to work with a parametric curve. Laboratory 5 reviews scenegraphs and viewing and may be helpful but it is not required for this assignment.
This is an individual assignment. You are not allowed to use any other library except Three.js and dat.gui.js.
1.1 Two Viewports [2]
You will display a teapot for this assignment (but see the bonus). In this assignment you will need to show two views: a front view and a top view of the animation. You will find an example for using two camera views for two different viewports in the THREE documentation in the camera example https://github.com/mrdoob/three.js/blob/master/examples/webgl camera.html. Note: Please do not add the animation changing the viewing from the example.
1.2 Spirograph Trajectory [3]
Animate the teapot flying on a trajectory in the form of a spirograph. The spirograph curve should be displayed as a thin curve (see Laboratory 4). The math of the spirograph can be roughly described as a circle rotating inside a larger circle. You can find the mathematical basis of the spirograph explained on https://en.wikipedia.org/wiki/Spirograph. In particular, the trajectory equations in 2D are
1−k
x(t) = R (1−k)cos(t)+lkcos k t ,and (1)
1−k
y(t) = R (1−k)sin(t)+lksin k t , (2)
where R is the outer radius, k is the ratio of the radius of the inner circle over the outer circle and the point of the pen on the inner circle over the radius of the radius of the inner circle is l. For this part of the assignment, you can use a fixed value fo z but see Question 1.4.
1
1.3 User Control [1]
Let the user control the ratio of the circles k and the point of the pen l on the inner circle with dat.gui sliders.
1.4 3D Trajectory [2]
Find a way to extend the spirograph to 3D, simulating a sphere rotating inside a larger sphere. Hint: Make use of the scenegraph. You can add two rotations on the 2D Spirograph: one
rotating on the y-axis and one rotating on an axis normal to y.
1.5 Bonus: Mesh Loading [2]
Replace the teapot with a spaceship, bird, airplane or similar by loading a suitable mesh from file. The Three documentation has many examples of mesh loaders (and meshes).
2 Submission
Your assignment submission must consist of your Javascript and html files. As you are working with the current version of Three.js and dat.gui.js, you will not submit these.
Filename spirograph.js spirograph.html
You must submit the files listed above and no library files via Virtual Campus.
2