More Balls In A Box - Revision history

Lerc: moved Many Balls In A Box to More Balls In A Box

2012-02-02T21:46:54Z

moved Many Balls In A Box to More Balls In A Box

Lerc at 21:11, 2 February 2012

2012-02-02T21:11:08Z

Lerc at 21:08, 2 February 2012

2012-02-02T21:08:25Z

Lerc: Created page with " var cx=320; //cx,cy is the position of the ball var cy=240; // 320,240 is the starting position var dx=3; //dx is difference between the current x position and..."

2012-02-02T19:27:36Z

Created page with "<edcode> var cx=320; //cx,cy is the position of the ball var cy=240; // 320,240 is the starting position var dx=3; //dx is difference between the current x position and..."

New page

<edcode>
var cx=320; //cx,cy is the position of the ball
var cy=240; // 320,240 is the starting position

var dx=3; //dx is difference between the current x position and the next x position
var dy=-3; //dy is difference between the current x position and the next y position

var boxTop=130, boxLeft=120; //the top left corner of the box is 130,120

var boxWidth=400, boxHeight=300;

var boxBottom=boxTop+boxHeight, boxRight=boxLeft+boxWidth; //The bottom right corner of the box can be calculated by adding the width and height to the left and top values

function move() {
//adding the difference moves the ball
cx+=dx;
cy+=dy;

//check to see if cx has crossed the left or right edges of the box
if (cx<boxLeft) dx=3;
if (cx>boxRight) dx=-3;
// and if cy has crossed the top or bottom edges of the box
if (cy<boxTop) dy=3;
if (cy>boxBottom) dy=-3;
}

function draw() {
clear();

//draw the ball
fillCircle(cx,cy,4);

//draw the box
setColour('red');
drawRectangle(boxLeft,boxTop,boxWidth,boxHeight);
}

run(move,draw);
</edcode>

@@ Line 35: / Line 35: @@
 run(move,draw);</edcode>
 Bundling the values into a single object does not have much benefit for just one thing.  The program is more or less the same except for extra occurrences of "<tt>ball_1.</tt>".  When you want to have more than one of something it can save a lot of space and time.  We can make two balls like this
@@ Line 40: / Line 41: @@
      var ball_2 = {cx:330, cy:340, dx:-3, dy:-3};
 Because ball_1 and ball_2 have the same parts,  you can write a single piece of code to handle them both.  The program below does this by making the function moveBall(ball) which does all the work required to move a ball.  The move() function now calls moveBall() once for each ball making every ball move.
 <edcode name="part2">var ball_1 = {cx:320, cy:240, dx:3, dy:-3};
 var ball_2 = {cx:330, cy:340, dx:-3, dy:-3};
@@ Line 86: / Line 86: @@
 run(move,draw);</edcode>
 <edcode name="part3">var ball_1 = {cx:320, cy:240, dx:3, dy:-3};
 var ball_2 = {cx:330, cy:340, dx:-3, dy:-3};

← Older revision	Revision as of 21:46, 2 February 2012
(No difference)

@@ Line 1: / Line 1: @@
-<edcode>
+In [[A Ball In A Box]] we were shown how to make a single ball bounce around.  The ball used four variables cx,cy,dx,dy two for the position and two for the velocity.  If we wanted to have many balls bouncing around at once making four new variable names for each ball would make things very difficult to manage.  Luckily you can bundle variables up together.
-var cx=320;  //cx,cy is the position of the ball
+    var ball_1 = {cx:320, cy:240, dx:3, dy:-3};
-var cy=240;  // 320,240 is the starting position
+Makes a single variable called ball_1 with four parts. You can use the parts of ball_1 by using a dot.  ball_1.cx is the cx part of ball_1.
-var dx=3;    //dx is difference between the current x position and the next x position
+The program below, works the same way as the one from [[A Ball In A Box]]. The only difference is the ball variables have been bundled into the one object,
-var dy=-3;   //dy is difference between the current x position and the next y position
+<edcode>var ball_1 = {cx:320, cy:240, dx:3, dy:-3};
 var boxTop=130, boxLeft=120;  //the top left corner of the box is 130,120
 var boxWidth=400, boxHeight=300;
@@ Line 13: / Line 12: @@
 function move() {
-   //adding the difference moves the ball
+   ball_1.cx+=ball_1.dx;
-  cx+=dx;
+   ball_1.cy+=ball_1.dy;
    cy+=dy;
    //check to see if cx has crossed the left or right edges of the box
-   if (cx<boxLeft) dx=3;
+   if (ball_1.cx<boxLeft) ball_1.dx=3;
-   if (cx>boxRight) dx=-3;
+   if (ball_1.cx>boxRight) ball_1.dx=-3;
    //         and if cy has crossed the top or bottom edges of the box
-   if (cy<boxTop) dy=3;
+   if (ball_1.cy<boxTop) ball_1.dy=3;
-   if (cy>boxBottom) dy=-3;
+   if (ball_1.cy>boxBottom) ball_1.dy=-3;
+}
@@ Line 29: / Line 27: @@
    //draw the ball
-   fillCircle(cx,cy,4);
+   fillCircle(ball_1.cx,ball_1.cy,4);
    //draw the box
@@ Line 36: / Line 34: @@
+}
-run(move,draw);
+run(move,draw);</edcode>
 </edcode>