Difference between revisions of "More Balls In A Box"

From CodeStuff
Jump to: navigation, search
(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...")
 
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 boxTop=130, boxLeft=120;  //the top left corner of the box is 130,120
−
 
 
var boxWidth=400, boxHeight=300;
 
var boxWidth=400, boxHeight=300;
  
Line 13: Line 12:
  
 
function move() {
 
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
 
   //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
 
   //        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  
 
   //draw the ball  
−
   fillCircle(cx,cy,4);
+
   fillCircle(ball_1.cx,ball_1.cy,4);
  
 
   //draw the box
 
   //draw the box
Line 36: Line 34:
 
}
 
}
  
−
run(move,draw);
+
run(move,draw);</edcode>
−
</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
 +
    var ball_1 = {cx:320, cy:240, dx:3, dy:-3};
 +
    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};
 +
var ball_3 = {cx:340, cy:440, dx:-3, dy:3};
 +
var ball_4 = {cx:350, cy:140, dx:3, dy:3};
 +
 
 +
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 moveBall(ball) {
 +
  ball.cx+=ball.dx;
 +
  ball.cy+=ball.dy;
 +
 
 +
  //check to see if cx has crossed the left or right edges of the box
 +
  if (ball.cx<boxLeft) ball.dx=3;
 +
  if (ball.cx>boxRight) ball.dx=-3;
 +
  //        and if cy has crossed the top or bottom edges of the box
 +
  if (ball.cy<boxTop) ball.dy=3;
 +
  if (ball.cy>boxBottom) ball.dy=-3;
 +
}
 +
 
 +
function move() {
 +
  moveBall(ball_1);
 +
  moveBall(ball_2);
 +
  moveBall(ball_3);
 +
  moveBall(ball_4);
 +
}
 +
 
 +
function draw() {
 +
  clear();
 +
 
 +
  //draw the balls
 +
  fillCircle(ball_1.cx,ball_1.cy,4);
 +
  fillCircle(ball_2.cx,ball_2.cy,4);
 +
  fillCircle(ball_3.cx,ball_3.cy,4);
 +
  fillCircle(ball_4.cx,ball_4.cy,4);
 +
 
 +
  //draw the box
 +
  setColour('red');
 +
  drawRectangle(boxLeft,boxTop,boxWidth,boxHeight);
 +
}
 +
 
 +
run(move,draw);</edcode>
 +
 
 +
You can even bundle the variables for the box to make multiple balls and multiple boxes.
 +
 
 +
<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};
 +
var ball_3 = {cx:340, cy:440, dx:-3, dy:3};
 +
var ball_4 = {cx:350, cy:140, dx:3, dy:3};
 +
 
 +
var box_1 = {left:320, top:130, width:200, height:150};
 +
var box_2 = {left:120, top:300, width:400, height:150};
 +
 
 +
function moveBall(ball,box) {
 +
  ball.cx+=ball.dx;
 +
  ball.cy+=ball.dy;
 +
 
 +
  var boxBottom=box.top+box.height; //The bottom right corner of the box can be calculated by adding the width and height to the left and top values
 +
  var boxRight=box.left+box.width;
 +
 
 +
  //check to see if cx has crossed the left or right edges of the box
 +
  if (ball.cx<box.left) ball.dx=3;
 +
  if (ball.cx>boxRight) ball.dx=-3;
 +
  //        and if cy has crossed the top or bottom edges of the box
 +
  if (ball.cy<box.top) ball.dy=3;
 +
  if (ball.cy>boxBottom) ball.dy=-3;
 +
}
 +
 
 +
function move() {
 +
  moveBall(ball_1,box_1);
 +
  moveBall(ball_2,box_2);
 +
  moveBall(ball_3,box_2);
 +
  moveBall(ball_4,box_1);
 +
}
 +
 
 +
function draw() {
 +
  clear();
 +
 
 +
  //draw the balls
 +
  fillCircle(ball_1.cx,ball_1.cy,4);
 +
  fillCircle(ball_2.cx,ball_2.cy,4);
 +
  fillCircle(ball_3.cx,ball_3.cy,4);
 +
  fillCircle(ball_4.cx,ball_4.cy,4);
 +
 
 +
  //draw the box
 +
  setColour('red');
 +
  drawRectangle(box_1.left,box_1.top,box_1.width,box_1.height);
 +
  drawRectangle(box_2.left,box_2.top,box_2.width,box_2.height);
 +
}
 +
 
 +
run(move,draw);</edcode>

Revision as of 21:08, 2 February 2012

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 ball_1 = {cx:320, cy:240, dx:3, dy:-3};

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.

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,

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 "ball_1.". 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 

   var ball_1 = {cx:320, cy:240, dx:3, dy:-3};
   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.


You can even bundle the variables for the box to make multiple balls and multiple boxes.


Retrieved from "https://fingswotidun.com/code/index.php?title=More_Balls_In_A_Box&oldid=166"