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 |

Colours, Colour Gradients, Coloured Bands | Animating colours, colour gradients and shapes with coloured bands. |

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);

The circle on the left is filled with a JavaScript radial gradient.

The radial gradient color stops are yellow, red, and green.

Each stop has an alpha values of 0.5, which makes it semi transparent.

The circle is morphed by increasing its radius slightly on each animation frame.

The ellipse on the right is animated when the animation of the circle is stopped.

The ellipse is filled with a Javascript linear gradient.

The linear gradient color stops are yellow, red, and blue.

Linear gradients have a direction, shown by a line drawn on the horizontal axis.

The color bands are at 90 degrees with respect to the direction line.

During the animation the gradient direction is rotated, the gradient is animated.

None of the ellipse properties are changed.

The gradients give the circle and the ellipse a 3D apperance

The circle and the ellipse have 4 coloured bands, red, green, blue and yellow.

All the colour bands share the same centre coordinates, they are concentric.

The colour bands all have the same width.

The red circle has the largest radius.

The radius of the green circle is: red radius-width of of a colour band.

The radius of the blue circle is: red radius-2*width of of a colour band.

The radius of the yellow is circle is: red radius-3*width of of a colour band

The ellipse has been drawn using the same approach

The ellipse is animated after the circle animation is finished.

Both the circle and the ellipse have been created using 3 coloured bands.

The circle and the ellipse are animated at the same time.

The circle has been drawn using shapes.ellipse, with the major and minor axes equal.

The 3D axis were drawn on canvas C03 when the html page was loaded.

The circle is drawn on canvas c03-1, which is transparent and above C03.

The ellipse is drawn on canvas c03-2 which is transparent and above C03-1.

Both the circle and the ellipse are morphed during the animation.

The shapes overlap part way through the animation.

The shapes have been made opaque, so they obscure the coordinates on C03

The square and the star have 3 coloured bands, red, yellow and red.

The colours in both shapes have been made transparent using rgba(r,g,b,a).

For example the red colours have been created using rgba(255,0,0,0.5).

Making a=0.5 instead of 1 makes the red colours transparent.

The yellow colour is created using rbga(255,255,0,0.5).

Some of the snow scene is visible through the transparent shapes.

During the animation, the square moves the right, the star rotates and move the the left.

The star moves in front of the square when they pass each other.

The colours of the snow scene behind the shapes are changed.

The hexagon has been drawn with shapes.polygon- the number of sides = 6.

The octagon has also been drawn with shapes.polygon- the number of sides = 8.

The coloured bands have all been set using rgba(r,g,b,a).

The coloured bands in the hexagon have been made transparent, with a=0.5.

The coloured bands in the octagon are not transparent, a=1.

During the animation both shapes follow a parabolic motion path.

The hexagon rotates clockwise and a is incremented on each animation frame.

The octagon rotates anticlockwise, and a is decremented on each animation frame.

When the shapes pass each other the hexagon passes behind the octagon.

Two sets of 3 dimensional axes are shown, one for the circle the other for the ellipse.

The circle is centred on the zero point of its 3D axes.

Note that the z axis is at right angles to both the x axis and the y axis.

Positive values of z are into the canvas, negative values of z are out of the canvas

The circle is made semi-transparent so that the axes can be seen.

The ellipse is centred on the zero point of its 3D axes.

The same convention used for the circle axes is used for the ellipse axes.

The ellipse is also made semi-transparent so that its axes can be seen.

The circle and the ellipse will be used to demonstrate the use of of JavaScript color gradients.