| Page Contents | Comments |
|---|---|
| Images on Canvas and Perspective | Image and canvas aspect ratio, resizing the canvas dynamically, perspective, images as animation backgrounds |
| Three Dimensional Drawings and Animations | Perspective, vanishing points, 3D cubes, cubes in motion, the perception of 3D motion on canvas |
| Animating Ellipses | Drawing and animating ellipses, morphing ellipses, introduction to the theory of the ellipse |
| Ellipses in Motion | An ellipse moving towards and away from you- motion paths, the perception of 3D motion on canvas |
| Polygons and Stars | Functions for drawing polygons and stars: a rotating star, meshing rotating stars |
| Polynomials | Using polynomials to create curved motion paths, parabolas and cubic polynomials, a hexagon in motion |
This image is an enlarged part of the original image of the Roman Forum
It has been placed on the canvas using- drawImage(imageID,sX,sY,sW,sH,canX,canY,canImgWidth,canImgHeight)
The original image has been cropped to display only the part of it we wish to see.
This causes the image on canvas to be enlarged.
The aspect ratio of the cropped image on canvas has been set to the aspect ratio of the original image.
sX, sY are the coordinates of the image we wish to enlarge.
sW, sH are the width and height on the image we wish to enlarge.
The rest of the variables used in drawImage() have the same values as those in Figure 1/Frame 1
The aspect ratio of the Shard image is completely different than that of the Roman Forum
The aspect ratio of an image=width/height.
The size of the original image of the Roman Forum is width=1600px, height=1200px, its aspect ratio=1600/1200=1.333333'.
The canvas width for the Roman Forum was set to 500px, so the canvas height=500/1.33333=375px.
The size of the original image of the Shard is width=1200px, height =1600px, its aspect ratio=1200/1600=0.75.
The canvas width for the Shard was set to 350px, the canvas height=350/0.75=466px
Using the same aspect ratio for the original and canvas images ensures they are both proportioned the same.
The red lines drawn along the tops of the windows of the building are lines of perspective.
The lines of perspective for the top row of windows are converging to a vanishing point.
The same applies to the bottom row of windows, they converge to a different vanishing point.
The length of the vertical sides of the windows get shorter, the further away they are.
Horizontal lines converge and vertical lines get shorter: at the vanishing point, horizontals meet; verticals become zero.
Some horizontal lines of perspective have been coloured red and the verticals between them can be seen to shorten.
The two figures in the image can be made out as women, but we can tell they are some distance away, their features cannot be seen
In the doorway behind the women, other figures can just be made out.
Each frame for Figure 1 has descriptive text associated with it, which is enclosed within div tags.
This is the text you are reading.
Changing the canvas dimensions requires the width and height of the div tag to be recalculated.
This has been done using Javascript.
The scene is a well known view in Melbourne, Australia.
The width of the div tag associated with the canvas has been calculated and the div height has been set to the canvas height, using javaScript.
Two lines of perspective have been shown in red. Sometimes lines of perspective are hidden behind objects.
Each of the lines of perspective have a vanishing point: numerous lines of perspective could be drawn for the building.
Two more lines of perspective are shown in blue, if they were extended further they would pass behind the statue.
The blue lines of perspective have their own vanishing point.
The figures near the building are more distant than the statue, their outlines are not distinct, the colour of their clothing appears dowdy.
The buttons that allow control of the canvas images must be processed each time the canvas size is changed and the user clicks one of them.
This processing is complex and requires the use of Javascript event listeners.
Each canvas on this web page must be processed in the same way, each has its own event listener, its own set of divs and its own buttons.
The Glass House Mountains are famous for their outstanding beauty.
The image elements that perspective can be applied to are the telegraph poles, the one that is farthest away is shorter.
Its shape is less distinct and its colour is not as deep as the one that is nearer.
The natural features of the image allow us to tell which are nearest to us.
The foliage of the shrub in the foreground is more distinct and greener than those on the mountain.
Elements of the image that are further away are sometimes behind those in front.
The mountain appears to be about 2.5 times higher than the nearest telegraph pole, in reality it is 235m high.
Clicking the Play button starts an animation. The ellipse could be any shape.
You can pause and replay the animation as often as you like.
The animation demonstrates that we can use images for the canvas background.
The ellipse appears to pass in front of the mountain.
Using images as the background of animations where appropriate is important.
To draw a complex background image is time consuming and difficult.
Taking a photograph, or using an existing image, takes a few minutes.
This is an image of the Roman Forum in Rome.
It has been placed on the canvas using the javaScript drawImage() method.
The syntax is: context.drawImage(imageID,canX,canY,canImgWidth,canImgHeight)
The image of the Roman Forum has been drawn using:
context.drawImage(imageID,0,0,canWidth,dwgZoneHeight);
canImgWidth=canWidth is the width of the canvas
canImgHeight=dwgZoneHeight is the area of the canvas allocated to drawings
The dwgZoneHeight excludes the height of the canvas allocated to the buttons.
The image aspect ratio on canvas is the same that of the of the original image.
Aspect ratio is explained in the following frames
The cube shown in the previous Frame is a jpeg image created in Microsoft Visio.
The three cubes drawn in this Frame have been drawn with a javaScript function called cuboid.
They could represent the outline shape of buildings, see the image of Melbourne in Figure 1.
The cubes share a common vanishing point that is off the right hand side of the canvas.
Horizontal lines converge, vertical lines shorten and colours become duller the further the cubes are from us.
The combined effect is that we perceive the cubes as 3 dimensional objects.
An example call of cuboid for cube C, the cube furthest from us is:
var xS=350, yS=200, L1=80, L4=100, alpha=10, lw=2, lineCol='red', L5=60,
beta=5, fillCube=true, fAcol="#BB0000", fBcol="#AA0000", drawStrokes=false,
cubeC=shapes.cuboid(context,xS,yS,L1,L4,L5,alpha,beta,lw,lineCol,drawStrokes,fillCube,fAcol,fBcol);
Cuboid is versatile, and it is animateable.
A white box has been created using the cuboid function, it could represent a simple van.
The red boxes have been drawn with the cuboid function, they are not a jpeg image.
The horizontals of the van converge towards vanishing points and verticals get shorter.
As the van moves horizontals should get shorter and so should verticals.
The van colours should also get darker.
The perception of convergence of the van horizontals has been done by making it follow a line of motion.
The line of motion is parallel to the bottom horizontals of the cubes.
Shortening of the horizontals and verticals has been done by gradually reducing lengths of the van edges as it moves.
Making the van colours duller as it move has not been done: changing colour gradually will be demonstrated in the next frame.
The animation has been stopped when the leading vertical of the van reaches the trailing vertical of the last cube.
The "van" shown is the same shape as the white van in Frame 3 but it is larger.
Both shapes have the same aspect ratio.
The face colours have been made red and blue, and both colours will be made duller as the van moves.
Colours have been set using the rgb(red,green,blue) function,
Red has been set using red=rgb(250,0,0), blue has been set as blue=rgb(0,0,255).
In the code symbols have been used and colour components have been decremented as motion progresses.
A code snippet for the colours of face A of the "van", which is red is:
rA=255, gA=0,bA=0,this.rA=rA, this.gA=gA, this.bA=bA,
fAcol="rgb("+ this.rA +","+ this.gA +","+ this.bA +")";
delColA=1.0, delColB=1.0; this.rA=this.rA-delColA; this.bB=this.bB-delColB;
Animating colours is straightforward, but knowing how colours look at a distance is not.
A cube is a simple 3 dimensional shape with 6 faces.
We can never see all the faces at once, we can see 3 faces, 2 faces, or 1 face.
This is a property of 3 dimensional space and how we see.
The drawing of the cube shows 2 faces, if we were looking down on the cube, we would also see its top face.
Two vanishing points have been drawn on the canvas, vp1 and vp2.
To make the shape look 3 dimensional we make horizontal lines of the real cube appear to converge in the drawing.
Vertical lines of the real cube are made to shorten in the drawing.
The combined effect is that we perceive the drawing of the cube as 3 dimensional.
The vanishing points have x and y coordinates: vp1x,vp1y and vp2x,vp2y.
Both vanishing points have been drawn on the canvas: vanishing points can be outside the canvas.
This animation morphs an ellipse by decreasing its major axis gradually.
This makes the circle morph, that is, change into the familiar elliptical shape.
As the ellipse is morphed, it appears to rotate about its vertical axis.
This gives the impression that the ellipse is rotating in 3 dimensions.
The animation is stopped when the ellipse major axis reaches 10px.
The function ellipse has 30 lines of code and uses only basic javaScript defined functions.
Using javaScript basic defined functions ensures ellipse works with all major browsers.
The ellipse was tested using Chrome, Firefox, Safari and Internet Explorer.
When the javaScript predefined ellipse function was compared with our shapes.ellipse function the ellipses drawn were identical.
Press Play to run the animation.
This animation morphs an ellipse by decreasing its minor axis gradually.
This makes the circle morph, that is, change into the familiar elliptical shape.
As the ellipse is morphed, it appears to rotate about its horizontal axis.
This gives the impression that the ellipse is rotating in 3 dimensions.
The animation is stopped when the ellipse minor axis reaches 10px.
The use of customised functions to draw shapes in general can make them work for most major browsers.
The shapes can be made easy to use, versatile and animatable.
Properties of particular interest can be added, as we shall see when more animatable shapes, such as stars, are created.
When the ellipse morphs, the vertical axis shortens, to give a 3D effect.
The shortening of the vertical axis gives the impression the ellipse is rotating in 3 dimensions.
This ellipse has been drawn with an arc (stroke) but it has not been filled.
The ellipse has been animated by gradually reducing the vertical (minor) axis.
This gives the impression that ellipse is rotating in 3 dimensions.
The animation is stopped when the ellipse vertical axis reaches zero.
The ellipse morphs from a circle to a straight line.
Actually the "straight line" is really two lines:
one for the "top" of the ellipse, the other for the "bottom" of the ellipse.
The width of the line is 4px. The lines overlap, there is no gap between them.
The line width lw of the ellipse stroke is 3px, 2 line widths =6px, but the lines overlap to give a visible width of 4px.
We shall cover javaScript lines in later sections of this page.
The diagram shows the basic properties of an ellipse that were used in the function shapes.ellipse.
The parametric equations of the ellipse are:
$x=aX\cos (t)$, where aX is the ellipse semimajor axis.
$y=bY\sin (t)$, where bY is the ellipse semiminor axis.
t=is an angle between 0 and 360 degrees: we have called the angle t theta, in shapes.ellipse.
Calculations in javaScript must be in radians: the conversion from degrees to radians is done by shapes.ellipse.
xC is the x coordinate of the ellipse centre, relative to x=0, the left hand side of the canvas.
yC is the y coordinate of the ellipse centre, relative to y=0, the top of the canvas.
making theta < than 360 draws a part of an ellipse.
The ellipse can be made to rotate about is centre.
The ellipse stroke and fill can be set to any colour and both, or either, can be suppressed.
shapes.ellipse is versatile and animatable.
The circle shown is an ellipse drawn with the minor axis equal to the major axis.
The ellipse has been drawn with a customised function that works with any of the major browsers.
The function call for the circle shown is ellipseA=shapes.ellipse(context,aX,bY,xC,yC,theta,lw,arcCol,fillEllipse,drawArc,fillCol,rotAng)
context=the canvas context
aX=100px is the length of the ellipse major axis, bY=100px is the length of the ellipse minor axis.
xC=200px is the x coordinate of the ellipse centre, yC=150px the y coordinate of the ellipse centre.
theta=360 degrees the angle of the ellipse arc, theta less than 360 degrees draws only a portion of the ellipse.
lw=3px is the width of the ellipse stroke.
arcCol="blue" is the colour of the ellipse arc, fillEllipse=true, fills the ellipse, false does not fill the ellipse.
drawArc=true, draws the arc of the ellipse, false does not draw the ellipse arc, fillCol="red" is the colour of the ellipse fill.
rotAng= 0, means the ellipse will not be rotated about its centre, if rotAng is not zero, the ellipse can made to rotate about its center.
The ellipse function is very versatile and animatable.
The simple parabola is an example of an algebraic equation.
The equation for the simple parabola shown is: $y=a{{x}^{2}}$
$a$ is a constant that can have any value, including zero and one.
The size of the parabola on canvas is made to fit in an imaginary rectangle.
The rectangle width is defined as $xpMax-(-xpMax)=2xpMax$ , the height of the rectangle is $ypMax$
The parabola is made the fit the rectangle by using the equation $a=ypMax/Math.pow(xpMax,2)$
The parabola is drawn from left to right, starting at $-xpMax,ypMax$, passing through $0,0$ and finishing at $+xpMax,ypMax$
The javaScript code for drawing the parabola is 19 lines long.
The code for drawing the graph axes and adding text is 18 lines long.
Parabolas can be used in to define animation motion paths: the paths do not need to be drawn.