| Page Section | Comments |
|---|---|
| Three Dimensional Shapes based on Triangles and Parallelograms | Prisms, pyramids, tetrahedrons, rotating cubes |
| Animating Multiple Cubes using a User Defined Function | Rotating three dimensional cubes and cuboids |
The pyramid shown is made up of 3 triangular sides and a triangular base.
The triangular pyramid has 6 edges, 4 faces and 4 vertices.
A square based pyramid can be made using a square base and 4 triangular sides.
The square based pyramid has 8 edges, 5 faces and 5 vertices.
The use of colour helps to make the pyramid look 3 dimensional.
If we coloured both faces of the pyramid shown the same it would not look 3 dimensional
We could use strokes (lines) to define the triangles as we shall see in the next Frame.
Three D shapes can be defined by the number of edges, faces and vertices they have.
A Tetrahedron consists of 4 equilateral triangles.
It could be considered as a special case of the triangular pyramid.
It has 6 edges, 4 faces and 4 vertices: the faces are all the same colour and they are transparent.
The edges, faces, and vertices can be seen and counted.
If the faces had not been coloured we would see only the edges which form a frame.
In the figure there is some ambiguity about which triangle forms the base.
There are numerous 3D shapes that can be made from triangles.
In the next frames we shall consider 3D shapes that can be made from squares and rectangles.
Face A in Figure 1, Frame 4, is a view focusing directly at the centre of a cube, which is coloured silver.
Face B is the same view of the face but its centre is defined where the vertical line EF, intersects line AB.
During the animation Face B will revolve around its centre in a clockwise direction.
A small black square has been added to Face B to help show the direction of rotation.
Face C is actually a composite view of 4 sides of the cube as it rotates.
The composite faces have been coloured red, blue, green and mauve.
The composite view is a projection of the Face B that rotates around a vertical axis passing through its centre.
There are numerous ways a cube can be made to rotate.
Cube A, Cube B and Cube C are different views of the same cube.
The colours of the cube faces are: silver, red, yellow and green.
The animation of cube A starts on the silver face and the animation sequence is silver, red, yellow, green and silver.
The animation of cube B starts on the yellow face and the animation sequence is yellow, green, silver, red and yellow.
The animation of cube C starts on the yellow face and the animation sequence is yellow, red, silver, green and yellow.
Cubes A and B rotate in the same direction, Cube C rotates in the opposite direction.
The angle of rotation is called tilt: it can be either positive of negative.
View A shows 3 faces of a cube, no more than 3 faces can be seen at the same time.
View B is looking directly at the silver face- all the other cube faces are hidden by the silver face.
The cube will be rotated about the cube diagonal which lies along the axis A,B.
The cube is centered on the intersection on A,B and E,F.
The rotation sequence is:
silver
sliver, red and blue
red, blue and yellow
yellow, mauve and green
mauve, green and silver
silver.
The animation uses two canvases: c01 is the bottom canvas and c01-1 is stacked on top of it.
The triangular prism is a simple 3D shape, it is made up of two triangles and three rectangles.
We are viewing the prism so that only one triangular face and one rectangular face can be seen.
Animating such a simple 3D shape does not provide many interesting results.
However animating the uses of prisms, say in studies of optics, would be useful.
We shall develop some more 3D shapes using triangles and then concentrate on 3D animations of a cube.
The initial drawing for this frame has been created using the function animCube.
In the animation two cubes have been created with the same dimensions that rotate in different directions.
A third cube, a cuboid, has also been created that also rotates .
The rotations have been synchronised so that all they all finish at the same instant.
The animation requires three calls of animCube.
The number of calls of animCube for all the drawings and animations on c02 and c02-1 is 6.
The explicit code length of for all the frames on canvas c02 and c02-1 is 191 lines long.
The code is much easier to create and manage using the user defined function.
The code used to draw and animate all the frames on canvas c01 is 1414 lines long.
The code uses no user defined functions, but it can be used to help create user defined functions.
The code used to draw and animate cubes on canvas c02 has been developed using a user defined function.
The function has been named animCube and it uses 153 lines of code.
An example call of the function is:
this.rotAng=0;
this.rotAng2=0;
this.passCnt=0;
var w=80,
h=80,
lw=1,
xS=100,
yS=60,
drawFaces="yes",
rotDir="CW",
cube1=shapes.animCube(context,w,h,lw,xS,yS,this.rotAng,drawFaces,this.passCnt,rotDir);