In the case of 100 balls bouncing on the canvas, we will need to create a ball object with
a few more properties. Recall that the ball object we created previously had only x and
y properties and looked like this:
var ball = {x:p1.xy:p1.y};
All the other variables that represented the ball (speedanglexunits, yunits) were
global in scope to the canvasApp(). We used global variables because we could get away
with it. However, because we need to make sure everything works the same way in this
app, we make all those values properties of each ball object.
For the multiple-ball-bounce application, we will create an object that holds all the
pertinent  information  about  each  bouncing  ball: xy, speed, angle, xunits,  and
yunits. Because we are going to create 100 balls of various sizes, we also add a property
named radius, which represents the size of the ball (well, half the size because it is a
radius):
tempBall = {x:tempX,y:tempY,radius:tempRadiusspeed:tempSpeed,
angle:tempAnglexunits:tempXunitsyunits:tempYunits}
Inside canvasApp(), we define some new variables to help manage the multiple balls
that will bounce around the canvas:
numBalls
The number of balls to randomly create
maxSize
The maximum radius length for any given ball
minSize
The minimum radius length for any given ball
maxSpeed
The maximum speed any ball can travel
balls
An array to hold all of the ball objects we will create
The following code shows the newly defined variables:
var numBalls = 100 ;
var maxSize = 8;
var minSize = 5;
var maxSpeed = maxSize+5;
var balls = new Array();
We also create a set of temporary variables to hold the values for each ball before we
push it into the balls array:
var tempBall;
var tempX;
var tempY;
Bouncing Off Walls  |  209
Pdf form save in reader - extract form data from PDF in C#.net, ASP.NET, MVC, Ajax, WPF
Help to Read and Extract Field Data from PDF with a Convenient C# Solution
pdf form field recognition; exporting pdf data to excel
Pdf form save in reader - VB.NET PDF Form Data Read library: extract form data from PDF in vb.net, ASP.NET, MVC, Ajax, WPF
Convenient VB.NET Solution to Read and Extract Field Data from PDF
extract data from pdf to excel; how to save pdf form data in reader
var tempSpeed;
var tempAngle;
var tempRadius;
var tempRadians;
var tempXunits;
var tempYunits;
Next, in canvasApp(), we iterate through a loop to create all the ball objects. Notice how
tempX and tempY are created below. These values represent the ball’s starting location
on the canvas. We create a random value for each, but we offset it by the size of the ball
(tempRadius*2). If we did not do that, some of the balls would get “stuck” in a wall when
the app starts because their x or y location would be “through” the wall, but their speed
would not be enough so that a “bounce” would get them back on the playfield. They
would  be stuck  in  bouncing  limbo forever  (which  is kind  of  sad  when you  think
about it).
When you try this app, you will see that occasionally a ball still gets
stuck in a wall. There is a further optimization we need to make to
prevent this, but it is a bigger subject than this little iteration. We will
talk about it in the section “Multiple Balls Bouncing and Colliding” on
page 219.
The tempSpeed variable is created by subtracting the value of tempRadius from the value
of maxSpeed, which we created earlier. The speed is not random, but it is inversely
proportional to the size (radius) of the ball. A larger ball has a larger radius, so the value
you subtract from tempSpeed will be larger, thus making the ball move more slowly.
When you run CH5EX5.html in your web browser, you will notice that
this little trick makes the ball appear more “real” because your brain
expects larger objects to move more slowly.
for (var i = 0i < numBallsi++) {
tempRadius = Math.floor(Math.random()*maxSize)+minSize;
tempX = tempRadius*2 + (Math.floor(Math.random()*theCanvas.width)
-tempRadius*2);
tempY = tempRadius*2 + (Math.floor(Math.random()*theCanvas.height)
-tempRadius*2);
tempSpeed = maxSpeed-tempRadius;
tempAngle = Math.floor(Math.random()*360);
tempRadians = tempAngle * Math.PI/ 180;
tempXunits = Math.cos(tempRadians* tempSpeed;
tempYunits = Math.sin(tempRadians* tempSpeed;
tempBall = {x:tempX,y:tempY,radius:tempRadiusspeed:tempSpeed,
210  |  Chapter 5: Math, Physics, and Animation
C# PDF: PDF Document Viewer & Reader SDK for Windows Forms
SaveFile(String filePath): Save PDF document file to a specified path form (Here, we take a blank form as an open a file dialog and load your PDF document in
extract table data from pdf to excel; make pdf form editable in reader
VB.NET Image: How to Save Image & Print Image Using VB.NET
printing multi-page document files, like PDF and Word is used to illustrate how to save a sample RE__Test Public Partial Class Form1 Inherits Form Public Sub New
how to save editable pdf form in reader; how to fill pdf form in reader
angle:tempAngle,
xunits:tempXunitsyunits:tempYunits}
balls.push(tempBall);
}
Now we need to draw the balls onto the canvas. Inside drawScreen(), the code to draw
the balls should look very familiar because it is essentially the same code we used for
one ball in Example 5-4. We just need to loop through the balls array to render each
ball object:
for (var i = 0i <balls.lengthi++) {
ball = balls[i];
ball.x += ball.xunits;
ball.y += ball.yunits;
context.beginPath();
context.arc(ball.x,ball.y,ball.radius,0,Math.PI*2,true);
context.closePath();
context.fill();
if (ball.x > theCanvas.width || ball.x < 0 ) {
ball.angle = 180 - ball.angle;
updateBall(ball);
else if (ball.y > theCanvas.height || ball.y < 0) {
ball.angle = 360 - ball.angle;
updateBall(ball);
}
}
When you load Example 5-5 in your web browser, you will see a bunch of balls all moving
around the screen independently, as shown in Figure 5-7. For the fun of it, why not
change the numBalls variable to 500 or 1,000? What does the canvas look like then?
Bouncing Off Walls  |  211
C# PDF File Merge Library: Merge, append PDF files in C#.net, ASP.
Merge Microsoft Office Word, Excel and PowerPoint data to PDF form. Append one PDF file to the end of another and save to a single PDF file.
extract data from pdf form to excel; how to make pdf editable form reader
VB.NET PDF Page Delete Library: remove PDF pages in vb.net, ASP.
this RasterEdge XDoc.PDF SDK, you can simply delete a single page from a PDF document using VB.NET or remove any page from a PDF document and save to local
export excel to pdf form; online form pdf output
Figure 5-7. Multiple balls of different sizes bouncing off walls
Example 5-5. Multiple ball bounce
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CH5EX5: Multiple Ball Bounce</title>
<script src="modernizr.js"></script>
<script type="text/javascript">
window.addEventListener('load'eventWindowLoadedfalse);
function eventWindowLoaded() {
canvasApp();
}
function canvasSupport () {
return Modernizr.canvas;
}
function canvasApp() {   if (!canvasSupport()) {
return;
}
function  drawScreen () {
212  |  Chapter 5: Math, Physics, and Animation
C# PDF Page Extract Library: copy, paste, cut PDF pages in C#.net
to extract single or multiple pages from adobe PDF file and save into a The portable document format, known as PDF document, is a widely-used form of file
saving pdf forms in acrobat reader; pdf form save in reader
C# Image: Save or Print Document and Image in Web Viewer
or image, you can easily save the changes to DLL Library, including documents TIFF, PDF, Excel, Word string fileName = Request.Form["saveFileName"]; string fid
extract data from pdf file to excel; extract pdf form data to excel
context.fillStyle = '#EEEEEE';
context.fillRect(00theCanvas.width, theCanvas.height);
//Box
context.strokeStyle = '#000000';
context.strokeRect(1 1theCanvas.width-2, theCanvas.height-2);
//Place balls
context.fillStyle = "#000000";
var ball;
for (var i = 0i <balls.lengthi++) {
ball = balls[i];
ball.x += ball.xunits;
ball.y += ball.yunits;
context.beginPath();
context.arc(ball.x,ball.y,ball.radius,0,Math.PI*2,true);
context.closePath();
context.fill();
if (ball.x > theCanvas.width || ball.x < 0 ) {
ball.angle = 180 - ball.angle;
updateBall(ball);
else if (ball.y > theCanvas.height || ball.y < 0) {
ball.angle = 360 - ball.angle;
updateBall(ball);
}
}
}
function updateBall(ball) {
ball.radians = ball.angle * Math.PI/ 180;
ball.xunits = Math.cos(ball.radians) * ball.speed;
ball.yunits = Math.sin(ball.radians) * ball.speed;
}
var numBalls = 100 ;
var maxSize = 8;
var minSize = 5;
var maxSpeed = maxSize+5;
var balls = new Array();
var tempBall;
var tempX;
var tempY;
var tempSpeed;
var tempAngle;
var tempRadius;
var tempRadians;
Bouncing Off Walls  |  213
C# PDF Convert to Tiff SDK: Convert PDF to tiff images in C#.net
Description: Convert to DOCX/TIFF with specified zoom value and save it into stream. Parameters: zoomValue, The magnification of the original PDF page size.
c# read pdf form fields; extract data from pdf table
C# Create PDF from Tiff Library to convert tif images to PDF in C#
Description: Convert to PDF and save it on the disk. Parameters: Name, Description, Valid Value. Description: Convert to PDF and save it into stream. Parameters:
flatten pdf form in reader; extract data out of pdf file
var tempXunits;
var tempYunits;
theCanvas = document.getElementById("canvasOne");
context = theCanvas.getContext("2d");
for (var i = 0i < numBalls; i++) {
tempRadius = Math.floor(Math.random()*maxSize)+minSize;
tempX = tempRadius*2 + (Math.floor(Math.random()*theCanvas.width)-tempRadius*2);
tempY = tempRadius*2 + (Math.floor(Math.random()*theCanvas.height)-tempRadius*2);
tempSpeed = maxSpeed-tempRadius;
tempAngle = Math.floor(Math.random()*360);
tempRadians = tempAngle * Math.PI/ 180;
tempXunits = Math.cos(tempRadians) * tempSpeed;
tempYunits = Math.sin(tempRadians) * tempSpeed;
tempBall = {x:tempX,y:tempY,radius:tempRadiusspeed:tempSpeed, angle:tempAngle,
xunits:tempXunitsyunits:tempYunits}
balls.push(tempBall);
}
function gameLoop() {
window.setTimeout(gameLoop20);
drawScreen()
}
gameLoop();
}
</script>
</head>
<body>
<div style="position: absolute; top: 50px; left: 50px;">
<canvas id="canvasOne" width="500" height="500">
Your browser does not support HTML5 Canvas.
</canvas>
</div>
</body>
</html>
Multiple Balls Bouncing with a Dynamically Resized Canvas
Before we move on to more complex interaction among balls, let’s try one more thing.
Back in Chapter 3, we resized the canvas with some HTML5 form controls to display
text in the center of the canvas. Well, let’s do the same thing now with the ball example.
This will give you a better idea of how we can make objects interact with a dynamically
resizing canvas.
214  |  Chapter 5: Math, Physics, and Animation
C# PDF Convert to Word SDK: Convert PDF to Word library in C#.net
key. Quick to remove watermark and save PDF text, image, table, hyperlink and bookmark to Word without losing format. Powerful components
how to save a filled out pdf form in reader; how to fill out pdf forms in reader
C# Create PDF from PowerPoint Library to convert pptx, ppt to PDF
Description: Convert to PDF/TIFF and save it on the disk. Parameters: Description: Convert to PDF/TIFF and save it into stream. Parameters:
exporting data from pdf to excel; fill in pdf form reader
First, in the HTML, we create two HTML5 range controls, one for width and one for
height, and set their maximum values to 1000. We will use these controls to set the
width and height of the canvas at runtime:
<form>
Canvas Width:  <input type="range" id="canvasWidth"
min="0"
max="1000"
step="1"
value="500"/>
<br>
Canvas Height:  <input type="range" id="canvasHeight"
min="0"
max="1000"
step="1"
value="500"/>
<br>
</form>
In canvasApp(), we create the event listeners for the HTML5 form controls. We listen
for the change event, which means that any time the range control is moved, the event
handlers will be called:
formElement = document.getElementById("canvasWidth")
formElement.addEventListener('change'canvasWidthChangedfalse);
formElement = document.getElementById("canvasHeight")
formElement.addEventListener('change'canvasHeightChangedfalse);
The event handler functions capture the changes to the range, set theCanvas.width or
theCanvas.height, and then call drawScreen() to render the new size. Without a call
to drawScreen()  here,  the  canvas  will  blink  when  the  new  size  is  applied  in
drawScreen() on the next interval:
function canvasWidthChanged(e) {
var target = e.target;
theCanvas.width = target.value;
drawScreen();
}
function canvasHeightChanged(e) {
var target = e.target;
theCanvas.height = target.value;
drawScreen();
}
Bouncing Off Walls  |  215
All of this is explained in gory detail in Chapter 3.
One last thing—let’s increase the number of balls set in canvasApp() to 500:
var numBalls = 500 ;
Now, check out Example 5-6 (CH5EX6.html from the code distribution). When you
run the code in a web browser, you should see 500 balls bounce around the canvas, as
shown in Figure 5-8. When you increase the width or height using the range controls,
they continue moving until they hit the new edge of the canvas. If you make the canvas
smaller, the balls will be contained within the smaller space. If you adjust the size too
rapidly, some balls will be lost off the canvas, but they will reappear when the canvas is
resized. Neat, huh?
Figure 5-8. Multiple balls bouncing while the canvas is resized on the fly
Example 5-6. Multiple ball bounce with dynamically resized canvas
<!doctype html>
<html lang="en">
<head>
216  |  Chapter 5: Math, Physics, and Animation
<meta charset="UTF-8">
<title>CH5EX6: Multiple Ball Bounce With Resize</title>
<script src="modernizr.js"></script>
<script type="text/javascript">
window.addEventListener('load'eventWindowLoadedfalse);
function eventWindowLoaded() {
canvasApp();
}function canvasSupport () {
return Modernizr.canvas;
}
function canvasApp() {
if (!canvasSupport()) {
return;
}
formElement = document.getElementById("canvasWidth")
formElement.addEventListener('change'canvasWidthChanged, false);
formElement = document.getElementById("canvasHeight")
formElement.addEventListener('change'canvasHeightChangedfalse);
function  drawScreen () {
context.fillStyle = '#EEEEEE';
context.fillRect(00theCanvas.width, theCanvas.height);
//Box
context.strokeStyle = '#000000';
context.strokeRect(1 1theCanvas.width-2, theCanvas.height-2);
//Place balls
context.fillStyle = "#000000";
var ball;
for (var i = 0i <balls.lengthi++) {
ball = balls[i];
ball.x += ball.xunits;
ball.y += ball.yunits;
context.beginPath();
context.arc(ball.x,ball.y,ball.radius,0,Math.PI*2,true);
context.closePath();
context.fill();
if (ball.x > theCanvas.width || ball.x < 0 ) {
ball.angle = 180 - ball.angle;
updateBall(ball);
else if (ball.y > theCanvas.height || ball.y < 0) {
ball.angle = 360 - ball.angle;
updateBall(ball);
}
Bouncing Off Walls  |  217
}
}
function updateBall(ball) {
ball.radians = ball.angle * Math.PI/ 180;
ball.xunits = Math.cos(ball.radians) * ball.speed;
ball.yunits = Math.sin(ball.radians) * ball.speed;
}
var numBalls = 500 ;
var maxSize = 8;
var minSize = 5;
var maxSpeed = maxSize+5;
var balls = new Array();
var tempBall;
var tempX;
var tempY;
var tempSpeed;
var tempAngle;
var tempRadius;
var tempRadians;
var tempXunits;
var tempYunits;
theCanvas = document.getElementById("canvasOne");
context = theCanvas.getContext("2d");
for (var i = 0i < numBalls; i++) {
tempRadius = Math.floor(Math.random()*maxSize)+minSize;
tempX = tempRadius*2 + (Math.floor(Math.random()*theCanvas.width)-tempRadius*2);
tempY = tempRadius*2 + (Math.floor(Math.random()*theCanvas.height)-tempRadius*2);
tempSpeed = maxSpeed-tempRadius;
tempAngle = Math.floor(Math.random()*360);
tempRadians = tempAngle * Math.PI/ 180;
tempXunits = Math.cos(tempRadians) * tempSpeed;
tempYunits = Math.sin(tempRadians) * tempSpeed;
tempBall = {x:tempX,y:tempY,radius:tempRadiusspeed:tempSpeed, angle:tempAngle,
xunits:tempXunitsyunits:tempYunits}
balls.push(tempBall);
}
function gameLoop() {
window.setTimeout(gameLoop20);
drawScreen()
}
gameLoop();
218  |  Chapter 5: Math, Physics, and Animation
Documents you may be interested
Documents you may be interested