Figure 1 Examples of Animatable Shapes

The Shapes in Figure 1 have all been generated using some simple JavaScript Functions

shapes.polygon()- used to draw the first six shapes on the top row
shapes.roundedRect()- used to draw the last shape on the top row
shapes.stars()- used to draw all the stars on the second row
shapes.ellipse()-used to draw the firs two ellipses on the third row
shapes.cuboid()- used to draw the fourth shape on the third row

The third shape on the bottom row is a composite shape made up of two ellipses and a rectangle.

The fifth shape on the bottom row is another composite shape made up of a cuboid and a polygon. The polygon is an octagon.

The JavaScript functions all worked with Chrome, Firefox, IE11 and Safari.
They also worked on all the mobile devices they were tested on.

Figure 2 A Constructor Diagram for a Star Shape

Shapes should be Supported by the Major Browsers.

Shapes should be versatile-all shape properties should be definable

The function that generates the shape should be based on simple geometry

Animated shapes may be morphed, rotated and moved etc by changing shape properties between animation frames.

The constructor diagram is used to create a JavaScript function that can draw a star with any number of star points.

For example in Figure 1, stars have been drawn with 4, 5, 6, and 7 points.

The star shape is based on two concentric circles, a large circle of radius R and a small circle of radius r.

The star is drawn along the lines a,b and b,c for each value of theta.
The centre of the star is located on the canvas at coordinates xC,yC and the number of star points is nSp.
lw= the width of the star strokes
arcCol= the colour of the star strokes
If fillStar= "true" the star is filled with the colour fillCol
rotAng= the rotation angle about the star centre- allows the star to be rotated in animations
context=a canvas identifier


The Listing of the Star Function

window.shapes.stars=function(context,xC,yC,r,R,nSp,lw,arcCol,fillStar,fillCol,rotAng)
{ var theta=360/nSp,
theta=theta*Math.PI/180, //Theta to radians
alpha=theta/2,
rotAng=rotAng*Math.PI/180; //rotAngle to radians
//Draw star
context.save();
context.beginPath();
context.translate(xC,yC); //Rotate star
context.rotate(rotAng);
context.lineWidth=lw; //Create star
context.lineCap=("round");
context.strokeStyle=arcCol;
context.fillStyle=fillCol;
context.moveTo(0,R);
for(var i=0; i< nSp i++)
{
context.rotate(alpha);
context.lineTo(0,r);
context.rotate(alpha);
context.lineTo(0,R);
context.stroke();
} if(fillStar)
{
context.fill(); //Fill star
}
context.stroke(); //Draw star strokes
context.restore();
}//End stars

Figure 3 Using the Star Functon

Star dimensions are in pixels or degrees

Star properties are defined as-

var xC=200, x coordinate of the star centre
yC=160, y coordinate of the star centre
r=50, radius of the inner circle
R=150, radius of the outer circle
nSp=8, number of star points
lw=2, width of the star stroke
arcCol="blue", colour of the star stroke
fillStar=true,
fillCol="red",
rotAng=30, Rotates the star about its centre

The function call for the 8 point star is
star01=window.shapes.stars(context,xC,yC,r,R,nSp,lw,arc Col,fillStar,fillCol,rotAng);
Stars can be drawn with any number of star points, but this is affected by the canvas resolution.

Figure 4 Animating Star Shapes

User Interaction

The viwer can control the animation- clicking Play causes the animation to start.

When a button is coloured green it is active.

Clicking Pause causes the animation to pause, until Play is clicked again.

When the animation ends, clicking Repeat allows the animation to be run again

Clicking Next cause the next animation in the sequence to be displayed.

The interval between animation frames, which is about 20ms, is controlled by your browser.

The property changed in the animation is rotAng, which is changed slightly between frames.

This causes the star to rotate.

When the animation ends you may click Next to see the next animation sequence.

Animating Two Stars

The two stars have been drawn with the stars function.

They both have 8 points and their size and shape has been set using the radii R and r.

The star on the left has been named star01.

The star on the right has been named star02.

star01 has been made to rotate clockwise using this.rotAng01=this.rotAng01+delAng01;

star02 has been made to rotate anticlockwise using this.rotAng02=this.rotAng02-delAng02;

The animation ends when this.rotAng01<=360

Positive angles in javaScript go clockwise.

Verticle measurements (y values) in javaScript go downwards.

Animation Principles

The star shown is an 8 point star.

It has been drawn with javaScript and it can be animated.

All the other star shapes in this article have also been drawn with javaScript and saved as images.

All the properties of the star can be used in animations.

To animate a shape, the shape is drawn and displayed for a short time, about 20mS.

The shape is then deleted and one, or more, of its properties are changed slightly.

The star is then displayed again for another 20mS, and the properties displayed are slightly changed.

The process is repeated until the animation ends.

Click Next to see the animation