Pong | Making games using Processing

Since We’ve been assigned this brief for interactive media, I have been using lynda.com and processing tutorials and sample experiment codes to create all kind of different simple things within the program.

One of the things I wanted to work on was my understanding of the coding language and how it works. I took it upon myself to study some of the simple gaming codes available to me on the internet. I found a game (sort of like the traditional early game called “Pong”) without its usual 8-bit colours, which used a gravity orientated eclipse shape with random speeds every time it hit “X” (X being the movable mouse movement bar on the right hand side of the screen). The circle was given a random speed measure between 3 and 5, making the game a little bit challenging. I wanted to manipulate the code so that i could create a bar on the left hand side of the screen dependant on “keyPressed” movement (for example “W,A,S,D”), but I chose to not make it too complicated as I would only end up confusing myself. Instead, I decided to use the wall on the left hand side which was already in the code before I changed it to my advantage. I could still make a game that enabled the player to win by setting a timer placed in the centre of the screen. If the timer reached zero (0:00), the player would have survived the duration and would win. I wanted to display a message at the end of the timer that just said “WE HAVE A WINNER!!”, so I created the timer in a second Processing document. The code for the timer (without the message) looks like this:

PFont font;
String time = "60";
int t;
int interval = 60;

void setup()
font = createFont("Arial", 30);


void draw()

t = interval-int(millis()/1000);
time = nf(t , 3);
if(t == 0){
println("We have a Winner!");

text(time, width/3, height/2);

The timer as you can see starts from 60 seconds and intervals when that time is up. The print line was set to state that when the time was up, it would process the message that a win had been confirmed.

I wanted to have the timer in the background of the game itself, but instead I just analysed both of them separately as this type of processing development isn’t strictly applicable to my brief.

Here is the code for the game itself, followed by a screenshot of both the timer and the game.

boolean gameStart = false;

float x = 150;
float y = 150;
float speedX = random(3, 5);
float speedY = random(3, 5);
int leftColor = 128;
int rightColor = 128;
int diam;
int rectSize = 150;
float diamHit;

void setup() {
size(500, 500);

void draw() {

fill(0, 255, 0);
diam = 20;
ellipse(x, y, diam, diam);

fill(0, 255, 0);
rect(0,255,0, height);
rect(width-30, mouseY-rectSize/2, 10, rectSize);

if (gameStart) {

x = x + speedX;
y = y + speedY;

// if ball hits movable bar, invert X direction and apply effects
if ( x > width-30 && x < width -20 && y > mouseY-rectSize/2 && y < mouseY+rectSize/2 ) {
speedX = speedX * -1;
x = x + speedX;
rightColor = 0;
rectSize = constrain(rectSize, 10,150);

// if ball hits wall, change direction of X
else if (x ; 25) {
speedX = speedX * -1.1;
x = x + speedX;
leftColor = 0;

else {
leftColor = 128;
rightColor = 128;
// resets things if you lose
if (x > width) {
gameStart = false;
x = 150;
y = 150;
speedX = random(3, 5);
speedY = random(3, 5);
rectSize = 150;

// if ball hits up or down, change direction of Y
if ( y > height || y < 0 ) {
speedY = speedY * -1;
y = y + speedY;
void mousePressed() {
gameStart = !gameStart;

Here is the game:

Screen Shot 2014-11-18 at 21.11.01

And finally the timer:

Screen Shot 2014-11-18 at 21.11.22

In conclusion to this, looking at the development of small games in processing has enabled me to get a clearer (not yet fully clear) understanding of some of the elements  the create them. There are still many things I do not understand properly with this program, but seeing as this is only an overview of the other types of processing code I’ve been looking at, I still have lots of time to look at other examples. Looking at this type of code hasn’t helped me a great deal, but I have taken some understanding away from it.




Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s