(5) A bouncing ball...

Some classic programming example involves a ball that is bouncing back and forth when reaching the edge of the screen. It is part of the action in some classic games starting with breakout . So how is that done? Well, take a look at this basic program:

// Run once at start
void setup() {
  // 500 pixels wide, 400 pixel height
  // This call will set system variables (width, height)
  size(500, 400);
}

// Variables to keep track of position and speed of ball
int x = 0;
int y = 0;
int x_speed = 5;
int y_speed = 5;

// Called every re-draw, defaul 30 times per second
void draw() {

  // Clear screen to black
  background(0);
  // Set fill color to white
  fill(255);
  // Draw a circle at position x,y, 10 pixels large
  ellipse(x, y, 10, 10);
  // Update position by adding speed
  x = x + x_speed;
  y = y + y_speed;
}

If you enter it into the processing editor, or simple copy it, and then run you will see this:

But... that is not quite right is it? The ball starts off but when it reaches the bottom then it disappears... Not what we want. Solution? Add this lines before the last curly bracket "}":

  if (y>height) 
    y_speed = -y_speed;

Now re-run... All good? Well yes, it bounces when it reaches the bottom, but then it is gone again. We need to detect when the x is also out of range. Add:

  if (x>width)  
    x_speed = -x_speed;

Now, re-run. When the ball reached the bottom or the right side, we reverse the speed and it looks like it is bouncing. But we still have a problem. We also need to detect the upper side and the left side. There are two ways to write this. Compare the x and y in these two:

  if (y>height) 
    y_speed = -y_speed;
  else if (y<0)
    y_speed = -y_speed;
  if (x>width || x<0)  
    x_speed = -x_speed;

They both do the job. The "||" sign mean logical OR. I.e. if (x>width) OR (x<0) then do the next statement. Since the same is happening for both cases, this is more compact and easier to write and read. Job done. Whole program is now:

// Run once at start
void setup() {
  // 500 pixels wide, 400 pixel height
  // This call will set system variables (width, height)
  size(500, 400);
}

// Variables to keep track of position and speed of ball
int x = 0;
int y = 0;
int x_speed = 5;
int y_speed = 5;

// Called every re-draw, defaul 30 times per second
void draw() {

  // Clear screen to black
  background(0);
  // Set fill color to white
  fill(255);
  // Draw a circle at position x,y, 10 pixels large
  ellipse(x, y, 10, 10);
  // Update position by adding speed
  x = x + x_speed;
  y = y + y_speed;
  if (y>height) 
    y_speed = -y_speed;
  else if (y<0)
    y_speed = -y_speed;
  if (x>width || x<0)  
    x_speed = -x_speed;
}

And that keeps the ball bouncing until the end of time...