Thursday March 9: Using matrices to create a human figure
We showed how to create first a cube and then a human figure using hierarchical matrix
transformations.
At the end of class we showed Pixar's classic computer animated short
Luxo Jr.
Your homework, due before the start of class on Thursday March 23,
is to complete the implementation of the matrix class M.js.
Start with canvas_example1.zip,
which contains the tumbling cube and the dancing human figure
that we implemented in class.
In the version posted on-line, I have left some of the methods in M.js
unimplemented.
Your assignent is to implement all the methods in M.js.
When you do this, the tumbling cube and the dancing figure will work the way they worked in class.
Look in M.js to see more detailed instructions about what is needed.
Note that in the function M.scale(m, v) in the homework,
the second argument can either be a number or an [x,y,z] array.
You should check to see which it is. One way to do that is:
var x,y,z;
if (v instanceof Array) {
x = v[0];
y = v[1];
z = v[2];
}
else
x = y = z = v;
As usual, if you have any questions, feel free to contact the graders for advice.
They are there to help you.
Once you have gotten that done, then for extra credit try creating your own
original animated scene in a canvas, animated by using M.js.
Tuesday March 21: Introduction to parametric surfaces
First we discussed how to implement the save() and restore() methods
for matrices. The code I wrote in class is here:
M_stack = [];
M.save = function(m) {
var i, _m = [];
for (i = 0 ; i < m.length ; i++)
_m.push(m[i]); // MAKE A COPY OF MATRIX
M._stack.push(_m); // PUSH IT ONTO THE STACK
}
M.restore = function(m) {
var i, _m = M._stack.pop(); // POP THE COPY OFF THE STACK
for (i = 0 ; i < m.length ; i++) // COPY ITS VALUES INTO MATRIX
m[i] = _m[i];
}
Then we started to go through the mathematics of creating parametric surfaces,
such as cylindrical tubes, spheres and tori.
You can see the parametric functions we built in allnotes.html.
At the end of class we saw:
The very first shaded computer graphic film ever made
Thursday March 23: More about parametric surfaces
We wrote some more code in class, to create some examples of parametric surfaces,
and we also used the same framework to create a regular octahedron,
one of the five Platonic solids.
The code that we wrote in class is in
canvas_example3.zip,
minus the M.js source file. You need
to provide the version of M.js that you wrote
to make things work.
We also had a conversation about dual geometry,
in which planar equations and points are swapped,
and about how one shape can be the dual of another.
For example, a cube and a regular octahedron are duals of each other,
as are a regular doecahedron and a regular icosahedron.
The dual of a regular tetrahedron is a regular tetrahedron.
We also briefly discussed four dimensional polychorons
(the 4D equivalent of polyhedra),
and looked at the 24-cell, a regular polychoron
which is the close-packing shape in four dimensions.
Your homework, due before class this coming Thursday, March 30,
is rather simple.
I want you to add sphere and torus functions to S.js, and incorporate
them into a working example.
The only thing I ask is that you be creative:
Create a creature, an animated character, a snowman, or something
else original.
Whatever you do, don't copy the work of anybody else in the class.
For extra credit, there are several other things you can do:
-
Implement a function that creates a cube mesh
(hint: your function can create six square-shaped parametric meshes,
one for each face of the cube).
-
Add extra arguments to your sphere, torus or tube functions
so that you can create partial shapes, for example, a hemisphere.
-
Add end caps to your tube to create a function that makes a cylinder
shape.
-
Implement some other sort of shape as well.
Note that if you are already adding end-caps to your tube to
make a cylinder,
then you've already done the work to create a regular polygon function.
-
I've already implemented a regular octahedron in the example code.
See if you can create the other four regular polyhedra:
tetrahedron, cube, dodecahedron and icosahedron.
