B. Creating a Pong Game using Processing

Here we’re going to create a game of pong with a single bat and a ball that bounces of four walls of the room. There are three activities: (i) Coding the bat, (ii) coding the ball and (iii) putting it all together. On this journey, you will discover how to write code in the Processing Language.

Activity 1 Coding the Bat

1. The Bat Code / Load and run the following code into a sketch. It’s called Pong_1
void setup() {
size(600,400);
}
void draw() {
background(100);
fill(200,0,0);
rect(mouseX,mouseY,20,80);
}
You should see a rectangle on the screen which tracks the position of the mouse
2. Question / What point of the rectangle does the mouse pointer point to? Write down your answer below
3. Discover / Now change the two numbers in the function size(600,400);to different values. Run your code. I suggest you first change the 600 and see what happens. Then change the 400 and see what happens. Write down what the function and the two numbers actually do:
4. Discover / Let’s look at the line of code background(100);and discover what it does. Change the 100 to a number in the range 0 to 255. Run your code and see what happens. Do this for several different numbers. Good. Now answer the question, what does this function and its number actually do:
5. Discover / Now let’s look at the line of code fill(200,0,0);and discover what it does. We’ve got three numbers to investigate here, so we must think how to plan an investigation. The best approach is to change one number at a time. So I would suggest trying fill(0,200,0);and then fill(0,0,200);and then move onto combinations like fill(200,200,0);Write down how you think these three numbers work together to set the colour of the bat.
6. Discover / Finally, let’s look at the line of code rect(mouseX,mouseY,20,80);and see what it does. Change the 20 and see the effect of this. Now change the 80 and see the effect of this. Write down your discoveries. Now choose some values you think are good for a bat to hit a moving ball, and note these down.
7. Discover / Stay with the line of code rect(mouseX,mouseY,20,80);and discover what the variables mouseX,mouseY do. Change the code torect(mouseX,200,20,80);and see what happens. Write down your findings:
7. Discover / We can make the bat have other shapes. Let’s try a circle. Replace the line of code rect(mouseX,mouseY,20,80); with this ellipse(mouseX,mouseY,40,40);and discover what happens. You probably guessed what you have to do next, find out what the two numbers 40,40 do. Plan an investigation to do this and find out what these numbers do. Write down all your discoveries below.

That’s the end of Activity 1. We’re half way to our pong game.

Activity 2 Coding the Ball

1. The Ball Code / Load and run the following code into a sketch. It’s called Pong_2
int x;
int y;
intvX;
intvY;
void setup() {
size(600,400);
fill(200,200,0);
x = 50;
y = 50;
vX = 5;
vY = 5;
}
void draw() {
background(100);
ellipse(x,y,20,20);
x = x + vX;
y = y + vY;
if(x > 600) vX = -1*vX;
if(x < 0) vX = -1*vX;
if(y > 400) vY = -1*vY;
if(y < 0) vY = -1*vY;
}
You should see a yellow ball bouncing around the screen. Now we are going to discover how this code works by tearing it apart.
2. Discover / The ball movement is complicated since it moves in the x-direction and the y-direction. Let’s find out how to stop the ball moving in the y-direction to make things a little simpler.
In the setup() function change vY = 5;to vY = 0;and see what happens. Write down what you see. Then think a bit and answer the question “What does vY actually do?
3. Discover / Now we have simplified the motion we can investigate what the value of vX actually does. Change the line vX = 5;to vX = 2;and see what happens. So, write down in simple English what vXdoes.
4. Discover / Let’s look at the line of code x = x + vX; and let’s suspend it, in other words let’s stop it being executed. The easiest way to do this is to “comment out” this line by inserting // before the line of code x = x + vX; to make it look like this //x = x + vX;So what happens to the ball when you do this? Write down in simple English what this line of code is doing.
5. Discover / OK. Remove the comment on the line of code for the x calculation so it looks like this code x = x + vX; as it was originally, so the ball will move in the x-direction.
6. Discover / Finally, let’s look at the line of code rect(mouseX,mouseY,20,80);and see what it does. Change the 20 and see the effect of this. Now change the 80 and see the effect of this. Write down your discoveries. Now choose some values you think are good for a bat to hit a moving ball, and note these down.
7. Discover / Stay with the line of code rect(mouseX,mouseY,20,80);and discover what the variables mouseX,mouseY do. Change the code torect(mouseX,200,20,80);and see what happens. Write down your findings:
8. Investigate / We can make the bat have other shapes. Let’s try a circle. Replace the line of code rect(mouseX,mouseY,20,80); with this ellipse(mouseX,mouseY,40,40);and discover what happens. You probably guessed what you have to do next, find out what the two numbers 40,40 do. Plan an investigation to do this and find out what these numbers do. Write down all your discoveries below.
9. Discover / There’s one final discovery we need to make. We need to know what the line of code if(x > 600) vX = -1*vX;actually does. So suspend it by adding // in front of the line like this. //if(x > 600) vX = -1*vX; Run the code and see what happens. Write down what you see and therefore explain the purpose of this line of code.
10. Wrap-up / You should be able to guess what the line of code if(x < 0) vX = -1*vX; does. Feel free to investigate if you wish.
So we now understand how the code works in the x-direction. The code for the ball’s motion in the y-direction is identical, except x is replaced by y.
Next step, let’s look at the complete pong code.

Activity 3 The complete Pong Game

1. The Complete Pong Code. / intx,y;
intvX,vY;
void setup() {
size(600,400);
fill(200,200,0);
x = 50;
y = 50;
vX = 2;
vY = 2;
rectMode(CENTER);
}
void draw() {
background(100);
fill(200,200,0);
ellipse(x,y,20,20);
x = x + vX;
y = y + vY;
if(x > 600) vX = -1*vX;
if(x < 0) vX = -1*vX;
if(y > 400) vY = -1*vY;
if(y < 0) vY = -1*vY;
fill(200,0,0);
rect(500,mouseY,20,80);
//if( (x > 480) & ( abs(y - mouseY) < 30) ) vX = -1*vX;
}
1. Investigate / Run the code and see what happens. There is a small problem which needs to be fixed. Do you see what it is?
We can solve the problem by adding this line of code to test when the ball hits the paddle. It’s not perfect, but it gives reasonable results. Just remove the // to add the line.
if( (x > 480) & ( abs(y - mouseY) < 30) ) vX = -1*vX;
It’s perhaps a little hard to understand what’s going on here. But if you like a challenge then try to work it out.
Now have some fun, and change some numbers to make the game interesting.