PONG

Don’t get frustrated. We’ll do something more reasonable next week.

History

Copying your stuff

I’m not sure if your files are being saved this term. Try copying them over to Google Drive for next class.

Figuring out the look

Don’t start by trying to program the game. Just figure out what you want you want your game board to look like. Mine looks something like the following:

Here’s a big start for your program. I’m giving you this so you will get into the habit of using variables, such as paddleColor, rather than “magic” constants, such as #DBC3A3.

color boardColor = #49311C ;

color ballColor = #DDDDDD ;
float ballXPos ;
float ballYPos ;
float ballWidth = 100 ;
float ballXSpeed = 2.5 ;
float ballYSpeed = 1.5 ;

color paddleColor = #DBC3A3 ;
float paddleXPos ;
float paddleYPos ;
float paddleHeight = 200 ;
float paddleWidth = 50 ;

void setup() {
  size(900, 800);
  noStroke() ;
  paddleXPos = width-100 ;
  paddleYPos = (height-paddleHeight)/2 ;
  ballXPos = 200 ;
  ballYPos = height/2 ;
}

void draw() {
  background(boardColor) ;
  // Draw the paddle and the ball
}

At a minimum, add the code to draw the paddle and ball and change the colors. You can use the w3schools.com HTML Color Picker to find garish colors.

Processing references

Always take a look at the Processing references. Notice the difference between rect() and ellipse(). One uses the center and the other uses the corner.

Moving the paddle

If you modify your program to change the value of paddleYPos, the paddle will move. Here are two possibilities for doing this.

Use the mouseMoved() method to have the paddle move with the mouse. This is pretty easy: Only three lines!
Use the keyPressed() method and keyCode variable to move the paddle with the up and down arrows. This requires about eight lines, but it is so old-style.

Struggle your own for a few minutes before consulting with a guru. By the way, you can use both the mouse and the arrow keys to control the paddle.

Processing references

Bouncing off the left and right walls

Try to move the ball horizontally by changing ballXPos inside the draw() method. This is similar to what we did last week and pretty hard. Solve this part in steps. Use ballXSpeed to control how fast the ball moves.

First, just move the ball once from the left side to the right side. Let the ball fall off the end.
Next, get the ball to bounce of the left wall once and then fall of the right side. This will require checking when ballXPos+ballWidth/2 is greater than the width of the window. You’ll need to use Processing’s if statement to do this. Drawing a picture will help.
Finally, get the ball to bounce of both sides. I suspect the instructor will give some hints.

OK. Here are two big hints.

If ballXSpeed is greater than zero, the ball is moving to the right. Otherwise, it is moving to the left.
Change the direction of the ball with the following Processing statement:
ballXSpeed = -ballXSpeed

Processing references

if
else

Bouncing off all walls

If you copy your code for moving the ball left and right and change the X’s within the variable names to Y’s, you are very close to having the ball bounce off all four edges.