Orbital and Planetary rotation,3 dimensional rotation, Axial Rotation
Figure 1 Multilayered Canvases
Frame 2 A Layered Canvas Animation
The colours of the animation path and the small ball have been changed from "Images & Perspective" Figure 6 Frame 2, but all dimensions are the same.
The canvas layers have been identified as: Layer 1 ID = "c01", layer 2 ID = "c01-1"
The animation layer, layer 2, has been given the attribute: position absolute
Layer 2 has had its height reduced to allow the buttons on layer 1 to be accessed.
The animation path and the graph axes are only drawn once when the animation is initialised.
A small rectangle, slightly bigger than the red ball is the only area of the layer 2 canvas to be cleared on each animation frame.
Execution speed of the animation has been increased, at the expense of extra memory and some increase in code complexity.
Frame 3 The Travelling Rolling Ball Repeated
This animation is a repeat of the animation on "Images & Perspective" Figure6 Frame 6, but it is implemented with 2 canvases.
When the animation was tested on "Images & Perspective", it worked in Google Chrome and Firefox, but it ran very slowly in IE11
The problem in IE11 was that the green parabola was drawn with a for loop on every frame of the animation.
This animation draws the graph axes and both parabolas on canvas level 1, they are never deleted during the animation.
The animation of both balls is implemented on canvas level 2.
The ball positions are modified slightly on each animation frame and the yellow ball is also made to rotate within the black ball.
This gives the impression that the balls are rotating as they travel.
The height of the level 2 canvas has been adjusted to ensure the buttons on the level 1 canvas are accessible.
The adjustment, which makes the level 2 canvas height 420px instead of 450px, means the animation is not quite the same as that on "Images & Perspective".
This animation works in Google Chrome, Firefox, IE11 and Safari.
Frame 4 A 3 Layered Canvas Animation
The background image shows Whitby Abbey, which was established in 657 AD. Whitby is a small seaside town in England.
The image is a photograph in jpeg format, the image has a width of 600px and a height of 400px
The canvas used for the image is on the bottom layer, c01, its height has been increased to 430px to make space for the buttons.
The aspect ration of the drawing zone of c01 is the same as that of the image, c01 is never cleared during the animation.
The animation is processed on c0-1,the middle layer, its size is 600px by 400px.
The moving ellipse is cleared using a rectangle with a width slightly larger than 2aX and a height slightly larger than 2bY.
The rectangle moves with the ellipse during the animation.
The window frame is drawn on c01-2, its size is also 600px by 400px; the window frame is never cleared throughout the animation.
The animation is in 3D, the image of the Abbey and its surroundings are in the background and it uses perspective.
The ellipse moves in front of the Abbey, but behind the window frame.
The window frame is close to the viewer, in the foreground.
Frame 1 Introduction to Multilayered Canvases
Multilayered canvases are used to reduce the animation processing time.
This is done by using canvases layered on top of each other.
We shall start with a two layered example using layer 1 and layer 2.
The basic idea is that shapes that do not change are drawn only once, on the layer 1 canvas.
This layer is never cleared throughout the animation.
Shapes that are animated are drawn on a transparent canvas, layer 2, placed above the layer 1 canvas.
This layer only contains the animation code: a rectangle that covers the animated shape is cleared on each animation frame.
Execution time is saved because only the shapes to be animated are drawn and cleared on each animation frame.
The number of canvas layers can be increased, there is no upper limit on the number of layers.
We shall use the animation motion path shown in green to illustrate a two layered animation.
This example was used on a single canvas on "Images & Perspective" Figure 6, Frame 2.
Figure 2 Motion in Animations
Frame 2 Linear Acceleration
Acceleration is an increase in speed, when we accelerate we go faster, our speed increases
The motion path of each of the objects will be a straight line parallel to the x axis.
The equation for acceleration is: $a=\delta s/\delta t$. Where $\delta s$ is the change in speed in the time interval $\delta t$.
From now on the symbol $\delta$ will mean a small change in.
The initial velocity of object A is vxA=0; and its acceleration is set to axA=0.02;
Object A is accelerated continuously until it is halted.
On each animation frame object A's velocity is evaluated using vxA=vxA+axA;
The position of object A is calculated as xCA=xCA+vxA; xCA is the centre of object A.
The initial velocity of object B is vxB=0; and its acceleration is set to axB=0.02;
Over distance x1B the velocity of object B is vxB=vxB+axB;
The position of object B is calculated as xCB=xCB+vxB; B accelerates over the distance x1B.
Over x2B object B travels at constant velocity xCB=xCB+vxB;
Over x3B object B decelerates: vxB=vxB-axB; xCB=xCB+vxB;
Object C accelerates over x1C, then decelerates over x2C, until it comes to a stop; axC=0.02;
For x1C, vxC=vxC+axC; and xCC=xCC+vxC;
For x2C vxC=vxC-axC; and xCC=xCC+vxC;
To accelerate an object on canvas, we increase its speed on each animation frame.
$\delta t$ is the time between each animation frame, which is 20ms, this corresponds to 50 frames/sec.
Frame 3 An Oscillating Rotating Ball
This animation represents a ball rolling forwards and backwards in a parabolic trough.
Before the animation starts, the ball has potential energy due to its height above ground level.
When the ball rolls downwards its speed increases, it gains kinetic energy and loses potential energy.
When the ball reaches the bottom of the trough, it has zero potential energy and maximum kinetic energy.
When the ball rolls upwards it slows down, it loses kinetic energy and gains potential energy.
On each traverse of the trough, the ball loses energy, so it climbs a little less.
The ball oscillates backwards and forwards, until it eventually comes to rest at the bottom of the trough.
The ball is accelerating and decelerating instant by instant, its velocity is changing instant by instant.
The animation uses two canvases, c02 and c02-1: the graph axes and the parabolic curves are drawn on c02 which is never cleared.
The animated rolling ball is on Canvas c02-1, only a small rectangle, which covers the black ball, is cleared on each frame.
The direction of rotation of the ball changes when its direction of travel changes.
Note that the animation also illustrates the ball moving forward and in reverse. The animation can be reversed
The animation, which uses the ellipse function, worked with IE11, Chrome, Firefox and Safari.
Frame 1 Speed
Speed is a familiar concept, if we are travelling at 60km/Hr in a car, after 2 hours we have travelled 120km.
The equation for speed is: $s=\delta x/\delta t$, where $\delta x$ is the change in distance in the time interval $\delta t$
If $\delta x$ =120km and $\delta t$=2, $\delta x/\delta t$=120/2=60km/Hr. The symbol $\delta$ means change in.
When we use speed in html5 canvas animations $\delta t$ is the time between animation frames, about 20ms.
If the distance travelled by object A between frames is $\delta x$ = 4px, say, it's speed =4px /20ms=200px /s.
For n frames the distance traveled by A on canvas is $x=n\delta x$
If n=30 and $\delta x$=4px, object A will have travelled $30\times 4=120px$ in 30 frames.
If object B travels twice as fast as object A it moves $2\delta x$=$2\times 4=8px$ between frames.
After 30 frames it will have travelled $30\times 4=240px$
If we would like to move an object in the y direction, we would define speed as $s=\delta y/\delta t$
In many of the animations we have used so far we have used the idea of a motion path and modified shape dimensions to give a 3D motion effect
We shall consider acceleration next.
Figure 3 Examples of Rotation
Frame 2 Planetary Rotation
When an object rotates it rotates about a rotation point, (xrp,yrp).
The red circle represents a planet which will follow an elliptical motion path.
The rotation point for the planet is (xrp=xC,yrp=xC), where xC and yC are the coordinates of the centre of the elliptical motion path.
The moon rotates around the planet following a circular motion path.
The centre of the sun is at the focal point of the ellipse, the planet and the moon rotate about the sun.
The planet rotates anticlockwise about the sun: the moon rotates anticlockwise about the planet.
Orbits are representational, they are not to scale physically and time wise.
The animation backdrop is on canvas c03, which includes the sun, is never cleared and redrawn.
The planet and moon are drawn on canvas c03-1, which is transparent.
A small square, centered on the centre of the planet is used clear the planet moon combination on each animation frame.
The planet moon combination is then redrawn at a slightly different location on c03-1 for the next animation frame.
The actual Earth orbit around the Sun is almost circular and the Earth orbit rotation point is at the centre of the Sun.
Frame 3 A Rotating Cylinder
This animation shows a cylinder, suspended above a road; the cylinder rotates towards you.
The image is a photograph of a road in Sorrento, Italy: the original image size is 566px wide by 854px high.
It is drawn on canvas c03, which has a drawing zone size of 400px by 640px; it has an aspect ratio equal to that of the original image.
A small zone is added at the bottom of c03, 400px by 30px, its height is added to 640px, to accommodate the buttons.
The actual dimensions of c03 is 400px by 670px: the image on c03 is never cleared and redrawn during the animation.
The white circle represent the end view of a cylinder, suspended in space above the road. The circle is actually an ellipse, which has equal major and minor axes.
During the animation the minor axis is reduced in size on each animation frame. This gives the impression the base of the cylinder is rotating towards you.
The body of the cylinder is increased in height on each animation frame, which gives the impression it is rotating towards you
A gradient has been added to the cylinder body to give it a 3 dimensional appearance.
When the animation ends, the cylinder has rotated through 90 degrees, its base now appears as a straight line and its body has a rectangular profile, but it looks curved because of the gradient.
The impression of rotation has been achieved by noting how a cylinder, like a coke tin, looks when you rotate it towards you.
This is how an artist would convey partial rotation in a still picture; it does not use a rotation point.
We are at liberty to use any method that gives the impression we wish to achieve.
The rotation could have been implemented by including a z axis at right angles to both the x and y axes.
The cylinder base would then have a rotation point xrp,yrp,zrp, and it would be made to rotate in the direction of the z axis.
Frame 4 A Rotating Car Wheel
The rotation in this animation is an example of axial rotation, the wheel rotates about its centre as it travels.
The image shows a scene in Melbourne, Australia; the original has a width 640px and a height of 424px.
The image is placed on canvas c03, which has a drawing zone size of 640px by 424px, which is the same size as the image.
The car wheel has been drawn on canvas c03-1; it has yellow spokes and a black tyre.
Before the animation the wheel has been positioned half off canvas, in the shadow of some large leaves.
When the wheel travels from left to right it rotates. The spokes and the tyre rotate about its axis in a clockwise direction.
When the wheel rotates it travels in front of the tram: we can see between the wheel spokes.
When the wheel stops it seems to be in front of the tramway and the rear of a silver car, but behind a part of a blue car in the bottom right of canvas.
Frame 1 Orbital Rotation
The image is a drawing, in jpg format, of a star scape which will be used as the backdrop of an animation showing orbital rotation.
All the animations in this section use jpg images as backdrops and most of them are photographs.
The original image size is 600px wide and 340px high: this is the size of the drawing zone on the canvas
The height of the canvas is the height of the drawing zone + the height of the button zone.
Using photographs as the backdrop for animations is effective, quick and inexpensive.
Using the bottom layer canvas for the backdrop means it only has the be rendered once, when the animation is initialised.
The bottom canvas layer is never cleared, the image is drawn once: using this approach makes the animation fast.
