• Choose a category
• All
• Classic-Fiction

}

var numBalls = 50 ;

var maxSize = 12;

var minSize = 3;

var maxSpeed = maxSize+5;

var balls = new Array();

var tempBall;

var tempX;

var tempY;

var tempSpeed;

var tempAngle;

var tempRadius;

var tempRadians;

var tempvelocityx;

var tempvelocityy;

var friction = .01;

theCanvas = document.getElementById("canvasOne");

context = theCanvas.getContext("2d");

for (var i = 0; i < numBalls; i++) {

tempRadius = Math.floor(Math.random()*maxSize)+minSize;

var placeOK = false;

while (!placeOK) {

tempX = tempRadius*3 + (Math.floor(Math.random()*theCanvas.width)-tempRadius*3);

tempY = tempRadius*3 + (Math.floor(Math.random()*theCanvas.height)-tempRadius*3);

tempSpeed = maxSpeed-tempRadius;

tempAngle = Math.floor(Math.random()*360);

tempRadians = tempAngle * Math.PI/ 180;

tempvelocityx = Math.cos(tempRadians) * tempSpeed;

tempvelocityy = Math.sin(tempRadians) * tempSpeed;

tempBall = {x:tempX,y:tempY,radius:tempRadius, speed:tempSpeed, angle:tempAngle,

velocityx:tempvelocityx, velocityy:tempvelocityy, mass:tempRadius*8,

nextx: tempX, nexty:tempY};

placeOK = canStartHere(tempBall);

}

balls.push(tempBall);

}

function canStartHere(ball) {

var retval = true;

for (var i = 0; i if (hitTestCircle(ball, balls[i])) {

retval = false;

}

}

return retval;

}

setInterval(drawScreen, 33);

}

Figure 5-11 illustrates how this code will look in the browser.

Figure 5-11. Multiple balls of different sizes bouncing off one another with friction applied

Curve and Circular Movement

Whew! Moving and colliding balls on vectors can create some cool effects. However, moving in straight lines is not the only way you might want to move objects. In this section, we will show you some ways to animate objects using circles, spirals, and curves.

Uniform Circular Motion

Uniform circular motion occurs when we move an object along the distinct radius of a defined circle. Once we know the radius, we can use our old friends cosine and sine to find the x and y locations of the moving object. The equations to find the locations of an object moving uniformly on a defined circle are:

x = radius * cosine(angle)

y = radius * sine(angle)

We will create an example of uniform circular movement with a circle that has a radius of 125, with its center position at 250,250 on the canvas. We will move a ball along that circle, starting at an angle of 0.

In canvasApp(), we will define this circle path as a dynamic object stored in the circle variable. While this object defines the properties of a circle, we will not actually draw this circle on the canvas; rather, it defines only the path on which we will move our ball object:

var circle = {centerX:250, centerY:250, radius:125, angle:0}

var ball = {x:0, y:0,speed:.1};

In drawScreen(), we will incorporate the equations for uniform circular movement. To do this, we will set the x and y properties of the ball object to the products of the equations, added to the center location of the circle path on the canvas (circle.centerX, circle.centerY):

ball.x = circle.centerX + Math.cos(circle.angle) * circle.radius;

ball.y = circle.centerY + Math.sin(circle.angle) * circle.radius;

We then add the speed of the ball to the angle of the circle path. This effectively sets the ball to move to a new location the next time drawScreen() is called:

circle.angle += ball.speed;

Finally, we draw the ball onto the canvas:

context.fillStyle = "#000000";

context.beginPath();

context.arc(ball.x,ball.y,15,0,Math.PI*2,true);

context.closePath();

context.fill();

You can see what the circle path looks like in Figure 5-12. We have drawn the points on the canvas to illustrate the circle path.

Figure 5-12. Moving an object in a circle

You can easily alter the location and size of the circle path by altering