Computing Education, Processing, Programming

Thinking Through A Basic Pong Game in Processing

17 Comments

The Problem: Create a basic 1970s style Pong game for one player using the Processing programming language. The paddle will be on the right and the ball will bounce off of the three other sides. If the ball passes the paddle while the ball is traveling to the right, game play ends. The paddle will be controlled by the keyboard’s UP and DOWN arrow keys.

The purpose of this article is to present my problem solving process as I create Pong. I’m going to deliberately walk through the process as a novice programmer might. Students rarely get to see how their instructors think through a problem, unless the instructor live-codes in front of them. But, even then, students are confused by the changing dynamics of the solution as the instructor begins to understand the problem better and refactors his or her code in real-time.

First, let me make sure I understand the problem space. A quick diagram often helps:

initial sketch

  • There’s a playing field of some unspecified dimensions
  • there’s a ball (a circle)

Ok, that seems like a good start. Now, let me do the simplest thing that can possibly work to represent what I know about the game. In Processing, there’s a standard skeleton for basic programs:

  1. void setup() {
  2. }
  3.  
  4. void draw() {
  5. }

Now, let me create the playing field (window) in the setup method and create a ball (circle or ellipse) in the draw method. The Processing reference manual tells me that when drawing an ellipse, the default drawing mode assumes that the ellipse method takes four arguments: x and y coordinates for the center of the ellipse and width and height values for the horizontal and vertical diameters of the ellipse.

Further, the setup method is executed just once, before the program gets started. The draw method is an implicit loop in Processing; it gets called many times per second to redraw the window.

  1. void setup() {
  2. size(400, 400);
  3. }
  4.  
  5. void draw() {
  6. ellipse(20, 20, 20, 20);
  7. }

If I run my code, I get a 400 by 400 pixel window and a circle located at (20,20) that is 20 pixels wide and 20 pixels high, but so far, it just sits there.

  • the ball moves from left to right

Well, that implies that the x and y coordinates of the ellipse need to vary, so I’m going to need to refactor my code to use variables for the x and y coordinates of the ball. When I refactor, I want to reorganize my code, but not change the functionality: the code should be organized better, but the program should do the same thing. I like to use obvious variable names, so my code is easy to read and understand, so I’ll use “ballX” and “ballY”. (nota bene: when you find yourself prefixing variable names with the name of objects you’re manipulating, it suggests strongly that you should consider object-oriented design/programming.)

  1. float ballX = 20;
  2. float ballY = 20;
  3.  
  4. void setup() {
  5. size(400, 400);
  6. }
  7.  
  8. void draw() {
  9. ellipse(ballX, ballY, 20, 20);
  10. }

I run my code again, and indeed it behaves exactly the same as it did before the refactor. Now, I’ll add the least code I can to get the ball to move from left to right a little bit each time it’s drawn. It’s often difficult for novices to break down a task like “move the ball to the right side of the screen” into the smaller, discrete steps necessary to get the task done. The key, I think, is to think of a loop (in this case, the implicit loop of the draw method) like a flipbook animation from your childhood. You’re not going to just magically have the ball appear at the right edge of the window. Instead, you’re going to move the ball just a little toward the right edge each time it’s drawn.

It’s probably best for me to think about how much of a change I want ballX to undergo during each drawing cycle. It’s customary to refer to a small change in x as “dX”, the “delta x” or “change in x” value. Since x represents the number of pixels from the left edge of the window, adding just 2 pixels to the ball’s location each time it is drawn should have a smooth animation effect. So, I’ll set the initial value of dX to 2 and add dX to ballX each time the draw method is executed.

  1. float ballX = 20;
  2. float ballY = 20;
  3. float dX = 2;
  4.  
  5. void setup() {
  6. size(400, 400);
  7. }
  8.  
  9. void draw() {
  10. ellipse(ballX, ballY, 20, 20);
  12. ballX = ballX + dX;
  13. }

When I run my code, the ball moves!! Not well, but… it moves! Each drawing of the ball is being left on the playing field. In Processing, to start each drawing cycle with a clean window, you set the background of the window. Here, I’ll set it to a solid color using the RGB color model: (255, 255, 255), which is the value I want for red, green, and blue components of the color. Setting them all to 255 causes the background to be white.

  1. float ballX = 20;
  2. float ballY = 20;
  3. float dX = 2;
  4.  
  5. void setup() {
  6. size(400, 400);
  7. }
  8.  
  9. void draw() {
  10. background(255, 255, 255);
  11. ellipse(ballX, ballY, 20, 20);
  12.  
  13. ballX = ballX + dX;
  14. }

When I re-run it, the ball now moves cleanly… and keeps moving, right off the right side of the window. I want to add code that says that if the ball reaches the right side of the window, it should move back the other way. That’s not ultimately how game play will work, but I want to be able to see the ball moving around successfully, before I worry about how the game ends. I know that in this particular case, the right side of the window is at x coordinate 400, because that’s how big I made the window in the setup method. So, if the ball’s x position reaches (or passes) 400 pixels, I’ll reverse the direction of the change (dX). If a dX value of 2 moves the ball 2 pixels to the right, then a dX value of -2 would move the ball 2 pixels to the left. So all I should need to do is change the sign of dX (lines 13-15). Notice that I’ve added a comment at line 14 using the // notation. Generally, comments should describe why you’re writing the code, not how; the code itself tells me how.

  1. float ballX = 20;
  2. float ballY = 20;
  3. float dX = 2;
  4.  
  5. void setup() {
  6. size(400, 400);
  7. }
  8.  
  9. void draw() {
  10. background(255, 255, 255);
  11. ellipse(ballX, ballY, 20, 20);
  12.  
  13. if (ballX > 400) {
  14. dX = -dX; // if dX == 2, it becomes -2; if dX is -2, it becomes 2
  15. }
  16.  
  17. ballX = ballX + dX;
  18. }

If I run the code, I get a ball that bounces off of the right side of the window, then disappears off the left side!

  • the ball bounces when it hits the left of the playing field

Well, I know that the left side of the window is at x coordinate 0 (zero), so I can repeat my code that handles bouncing on the right side (lines 13-15) and change it a little to handle bouncing on the left side of the window.

  1. float ballX = 20;
  2. float ballY = 20;
  3. float dX = 2;
  4.  
  5. void setup() {
  6. size(400, 400);
  7. }
  8.  
  9. void draw() {
  10. background(255, 255, 255);
  11. ellipse(ballX, ballY, 20, 20);
  12.  
  13. if (ballX > 400) {
  14. dX = -dX; // if dX == 2, it becomes -2; if dX is -2, it becomes 2
  15. }
  16.  
  17. if (ballX < 0) {
  18. dX = -dX; // if dX == 2, it becomes -2; if dX is -2, it becomes 2
  19. }
  20.  
  21. ballX = ballX + dX;
  22. }

This seems to give me the bouncing ball I want, but I’m bothered by the magic number 400 I’ve used at line 13. In general, I won’t know how wide or high the playing field window is. I need to use a variable that represents the width of the window and, fortunately, Processing provides such a variable for me already: width.

  1. float ballX = 20;
  2. float ballY = 20;
  3. float dX = 2;
  4.  
  5. void setup() {
  6. size(400, 400);
  7. }
  8.  
  9. void draw() {
  10. background(255, 255, 255);
  11. ellipse(ballX, ballY, 20, 20);
  12.  
  13. if (ballX > width) {
  14. dX = -dX; // if dX == 2, it becomes -2; if dX is -2, it becomes 2
  15. }
  16.  
  17. if (ballX < 0) {
  18. dX = -dX; // if dX == 2, it becomes -2; if dX is -2, it becomes 2
  19. }
  20.  
  21. ballX = ballX + dX;
  22. }

So far, I’ve only addressed the ball’s movement left and right. It doesn’t move up and down at all. Let me write a few lines of code (lines 4 and 23, below) just the way I’ve handled dX and create a dY variable that behaves similarly.

  1. float ballX = 20;
  2. float ballY = 20;
  3. float dX = 2;
  4. float dY = 2;
  5.  
  6. void setup() {
  7. size(400, 400);
  8. }
  9.  
  10. void draw() {
  11. background(255, 255, 255);
  12. ellipse(ballX, ballY, 20, 20);
  13.  
  14. if (ballX > width) {
  15. dX = -dX; // if dX == 2, it becomes -2; if dX is -2, it becomes 2
  16. }
  17.  
  18. if (ballX < 0) {
  19. dX = -dX; // if dX == 2, it becomes -2; if dX is -2, it becomes 2
  20. }
  21.  
  22. ballX = ballX + dX;
  23. ballY = ballY + dY;
  24. }

Well that seems OK… the ball bounces from the upper-left corner to the lower-right corner, but it’s not very interesting. Let me spice things up a little by changing the magic numbers I’ve used for dX and dY to random numbers in the range [+1..+2] at lines 3 and 4.

  1. float ballX = 20;
  2. float ballY = 20;
  3. float dX = random(1, 2);
  4. float dY = random(1, 2);
  5.  
  6. void setup() {
  7. size(400, 400);
  8. }
  9.  
  10. void draw() {
  11. background(255, 255, 255);
  12. ellipse(ballX, ballY, 20, 20);
  13.  
  14. if (ballX > width) {
  15. dX = -dX; // if dX == 2, it becomes -2; if dX is -2, it becomes 2
  16. }
  17.  
  18. if (ballX < 0) {
  19. dX = -dX; // if dX == 2, it becomes -2; if dX is -2, it becomes 2
  20. }
  21.  
  22. ballX = ballX + dX;
  23. ballY = ballY + dY;
  24. }

When I run it a few times, I notice that the ball works well, if it happens to reach the right and left sides of the window, but when it reaches the top or bottom of the window, it disappears. I can add two additional if statements similar to the two I already have, but this time they’ll work with the variables ballY and dY. Also, the new code (lines 22-28, below) doesn’t need to know about the width of the window, but it does need to know about the height of the window and, again, Processing provides us with a convenient variable named height.

  • the ball bounces when it hits the top of the playing field
  • the ball bounces when it hits the bottom of the playing field
  1. float ballX = 20;
  2. float ballY = 20;
  3. float dX = random(1, 2);
  4. float dY = random(1, 2);
  5.  
  6. void setup() {
  7. size(400, 400);
  8. }
  9.  
  10. void draw() {
  11. background(255, 255, 255);
  12. ellipse(ballX, ballY, 20, 20);
  13.  
  14. if (ballX > width) {
  15. dX = -dX; // if dX == 2, it becomes -2; if dX is -2, it becomes 2
  16. }
  17.  
  18. if (ballX < 0) {
  19. dX = -dX; // if dX == 2, it becomes -2; if dX is -2, it becomes 2
  20. }
  21.  
  22. if (ballY > height) {
  23. dY = -dY; // if dY == 2, it becomes -2; if dY is -2, it becomes 2
  24. }
  25.  
  26. if (ballY < 0) {
  27. dY = -dY; // if dY == 2, it becomes -2; if dY is -2, it becomes 2
  28. }
  29.  
  30. ballX = ballX + dX;
  31. ballY = ballY + dY;
  32. }

Alright, now that the ball seems to be moving around well, I’ll turn my attention to the paddle.

  • there’s a paddle (a rectangle) near the right of the playing field

I’m going to make some assumptions about the placement of the paddle. First, it won’t be touching the right side of the window. Second, it will be 10 pixels wide and 30 pixels tall. I’m also placing it arbitrarily 10 pixels from the top of the window. I’m pulling these numbers out of thin air (they’re magic numbers), so I may well need to change them or replace them with variables later.

  1. float ballX = 20;
  2. float ballY = 20;
  3. float dX = random(1, 2);
  4. float dY = random(1, 2);
  5.  
  6. void setup() {
  7. size(400, 400);
  8. }
  9.  
  10. void draw() {
  11. background(255, 255, 255);
  12. ellipse(ballX, ballY, 20, 20);
  13.  
  14. rect(width – 15, 10, 10, 30);
  15.  
  16. if (ballX > width) {
  17. dX = -dX; // if dX == 2, it becomes -2; if dX is -2, it becomes 2
  18. }
  19.  
  20. if (ballX < 0) {
  21. dX = -dX; // if dX == 2, it becomes -2; if dX is -2, it becomes 2
  22. }
  23.  
  24. if (ballY > height) {
  25. dY = -dY; // if dY == 2, it becomes -2; if dY is -2, it becomes 2
  26. }
  27.  
  28. if (ballY < 0) {
  29. dY = -dY; // if dY == 2, it becomes -2; if dY is -2, it becomes 2
  30. }
  31.  
  32. ballX = ballX + dX;
  33. ballY = ballY + dY;
  34. }

So, now I have an unmoving, inert paddle! Well, it’s progress… I’ll deal with the movement of the paddle, first. I know that I want to change the vertical position of the paddle, which is its y coordinate. So far, the position of the paddle has been hard coded with the magic number 10 (in line 14, above). I’ll need to refactor that into a variable, since its value will change over time, much like ballX and ballY. I’ll call it paddleY, to be consistent and obvious.

  1. float ballX = 20;
  2. float ballY = 20;
  3. float dX = random(1, 2);
  4. float dY = random(1, 2);
  5. float paddleY = 10;
  6.  
  7. void setup() {
  8. size(400, 400);
  9. }
  10.  
  11. void draw() {
  12. background(255, 255, 255);
  13. ellipse(ballX, ballY, 20, 20);
  14.  
  15. rect(width – 15, paddleY, 10, 30);
  16.  
  17. if (ballX > width) {
  18. dX = -dX; // if dX == 2, it becomes -2; if dX is -2, it becomes 2
  19. }
  20.  
  21. if (ballX < 0) {
  22. dX = -dX; // if dX == 2, it becomes -2; if dX is -2, it becomes 2
  23. }
  24.  
  25. if (ballY > height) {
  26. dY = -dY; // if dY == 2, it becomes -2; if dY is -2, it becomes 2
  27. }
  28.  
  29. if (ballY < 0) {
  30. dY = -dY; // if dY == 2, it becomes -2; if dY is -2, it becomes 2
  31. }
  32.  
  33. ballX = ballX + dX;
  34. ballY = ballY + dY;
  35. }

To be completely consistent, I’d like to replace my magic use of “width – 15” (line 15, above) with a variable (line 17, below), too. It’s the x coordinate of the paddle, so I’ll create a paddleX variable, just like the paddleY variable. I’m going to run into one problem, though. The variables I define (lines 1-6, below) are declared and initialized before the setup method executes. That means that the size of the window hasn’t been set yet (line 8), so I can’t initialize the value of paddleX, since it’s determined relative to the width of the window. I can only declare my intention to use it (line 5). Later, after the size of the window has been set (line 9), then I can initialize the value of paddleY (line 10) and replace my magic number with the variable (line 17).

  1. float ballX = 20;
  2. float ballY = 20;
  3. float dX = random(1, 2);
  4. float dY = random(1, 2);
  5. float paddleX;
  6. float paddleY = 10;
  7.  
  8. void setup() {
  9. size(400, 400);
  10. paddleX = width – 15;
  11. }
  12.  
  13. void draw() {
  14. background(255, 255, 255);
  15. ellipse(ballX, ballY, 20, 20);
  16.  
  17. rect(paddleX, paddleY, 10, 30);
  18.  
  19. if (ballX > width) {
  20. dX = -dX; // if dX == 2, it becomes -2; if dX is -2, it becomes 2
  21. }
  22.  
  23. if (ballX < 0) {
  24. dX = -dX; // if dX == 2, it becomes -2; if dX is -2, it becomes 2
  25. }
  26.  
  27. if (ballY > height) {
  28. dY = -dY; // if dY == 2, it becomes -2; if dY is -2, it becomes 2
  29. }
  30.  
  31. if (ballY < 0) {
  32. dY = -dY; // if dY == 2, it becomes -2; if dY is -2, it becomes 2
  33. }
  34.  
  35. ballX = ballX + dX;
  36. ballY = ballY + dY;
  37. }
  • the paddle can move up and down using the keyboard’s UP and DOWN arrow keys as input

Let’s deal with the problem of having the paddle respond to key presses, now. I do a quick search of the Processing Reference web pages and find some example code for the keyCode property that is close to what I want to do.

  1. color fillVal = color(126);
  2.  
  3. void draw() {
  4. fill(fillVal);
  5. rect(25, 25, 50, 50);
  6. }
  7.  
  8. void keyPressed() {
  9. if (key == CODED) {
  10. if (keyCode == UP) {
  11. fillVal = 255;
  12. } else if (keyCode == DOWN) {
  13. fillVal = 0;
  14. }
  15. } else {
  16. fillVal = 126;
  17. }
  18. }

In their example, pressing the arrow keys results in a changed fill color (lines 10-14, above). For my pong game, I want the arrow keys to change the value of paddleY, the paddle’s vertical position. The variables, draw method (1-6), and else statement (lines 11-13) from the example are irrelevant to my pong game.

As a programmer I often need to find examples of how a task is performed in a given language, and then modify the example to match my circumstances better. When I do that, it’s good practice to add a comment explaining where I got the original code and acknowledging that it’s not my original creation. First, it provides me and other programmers with a road map, if I or they ever need to maintain the program I’ve written. Second, it makes clear which parts of the code are my original creation and which I’ve borrowed from other sources. If I were writing an English essay, I would use quotation marks and proper citations. When writing code, I add comments and provide URLs, email addresses, etc. to cite my sources.

  1. float ballX = 20;
  2. float ballY = 20;
  3. float dX = random(1, 2);
  4. float dY = random(1, 2);
  5. float paddleX;
  6. float paddleY = 10;
  7.  
  8. void setup() {
  9. size(400, 400);
  10. paddleX = width – 15;
  11. }
  12.  
  13. void draw() {
  14. background(255, 255, 255);
  15. ellipse(ballX, ballY, 20, 20);
  16.  
  17. rect(paddleX, paddleY, 10, 30);
  18.  
  19. if (ballX > width) {
  20. dX = -dX; // if dX == 2, it becomes -2; if dX is -2, it becomes 2
  21. }
  22.  
  23. if (ballX < 0) {
  24. dX = -dX; // if dX == 2, it becomes -2; if dX is -2, it becomes 2
  25. }
  26.  
  27. if (ballY > height) {
  28. dY = -dY; // if dY == 2, it becomes -2; if dY is -2, it becomes 2
  29. }
  30.  
  31. if (ballY < 0) {
  32. dY = -dY; // if dY == 2, it becomes -2; if dY is -2, it becomes 2
  33. }
  34.  
  35. ballX = ballX + dX;
  36. ballY = ballY + dY;
  37. }
  38.  
  39. // based on code from http://processing.org/reference/keyCode.html
  40. void keyPressed() {
  41. if (key == CODED) {
  42. if (keyCode == UP) {
  43. paddleY = paddleY – 30;
  44. } else if (keyCode == DOWN) {
  45. paddleY = paddleY + 30;
  46. }
  47. }
  48. }

I have once again put in some magic numbers: 30 at lines 17, 43, and 45, above. It’s the paddle height, but that’s not obvious from the code. So, let me refactor that to a variable.

  1. float ballX = 20;
  2. float ballY = 20;
  3. float dX = random(1, 2);
  4. float dY = random(1, 2);
  5. float paddleX;
  6. float paddleY = 10;
  7. float paddleH = 30;
  8.  
  9. void setup() {
  10. size(400, 400);
  11. paddleX = width – 15;
  12. }
  13.  
  14. void draw() {
  15. background(255, 255, 255);
  16. ellipse(ballX, ballY, 20, 20);
  17.  
  18. rect(paddleX, paddleY, 10, paddleH);
  19.  
  20. if (ballX > width) {
  21. dX = -dX; // if dX == 2, it becomes -2; if dX is -2, it becomes 2
  22. }
  23.  
  24. if (ballX < 0) {
  25. dX = -dX; // if dX == 2, it becomes -2; if dX is -2, it becomes 2
  26. }
  27.  
  28. if (ballY > height) {
  29. dY = -dY; // if dY == 2, it becomes -2; if dY is -2, it becomes 2
  30. }
  31.  
  32. if (ballY < 0) {
  33. dY = -dY; // if dY == 2, it becomes -2; if dY is -2, it becomes 2
  34. }
  35.  
  36. ballX = ballX + dX;
  37. ballY = ballY + dY;
  38. }
  39.  
  40. // based on code from http://processing.org/reference/keyCode.html
  41. void keyPressed() {
  42. if (key == CODED) {
  43. if (keyCode == UP) {
  44. paddleY = paddleY – paddleH;
  45. } else if (keyCode == DOWN) {
  46. paddleY = paddleY + paddleH;
  47. }
  48. }
  49. }

Now that we have a paddle, we want to reconsider when the ball should bounce on the right side of our window. As the code is written, it bounces with it reaches the edge of the window itself, but we want it to bounce when it reaches the left-hand face of the paddle, which is located along a vertical line located at paddleX. I’ve updated line 20, below.

  1. float ballX = 20;
  2. float ballY = 20;
  3. float dX = random(1, 2);
  4. float dY = random(1, 2);
  5. float paddleX;
  6. float paddleY = 10;
  7. float paddleH = 30;
  8.  
  9. void setup() {
  10. size(400, 400);
  11. paddleX = width – 15;
  12. }
  13.  
  14. void draw() {
  15. background(255, 255, 255);
  16. ellipse(ballX, ballY, 20, 20);
  17.  
  18. rect(paddleX, paddleY, 10, paddleH);
  19.  
  20. if (ballX > paddleX) {
  21. dX = -dX; // if dX == 2, it becomes -2; if dX is -2, it becomes 2
  22. }
  23.  
  24. if (ballX < 0) {
  25. dX = -dX; // if dX == 2, it becomes -2; if dX is -2, it becomes 2
  26. }
  27.  
  28. if (ballY > height) {
  29. dY = -dY; // if dY == 2, it becomes -2; if dY is -2, it becomes 2
  30. }
  31.  
  32. if (ballY < 0) {
  33. dY = -dY; // if dY == 2, it becomes -2; if dY is -2, it becomes 2
  34. }
  35.  
  36. ballX = ballX + dX;
  37. ballY = ballY + dY;
  38. }
  39.  
  40. // based on code from http://processing.org/reference/keyCode.html
  41. void keyPressed() {
  42. if (key == CODED) {
  43. if (keyCode == UP) {
  44. paddleY = paddleY – paddleH;
  45. } else if (keyCode == DOWN) {
  46. paddleY = paddleY + paddleH;
  47. }
  48. }
  49. }

But that’s not the end of the story. As it’s written, the ball will bounce when it reaches the invisible vertical line, even if it isn’t touching the face of the paddle.

  • the ball bounces when it hits the paddle (approaching from the left)

So, we need to update line 20 so that we check not only the horizontal position of the ball (which we’ve been doing all along), but also the vertical position of the ball with respect to the vertical position of the paddle.

  1. float ballX = 20;
  2. float ballY = 20;
  3. float dX = random(1, 2);
  4. float dY = random(1, 2);
  5. float paddleX;
  6. float paddleY = 10;
  7. float paddleH = 30;
  8.  
  9. void setup() {
  10. size(400, 400);
  11. paddleX = width – 15;
  12. }
  13.  
  14. void draw() {
  15. background(255, 255, 255);
  16. ellipse(ballX, ballY, 20, 20);
  17.  
  18. rect(paddleX, paddleY, 10, paddleH);
  19.  
  20. if ((ballX > paddleX) && (ballY >= paddleY) && (ballY <= paddleY + paddleH)) {
  21. dX = -dX; // if dX == 2, it becomes -2; if dX is -2, it becomes 2
  22. }
  23.  
  24. if (ballX < 0) {
  25. dX = -dX; // if dX == 2, it becomes -2; if dX is -2, it becomes 2
  26. }
  27.  
  28. if (ballY > height) {
  29. dY = -dY; // if dY == 2, it becomes -2; if dY is -2, it becomes 2
  30. }
  31.  
  32. if (ballY < 0) {
  33. dY = -dY; // if dY == 2, it becomes -2; if dY is -2, it becomes 2
  34. }
  35.  
  36. ballX = ballX + dX;
  37. ballY = ballY + dY;
  38. }
  39.  
  40. // based on code from http://processing.org/reference/keyCode.html
  41. void keyPressed() {
  42. if (key == CODED) {
  43. if (keyCode == UP) {
  44. paddleY = paddleY – paddleH;
  45. } else if (keyCode == DOWN) {
  46. paddleY = paddleY + paddleH;
  47. }
  48. }
  49. }

I’m getting nervous about the complexity of the logic on line 20; other programmers (including my future self!) may not understand what my intention was in writing that code. In fact, I haven’t really given a name to what it is I’m trying to do on that line! A large part of programming is communication. As a programmer, I’m trying to communicate my intentions not only to the computer, so that it can execute them, but also to other programmers who may read my code. I’ve tried to create a domain specific set of variable names (ballX, ballY, dX, dY, paddleX, paddleY, and paddleH) to make my code more readable by humans. If I only cared about the computer understanding my code, I could just as easily have used bX and bY or iLoveRockAndRollX and iLoveRockAndRollY. But humans (me, my instructors, my students, my friends, my future employers) need to read the code, too, so I’d like to make it as understandable as possible.

With that in mind, I’m going to extract the logic from line 20 into its own method with a method name that makes my intentions clear(er). My new method will return a boolean value (either true or false) depending on whether there has been a collision.

  1. float ballX = 20;
  2. float ballY = 20;
  3. float dX = random(1, 2);
  4. float dY = random(1, 2);
  5. float paddleX;
  6. float paddleY = 10;
  7. float paddleH = 30;
  8.  
  9. void setup() {
  10. size(400, 400);
  11. paddleX = width – 15;
  12. }
  13.  
  14. void draw() {
  15. background(255, 255, 255);
  16. ellipse(ballX, ballY, 20, 20);
  17.  
  18. rect(paddleX, paddleY, 10, paddleH);
  19.  
  20. if (collision()) {
  21. dX = -dX; // if dX == 2, it becomes -2; if dX is -2, it becomes 2
  22. }
  23.  
  24. if (ballX < 0) {
  25. dX = -dX; // if dX == 2, it becomes -2; if dX is -2, it becomes 2
  26. }
  27.  
  28. if (ballY > height) {
  29. dY = -dY; // if dY == 2, it becomes -2; if dY is -2, it becomes 2
  30. }
  31.  
  32. if (ballY < 0) {
  33. dY = -dY; // if dY == 2, it becomes -2; if dY is -2, it becomes 2
  34. }
  35.  
  36. ballX = ballX + dX;
  37. ballY = ballY + dY;
  38. }
  39.  
  40. boolean collision() {
  41. return (ballX > paddleX) && (ballY >= paddleY) && (ballY <= paddleY + paddleH);
  42. }
  43.  
  44. // based on code from http://processing.org/reference/keyCode.html
  45. void keyPressed() {
  46. if (key == CODED) {
  47. if (keyCode == UP) {
  48. paddleY = paddleY – paddleH;
  49. } else if (keyCode == DOWN) {
  50. paddleY = paddleY + paddleH;
  51. }
  52. }
  53. }

The collision method, so far, is still not transparent to the casual reader. I’d like to refactor the code within that method to make my intentions clearer.

  1. float ballX = 20;
  2. float ballY = 20;
  3. float dX = random(1, 2);
  4. float dY = random(1, 2);
  5. float paddleX;
  6. float paddleY = 10;
  7. float paddleH = 30;
  8.  
  9. void setup() {
  10. size(400, 400);
  11. paddleX = width – 15;
  12. }
  13.  
  14. void draw() {
  15. background(255, 255, 255);
  16. ellipse(ballX, ballY, 20, 20);
  17.  
  18. rect(paddleX, paddleY, 10, paddleH);
  19.  
  20. if (collision()) {
  21. dX = -dX; // if dX == 2, it becomes -2; if dX is -2, it becomes 2
  22. }
  23.  
  24. if (ballX < 0) {
  25. dX = -dX; // if dX == 2, it becomes -2; if dX is -2, it becomes 2
  26. }
  27.  
  28. if (ballY > height) {
  29. dY = -dY; // if dY == 2, it becomes -2; if dY is -2, it becomes 2
  30. }
  31.  
  32. if (ballY < 0) {
  33. dY = -dY; // if dY == 2, it becomes -2; if dY is -2, it becomes 2
  34. }
  35.  
  36. ballX = ballX + dX;
  37. ballY = ballY + dY;
  38. }
  39.  
  40. boolean collision() {
  41. boolean returnValue = false; // assume there is no collision
  42. if (ballX > paddleX) {
  43. if ((ballY >= paddleY) && (ballY <= paddleY + paddleH)) {
  44. returnValue = true;
  45. }
  46. }
  47. return returnValue;
  48. }
  49.  
  50. // based on code from http://processing.org/reference/keyCode.html
  51. void keyPressed() {
  52. if (key == CODED) {
  53. if (keyCode == UP) {
  54. paddleY = paddleY – paddleH;
  55. } else if (keyCode == DOWN) {
  56. paddleY = paddleY + paddleH;
  57. }
  58. }
  59. }

That refactoring has revealed a problem with my thinking. So far, I’ve been testing only that the ball is to the right of the left-hand face of the paddle. If the ball somehow managed to get BETWEEN the right edge of the window and the paddle, it would still count as a collision and the ball would start back toward the left. I’ve noticed this because my testing of the horizontal position of the ball at line 42 isn’t parallel to my testing of the vertical position of the ball at line 43. In other words, I’m testing that the ball is between the top and bottom of the paddle, but I’m only testing that it’s to the right of the left-most side of the paddle.

In order to fix this, I need to know how wide the paddle is. Unfortunately, I’ve left that as a magic number (10) at line 18, until now. I’ll extract that to a variable (paddleW) and update my collision method to incorporate that at line 43.

  1. float ballX = 20;
  2. float ballY = 20;
  3. float dX = random(1, 2);
  4. float dY = random(1, 2);
  5. float paddleX;
  6. float paddleY = 10;
  7. float paddleW = 10;
  8. float paddleH = 30;
  9.  
  10. void setup() {
  11. size(400, 400);
  12. paddleX = width – 15;
  13. }
  14.  
  15. void draw() {
  16. background(255, 255, 255);
  17. ellipse(ballX, ballY, 20, 20);
  18.  
  19. rect(paddleX, paddleY, paddleW, paddleH);
  20.  
  21. if (collision()) {
  22. dX = -dX; // if dX == 2, it becomes -2; if dX is -2, it becomes 2
  23. }
  24.  
  25. if (ballX < 0) {
  26. dX = -dX; // if dX == 2, it becomes -2; if dX is -2, it becomes 2
  27. }
  28.  
  29. if (ballY > height) {
  30. dY = -dY; // if dY == 2, it becomes -2; if dY is -2, it becomes 2
  31. }
  32.  
  33. if (ballY < 0) {
  34. dY = -dY; // if dY == 2, it becomes -2; if dY is -2, it becomes 2
  35. }
  36.  
  37. ballX = ballX + dX;
  38. ballY = ballY + dY;
  39. }
  40.  
  41. boolean collision() {
  42. boolean returnValue = false; // assume there is no collision
  43. if ((ballX >= paddleX) && (ballX <= paddleX + paddleW)) {
  44. if ((ballY >= paddleY) && (ballY <= paddleY + paddleH)) {
  45. returnValue = true;
  46. }
  47. }
  48. return returnValue;
  49. }
  50.  
  51. // based on code from http://processing.org/reference/keyCode.html
  52. void keyPressed() {
  53. if (key == CODED) {
  54. if (keyCode == UP) {
  55. paddleY = paddleY – paddleH;
  56. } else if (keyCode == DOWN) {
  57. paddleY = paddleY + paddleH;
  58. }
  59. }
  60. }

Finally, I want to end the game, if the player missed the paddle.

  • the game ends when the ball reaches the right of the playing field

I notice that, if the ball’s x coordinate is greater than the window’s width, then the ball must have passed by the paddle, so the game should end. There are other possible conditions you might use, but this one seems simple and obvious, at the moment.

  1. float ballX = 20;
  2. float ballY = 20;
  3. float dX = random(1, 2);
  4. float dY = random(1, 2);
  5. float paddleX;
  6. float paddleY = 10;
  7. float paddleW = 10;
  8. float paddleH = 30;
  9.  
  10. void setup() {
  11. size(400, 400);
  12. paddleX = width – 15;
  13. }
  14.  
  15. void draw() {
  16. background(255, 255, 255);
  17. ellipse(ballX, ballY, 20, 20);
  18.  
  19. rect(paddleX, paddleY, paddleW, paddleH);
  20.  
  21. if (ballX > width) {
  22. fill(255, 0, 0, 100);
  23. rect(0, 0, width, height);
  24. noLoop();
  25. }
  26.  
  27. if (collision()) {
  28. dX = -dX; // if dX == 2, it becomes -2; if dX is -2, it becomes 2
  29. }
  30.  
  31. if (ballX < 0) {
  32. dX = -dX; // if dX == 2, it becomes -2; if dX is -2, it becomes 2
  33. }
  34.  
  35. if (ballY > height) {
  36. dY = -dY; // if dY == 2, it becomes -2; if dY is -2, it becomes 2
  37. }
  38.  
  39. if (ballY < 0) {
  40. dY = -dY; // if dY == 2, it becomes -2; if dY is -2, it becomes 2
  41. }
  42.  
  43. ballX = ballX + dX;
  44. ballY = ballY + dY;
  45. }
  46.  
  47. boolean collision() {
  48. boolean returnValue = false; // assume there is no collision
  49. if ((ballX >= paddleX) && (ballX <= paddleX + paddleW)) {
  50. if ((ballY >= paddleY) && (ballY <= paddleY + paddleH)) {
  51. returnValue = true;
  52. }
  53. }
  54. return returnValue;
  55. }
  56.  
  57. // based on code from http://processing.org/reference/keyCode.html
  58. void keyPressed() {
  59. if (key == CODED) {
  60. if (keyCode == UP) {
  61. paddleY = paddleY – paddleH;
  62. } else if (keyCode == DOWN) {
  63. paddleY = paddleY + paddleH;
  64. }
  65. }
  66. }

I have also noticed that by using the ball’s x and y coordinates in my collision method, and leaving the default ellipse drawing mode set to CENTER, it’s actually the center point of the ball that I’m using as the hot spot (have you hit the wall? have you hit the paddle?) when I should probably be using the ball’s left-, right-, top-, and bottom-most points as the hot spots.

In order to be able to compute the left-, right-, top-, and bottom-most points of the ball, I’m going to need to know the radius of the ball (or, equivalantly the diameter). Unfortuneately, I again left that as a magic number (line 16, above), so I’ll first need to refactor that and extract the radius to a variable (lines 3, 18).

  1. float ballX = 20;
  2. float ballY = 20;
  3. float ballR = 10;
  4. float dX = random(1, 2);
  5. float dY = random(1, 2);
  6. float paddleX;
  7. float paddleY = 10;
  8. float paddleW = 10;
  9. float paddleH = 30;
  10.  
  11. void setup() {
  12. size(400, 400);
  13. paddleX = width – 15;
  14. }
  15.  
  16. void draw() {
  17. background(255, 255, 255);
  18. ellipse(ballX, ballY, 2 * ballR, 2 * ballR);
  19.  
  20. rect(paddleX, paddleY, paddleW, paddleH);
  21.  
  22. if (ballX > width) {
  23. fill(255, 0, 0, 100);
  24. rect(0, 0, width, height);
  25. noLoop();
  26. }
  27.  
  28. if (collision()) {
  29. dX = -dX; // if dX == 2, it becomes -2; if dX is -2, it becomes 2
  30. }
  31.  
  32. if (ballX < 0) {
  33. dX = -dX; // if dX == 2, it becomes -2; if dX is -2, it becomes 2
  34. }
  35.  
  36. if (ballY > height) {
  37. dY = -dY; // if dY == 2, it becomes -2; if dY is -2, it becomes 2
  38. }
  39.  
  40. if (ballY < 0) {
  41. dY = -dY; // if dY == 2, it becomes -2; if dY is -2, it becomes 2
  42. }
  43.  
  44. ballX = ballX + dX;
  45. ballY = ballY + dY;
  46. }
  47.  
  48. boolean collision() {
  49. boolean returnValue = false; // assume there is no collision
  50. if ((ballX >= paddleX) && (ballX <= paddleX + paddleW)) {
  51. if ((ballY >= paddleY) && (ballY <= paddleY + paddleH)) {
  52. returnValue = true;
  53. }
  54. }
  55. return returnValue;
  56. }
  57.  
  58. // based on code from http://processing.org/reference/keyCode.html
  59. void keyPressed() {
  60. if (key == CODED) {
  61. if (keyCode == UP) {
  62. paddleY = paddleY – paddleH;
  63. } else if (keyCode == DOWN) {
  64. paddleY = paddleY + paddleH;
  65. }
  66. }
  67. }

Now, I can add methods that compute the bounds of the ball on demand (lines 58-72).

  1. float ballX = 20;
  2. float ballY = 20;
  3. float ballR = 10;
  4. float dX = random(1, 2);
  5. float dY = random(1, 2);
  6. float paddleX;
  7. float paddleY = 10;
  8. float paddleW = 10;
  9. float paddleH = 30;
  10.  
  11. void setup() {
  12. size(400, 400);
  13. paddleX = width – 15;
  14. }
  15.  
  16. void draw() {
  17. background(255, 255, 255);
  18. ellipse(ballX, ballY, 2 * ballR, 2 * ballR);
  19.  
  20. rect(paddleX, paddleY, paddleW, paddleH);
  21.  
  22. if (ballX > width) {
  23. fill(255, 0, 0, 100);
  24. rect(0, 0, width, height);
  25. noLoop();
  26. }
  27.  
  28. if (collision()) {
  29. dX = -dX; // if dX == 2, it becomes -2; if dX is -2, it becomes 2
  30. }
  31.  
  32. if (ballX < 0) {
  33. dX = -dX; // if dX == 2, it becomes -2; if dX is -2, it becomes 2
  34. }
  35.  
  36. if (ballY > height) {
  37. dY = -dY; // if dY == 2, it becomes -2; if dY is -2, it becomes 2
  38. }
  39.  
  40. if (ballY < 0) {
  41. dY = -dY; // if dY == 2, it becomes -2; if dY is -2, it becomes 2
  42. }
  43.  
  44. ballX = ballX + dX;
  45. ballY = ballY + dY;
  46. }
  47.  
  48. boolean collision() {
  49. boolean returnValue = false; // assume there is no collision
  50. if ((ballX >= paddleX) && (ballX <= paddleX + paddleW)) {
  51. if ((ballY >= paddleY) && (ballY <= paddleY + paddleH)) {
  52. returnValue = true;
  53. }
  54. }
  55. return returnValue;
  56. }
  57.  
  58. float ballLeft() {
  59. return ballX – ballR;
  60. }
  61.  
  62. float ballRight() {
  63. return ballX + ballR;
  64. }
  65.  
  66. float ballTop() {
  67. return ballY – ballR;
  68. }
  69.  
  70. float ballBottom() {
  71. return ballY + ballR;
  72. }
  73.  
  74. // based on code from http://processing.org/reference/keyCode.html
  75. void keyPressed() {
  76. if (key == CODED) {
  77. if (keyCode == UP) {
  78. paddleY = paddleY – paddleH;
  79. } else if (keyCode == DOWN) {
  80. paddleY = paddleY + paddleH;
  81. }
  82. }
  83. }

It’s usually good practice when refactoring to only change one thing at a time (i.e., only add one new method, only change one variable name, etc.) and then retest your code. That way, you limit the range of mistakes, typos, logic errors, etc. that you might make at any one time.

So, I’ll begin by finding all the lines of code that I intended to refer to the right-most point of the ball. It seems that lines 22 and 50 should be my targets.

  1. float ballX = 20;
  2. float ballY = 20;
  3. float ballR = 10;
  4. float dX = random(1, 2);
  5. float dY = random(1, 2);
  6. float paddleX;
  7. float paddleY = 10;
  8. float paddleW = 10;
  9. float paddleH = 30;
  10.  
  11. void setup() {
  12. size(400, 400);
  13. paddleX = width – 15;
  14. }
  15.  
  16. void draw() {
  17. background(255, 255, 255);
  18. ellipse(ballX, ballY, 2 * ballR, 2 * ballR);
  19.  
  20. rect(paddleX, paddleY, paddleW, paddleH);
  21.  
  22. if (ballRight() > width) {
  23. fill(255, 0, 0, 100);
  24. rect(0, 0, width, height);
  25. noLoop();
  26. }
  27.  
  28. if (collision()) {
  29. dX = -dX; // if dX == 2, it becomes -2; if dX is -2, it becomes 2
  30. }
  31.  
  32. if (ballX < 0) {
  33. dX = -dX; // if dX == 2, it becomes -2; if dX is -2, it becomes 2
  34. }
  35.  
  36. if (ballY > height) {
  37. dY = -dY; // if dY == 2, it becomes -2; if dY is -2, it becomes 2
  38. }
  39.  
  40. if (ballY < 0) {
  41. dY = -dY; // if dY == 2, it becomes -2; if dY is -2, it becomes 2
  42. }
  43.  
  44. ballX = ballX + dX;
  45. ballY = ballY + dY;
  46. }
  47.  
  48. boolean collision() {
  49. boolean returnValue = false; // assume there is no collision
  50. if ((ballRight() >= paddleX) && (ballX <= paddleX + paddleW)) {
  51. if ((ballY >= paddleY) && (ballY <= paddleY + paddleH)) {
  52. returnValue = true;
  53. }
  54. }
  55. return returnValue;
  56. }
  57.  
  58. float ballLeft() {
  59. return ballX – ballR;
  60. }
  61.  
  62. float ballRight() {
  63. return ballX + ballR;
  64. }
  65.  
  66. float ballTop() {
  67. return ballY – ballR;
  68. }
  69.  
  70. float ballBottom() {
  71. return ballY + ballR;
  72. }
  73.  
  74. // based on code from http://processing.org/reference/keyCode.html
  75. void keyPressed() {
  76. if (key == CODED) {
  77. if (keyCode == UP) {
  78. paddleY = paddleY – paddleH;
  79. } else if (keyCode == DOWN) {
  80. paddleY = paddleY + paddleH;
  81. }
  82. }
  83. }

Now, I’ll find all the lines of code that I intended to refer to the left-most point of the ball. It seems that lines 32 and 50 should be my targets.

  1. float ballX = 20;
  2. float ballY = 20;
  3. float ballR = 10;
  4. float dX = random(1, 2);
  5. float dY = random(1, 2);
  6. float paddleX;
  7. float paddleY = 10;
  8. float paddleW = 10;
  9. float paddleH = 30;
  10.  
  11. void setup() {
  12. size(400, 400);
  13. paddleX = width – 15;
  14. }
  15.  
  16. void draw() {
  17. background(255, 255, 255);
  18. ellipse(ballX, ballY, 2 * ballR, 2 * ballR);
  19.  
  20. rect(paddleX, paddleY, paddleW, paddleH);
  21.  
  22. if (ballRight() > width) {
  23. fill(255, 0, 0, 100);
  24. rect(0, 0, width, height);
  25. noLoop();
  26. }
  27.  
  28. if (collision()) {
  29. dX = -dX; // if dX == 2, it becomes -2; if dX is -2, it becomes 2
  30. }
  31.  
  32. if (ballLeft() < 0) {
  33. dX = -dX; // if dX == 2, it becomes -2; if dX is -2, it becomes 2
  34. }
  35.  
  36. if (ballY > height) {
  37. dY = -dY; // if dY == 2, it becomes -2; if dY is -2, it becomes 2
  38. }
  39.  
  40. if (ballY < 0) {
  41. dY = -dY; // if dY == 2, it becomes -2; if dY is -2, it becomes 2
  42. }
  43.  
  44. ballX = ballX + dX;
  45. ballY = ballY + dY;
  46. }
  47.  
  48. boolean collision() {
  49. boolean returnValue = false; // assume there is no collision
  50. if ((ballRight() >= paddleX) && (ballLeft() <= paddleX + paddleW)) {
  51. if ((ballY >= paddleY) && (ballY <= paddleY + paddleH)) {
  52. returnValue = true;
  53. }
  54. }
  55. return returnValue;
  56. }
  57.  
  58. float ballLeft() {
  59. return ballX – ballR;
  60. }
  61.  
  62. float ballRight() {
  63. return ballX + ballR;
  64. }
  65.  
  66. float ballTop() {
  67. return ballY – ballR;
  68. }
  69.  
  70. float ballBottom() {
  71. return ballY + ballR;
  72. }
  73.  
  74. // based on code from http://processing.org/reference/keyCode.html
  75. void keyPressed() {
  76. if (key == CODED) {
  77. if (keyCode == UP) {
  78. paddleY = paddleY – paddleH;
  79. } else if (keyCode == DOWN) {
  80. paddleY = paddleY + paddleH;
  81. }
  82. }
  83. }

Test my code to confirm it’s still functioning, and then I’ll find all the lines of code that I intended to refer to the top-most point of the ball. It seems that lines 40 and 51 should be my targets.

  1. float ballX = 20;
  2. float ballY = 20;
  3. float ballR = 10;
  4. float dX = random(1, 2);
  5. float dY = random(1, 2);
  6. float paddleX;
  7. float paddleY = 10;
  8. float paddleW = 10;
  9. float paddleH = 30;
  10.  
  11. void setup() {
  12. size(400, 400);
  13. paddleX = width – 15;
  14. }
  15.  
  16. void draw() {
  17. background(255, 255, 255);
  18. ellipse(ballX, ballY, 2 * ballR, 2 * ballR);
  19.  
  20. rect(paddleX, paddleY, paddleW, paddleH);
  21.  
  22. if (ballRight() > width) {
  23. fill(255, 0, 0, 100);
  24. rect(0, 0, width, height);
  25. noLoop();
  26. }
  27.  
  28. if (collision()) {
  29. dX = -dX; // if dX == 2, it becomes -2; if dX is -2, it becomes 2
  30. }
  31.  
  32. if (ballLeft() < 0) {
  33. dX = -dX; // if dX == 2, it becomes -2; if dX is -2, it becomes 2
  34. }
  35.  
  36. if (ballY > height) {
  37. dY = -dY; // if dY == 2, it becomes -2; if dY is -2, it becomes 2
  38. }
  39.  
  40. if (ballY < 0) {
  41. dY = -dY; // if dY == 2, it becomes -2; if dY is -2, it becomes 2
  42. }
  43.  
  44. ballX = ballX + dX;
  45. ballY = ballY + dY;
  46. }
  47.  
  48. boolean collision() {
  49. boolean returnValue = false; // assume there is no collision
  50. if ((ballRight() >= paddleX) && (ballLeft() <= paddleX + paddleW)) {
  51. if ((ballY >= paddleY) && (ballY <= paddleY + paddleH)) {
  52. returnValue = true;
  53. }
  54. }
  55. return returnValue;
  56. }
  57.  
  58. float ballLeft() {
  59. return ballX – ballR;
  60. }
  61.  
  62. float ballRight() {
  63. return ballX + ballR;
  64. }
  65.  
  66. float ballTop() {
  67. return ballY – ballR;
  68. }
  69.  
  70. float ballBottom() {
  71. return ballY + ballR;
  72. }
  73.  
  74. // based on code from http://processing.org/reference/keyCode.html
  75. void keyPressed() {
  76. if (key == CODED) {
  77. if (keyCode == UP) {
  78. paddleY = paddleY – paddleH;
  79. } else if (keyCode == DOWN) {
  80. paddleY = paddleY + paddleH;
  81. }
  82. }
  83. }

Test my code once more to confirm it’s still functioning, and then I’ll find all the lines of code that I intended to refer to the bottom-most point of the ball. It seems that lines 36 and 51 should be my targets.

  1. float ballX = 20;
  2. float ballY = 20;
  3. float ballR = 10;
  4. float dX = random(1, 2);
  5. float dY = random(1, 2);
  6. float paddleX;
  7. float paddleY = 10;
  8. float paddleW = 10;
  9. float paddleH = 30;
  10.  
  11. void setup() {
  12. size(400, 400);
  13. paddleX = width – 15;
  14. }
  15.  
  16. void draw() {
  17. background(255, 255, 255);
  18. ellipse(ballX, ballY, 2 * ballR, 2 * ballR);
  19.  
  20. rect(paddleX, paddleY, paddleW, paddleH);
  21.  
  22. if (ballRight() > width) {
  23. fill(255, 0, 0, 100);
  24. rect(0, 0, width, height);
  25. noLoop();
  26. }
  27.  
  28. if (collision()) {
  29. dX = -dX; // if dX == 2, it becomes -2; if dX is -2, it becomes 2
  30. }
  31.  
  32. if (ballLeft() < 0) {
  33. dX = -dX; // if dX == 2, it becomes -2; if dX is -2, it becomes 2
  34. }
  35.  
  36. if (ballBottom() > height) {
  37. dY = -dY; // if dY == 2, it becomes -2; if dY is -2, it becomes 2
  38. }
  39.  
  40. if (ballTop() < 0) {
  41. dY = -dY; // if dY == 2, it becomes -2; if dY is -2, it becomes 2
  42. }
  43.  
  44. ballX = ballX + dX;
  45. ballY = ballY + dY;
  46. }
  47.  
  48. boolean collision() {
  49. boolean returnValue = false; // assume there is no collision
  50. if ((ballRight() >= paddleX) && (ballLeft() <= paddleX + paddleW)) {
  51. if ((ballBottom() >= paddleY) && (ballTop() <= paddleY + paddleH)) {
  52. returnValue = true;
  53. }
  54. }
  55. return returnValue;
  56. }
  57.  
  58. float ballLeft() {
  59. return ballX – ballR;
  60. }
  61.  
  62. float ballRight() {
  63. return ballX + ballR;
  64. }
  65.  
  66. float ballTop() {
  67. return ballY – ballR;
  68. }
  69.  
  70. float ballBottom() {
  71. return ballY + ballR;
  72. }
  73.  
  74. // based on code from http://processing.org/reference/keyCode.html
  75. void keyPressed() {
  76. if (key == CODED) {
  77. if (keyCode == UP) {
  78. paddleY = paddleY – paddleH;
  79. } else if (keyCode == DOWN) {
  80. paddleY = paddleY + paddleH;
  81. }
  82. }
  83. }

There are additional features I’d like to add (the ability to reset the game or to use mouse input, for example) and refactorings I’d like to make (turn this into an object oriented program), but this is a working, playable game at this point that solves the problem, as stated. A well-trained programmer will no doubt be appalled at the coding style, but I’ve intentionally tried not to use shorthand notations or to introduce solutions or idioms that would be unfamiliar to the novice programmer.

The fact that I have multiple methods (setup, draw, keyPressed, and now collision) that are all accessing the same variables raises a serious concern for me as does my use of special methods to handle pseudo-properties of the ball (ballTop, ballBottom, ballLeft, ballRight). How can I hope to keep track of where variables are used and modified? I’m making my code difficult to maintain and understand by using instance variables all over the place. A better solution would be to use object-oriented programming techniques so that I can encapsulate the variables and behaviors related to the ball within an object (perhaps named Ball) and encapsulate the variables and behaviors related to the paddle within another object (named Paddle). I’m going to set aside my misgivings for now and leave the refactoring of this code into an object-oriented structure for another blog post.

17 thoughts on “Thinking Through A Basic Pong Game in Processing”

  1. Thanks for this clear and easy to understand example! I’m currently teaching a high school 1 – semester Intro to Computer Science course, and we just finished learning about coding objects in Processing. Did you ever refactor this project?

  2. Unfortunately, that’s the only game I’ve documented in a think-aloud way. Thank you for the feedback! I’m starting a new project just this week that has similar think-aloud style, but isn’t about games and will likely rely mostly on R.

  3. At North Haven Community School, North Haven, ME, I’ve developed over the last 6 years a Coding(code.org and Scratch) Robotics(WeDo & EV3) program for grades K-8. This year as a change of pace and in 7-8 I’ve ventured forth to expose these students to a text based programming language, Processing. As a capstone project for the 1st trimester I am going back to the 1070s with your Pong game. Thanks for describing in great detail your “Thinking through a basic pong game in Processing.”

    Do you have any more games in Processing or Python?

    Thanks

    Edwin R. Sage

  4. In the section of the code that detect ball-paddle collisions, consider increasing dX (delta x, the change in the x position per time step) a little bit. Possibly by 1% or 2%, but you’d also want to enforce a speed limit, too, so it doesn’t get too crazy: dX = min(dX * 1.02, 4);

  5. I was a bit sloppy in the code in that I used the geometric center of the ball, but the left and right edges of the paddle. So, if the ball radius is > the paddle width, the ball may appear to pass through the paddle. Were I willing to make the code a bit more complex, I could compute the left and right edges of the ball, too, and use those.

  6. Thanks for this detailed walk-through. I’m really enjoying the Processing language. Finally getting to play things on a screen w/o needing 100s of lines of code. Note that I couldn’t get the “r” button to activate. When the ball hits the wall, the background changes etc… per lines 35-38. When I hit the “r” key, nothing happens. Have not figured out why yet. BUT! I made the game repeat automatically by removing noLoop from line 38 and using reset() instead. If you lose, it just starts again. Good times!

Comments are closed.