Example: Animation of Spinning 3d Regular
Polyhedra
[this page | pdf | back links]
In this page we
illustrate how an animation involving spinning polyhedra can be created using HTML, CSS and JavaScript,
and we explain the coding involved, which is set out below.
HTML
The first and last few
lines involve HTML and create a canvas element, onto
which the spinning polyhedra will be drawn. The canvas element is itself
contained in a hyperlink, as the spinning polyhedra are mainly used in the Nematrian website to
point to its HTML,
CSS and JavaScript Tutorial.
Start of Script
The first part of the
script, links the canvas element to a variable named x2, sets the canvas element size and creates a context
applicable the canvas. Although canvas contexts that render 3d images directly
do exist, we use here the more widely supported 2d context and include our own
algorithms for projecting 3d objects onto a 2d plane.
The next part of the
script defines a series of opening parameters, such as which shapes we will draw,
in what order, their colouring, where they are positioned on the canvas, how
big they are, how fast each is rotating, around what axis and their initial
angle through which they have been rotated from the specimen layouts defined
later in the code. In the colouring, the “rgba” define the red / green / blue
colours of the faces and edges and the extent to which they will be
transparent. We also set some shape independent parameters, e.g. the overall x
and y axes of the plane onto which we will project the resulting images and the
frame rate specifying how frequently we redraw the picture on the canvas.
The shapes used are the
five regular polyhedra known from antiquity. Each shape is defined by the
cartesian coordinates of its vertices and by arrays that then indicate for each
edge which two vertices its joins and for each face which vertices form the perimeter
of the face. The initial orientation of the shape is set in a manner that
simplifies the exact locations of the vertices relative to the origin. The
shapes are embedded in the functions named regularTetrahedron,
…
The script then executes
the function animate3dShapeOnCanvas,
which contains all the necessary elements to create the moving images.
Script functions
The function animate3dShapeOnCanvas identifies the
number of shapes being drawn and initialises (in dynamicRotAngles)
the angles to which each shape has been rotated around its axis when the
animation starts. It draws the initial configuration of the shapes on the
canvas by calling the projectionIncrement
function which itself clears the canvas, resets the line path being drawn on
the canvas and then projects each shape in turn onto the canvas, using a
generic project3dShapeOnCanvas
function which is designed to handle any suitably specified shape. It also
updates the dynamicRotAngles so
that the next time the shape is plotted it will be rotated slightly. The animate3dShapeOnCanvas function then
uses the setInterval method to
set the animation running. The setInterval
tells JavaScript to repeatedly call a specified function (here the same projectionIncrement function that was
used to draw the shapes initially) every set number of milliseconds (the number
here being the frame rate defined earlier).
The remainder of the code
is more mathematical in nature and is designed to support the project3dShapeOnCanvas function. For
example, it includes some generic vector and matrix functions designed to
facilitate rotating a shape and then projecting it onto a plane.
NAVIGATION LINKS
Contents | Prev