Essentially all they are is a set of objects (often the same one) drawn onto a canvas, each one in a slightly more advanced position on a prearranged course than the previous one.
Let's make an example, using 8 sprites in a tracked formation.
Firstly we need to define our object, in this case we'll use a red ball image (see below).
var ball = new image('ball.png');
Next up we need to define the movement pattern for our sprites.
var ballpos = new Array();
ballpos[0]=0;
ballpos[1]=0.2;
ballpos[2]=0.4;
ballpos[3]=0.6;
ballpos[4]=0.8;
ballpos[5]=1;
ballpos[6]=1.2;
ballpos[7]=1.4;
What we have done here is define an array, in our example we will have eight sprites, and each will have an equal distance between them, each one step advanced on a prearranged pattern (which will be calculated later).
How these numbers relate to the pattern is that each will be included in an equation based upon Math.sin and Math.cos, which by its nature is a cyclical pattern, but the variables used above mean that each step is advanced of the one before it.
To actually draw these sprites onto our canvas, we used the DRAW command, as seen earlier in these tutorials. However, what is different is that rather than plotting a fixed position, we create an equation which calculates the positions each time the routine loops, and draws these onto the canvas.
for (var counter=0;counter<7;counter++){
ballpos[counter] += 0.035;
ball.draw(mycanvas,319+244*Math.sin(ballpos[counter]),186+154*Math.cos(ballpos[counter]*1.5));
}
How this works is firstly creating a loop (the FOR command), based upon a variable we have defined as COUNTER, and it will run between 0 (zero) and 7 times (i.e. 8 in total).
Each loop in this command will add a small increment to the BALLPOS varuable for each sprite, so they all increment in turn, but maintain their distance from each other.
Then the ball is drawn (8 times), but each time with a slightly different position on both X and Y planes, using 319 (centre point) and 244 (distance from this point in total in each direction) multiplied by Math.sin of the specific BALLPOS value, and a similar calculation for the Y plane, based upon 186 (upper centre) and 154 pixels distance multiplied by Math.cos of the specific value (then multiplied by 1.5).
The best way to see how these work is to have a play with the equations and the spacing values in the Array, and also the addition values, and then see what happens until you are happy with the result.
The whole page code is copied below, but an example can be seen HERE.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>TEST</title>
<script src="http://codef.namwollem.co.uk/JS/CODEF/codef_core.js"></script>
<script>
var mycanvas;
var ball = new image('ball.png');
var ballpos = new Array();
ballpos[0]=0;
ballpos[1]=0.2;
ballpos[2]=0.4;
ballpos[3]=0.6;
ballpos[4]=0.8;
ballpos[5]=1;
ballpos[6]=1.2;
ballpos[7]=1.4;
function init(){
mycanvas=new canvas(640,480,"main");
go();
}
function go(){
mycanvas.fill('#000000');
for (var counter=0;counter<7;counter++){
ballpos[counter] += 0.035;
ball.draw(mycanvas,319+244*Math.sin(ballpos[counter]),186+154*Math.cos(ballpos[counter]*1.5));
}
requestAnimFrame( go );
}
</script>
</head>
<body onLoad="init();">
<body bgcolor="#FFFFFF">
<br>
<center>
<div id="main"></div><br><br>
<a href="javascript:window.location='view-source:'+window.location">View Source</a>
</center>
</body>
</html>
No comments:
Post a Comment