Ball Movement - Adding Physics

Time to bring the ball to life! We'll make it move automatically and bounce off the walls.

Step 1: Add Ball Velocity Variables

Add these variables at the top with your other ball variables:

// Ball
let ballX = 400;
let ballY = 200;
let ballSize = 15;
let ballSpeedX = 5;  // NEW: Horizontal speed
let ballSpeedY = 3;  // NEW: Vertical speed

Breaking it down

• ballSpeedX = 5 - Ball moves 5 pixels right per frame (positive = right)
• ballSpeedY = 3 - Ball moves 3 pixels down per frame (positive = down)
• These create the ball's diagonal movement
• Different speeds make the angle more interesting

Step 2: Make the Ball Move

In draw(), after the paddle movement code but before drawing, add:

  // Keep right paddle on screen
  rightPaddleY = constrain(rightPaddleY, 0, height - paddleHeight);
  
  // Move the ball
  ballX += ballSpeedX;
  ballY += ballSpeedY;
  
  // Draw left paddle
  fill(255);
  rect(20, leftPaddleY, paddleWidth, paddleHeight);

Breaking it down

• ballX += ballSpeedX - Moves ball horizontally
  • Each frame, add ballSpeedX to current position
  • Positive speed moves right, negative moves left
• ballY += ballSpeedY - Moves ball vertically
  • Each frame, add ballSpeedY to current position
  • Positive speed moves down, negative moves up

Test it: The ball should move diagonally down and to the right, then disappear off screen!

Step 3: Bounce Off Top and Bottom Walls

Let's make the ball bounce when it hits the top or bottom:

  // Move the ball
  ballX += ballSpeedX;
  ballY += ballSpeedY;
  
  // Bounce off top and bottom walls
  if (ballY <= ballSize / 2 || ballY >= height - ballSize / 2) {
    ballSpeedY = ballSpeedY * -1;
  }

Breaking it down

• ballY <= ballSize / 2 - Ball hit the TOP wall
  • ballSize / 2 is the radius (7.5 pixels)
  • When center is within radius of top (0), it's touching
• ballY >= height - ballSize / 2 - Ball hit the BOTTOM wall
  • height - ballSize / 2 = 400 - 7.5 = 392.5
  • When center reaches this, bottom edge touches wall
• ballSpeedY = ballSpeedY * -1 - Reverse vertical direction
  • If moving down (positive), becomes negative (moves up)
  • If moving up (negative), becomes positive (moves down)
  • This creates the bounce effect!

Test it: Ball should bounce between top and bottom walls now!

Step 4: Reset Ball When It Goes Off Screen

When the ball goes off the left or right edge, we need to reset it:

  // Bounce off top and bottom walls
  if (ballY <= ballSize / 2 || ballY >= height - ballSize / 2) {
    ballSpeedY = ballSpeedY * -1;
  }
  
  // Reset ball if it goes off left or right edge
  if (ballX < 0 || ballX > width) {
    ballX = width / 2;
    ballY = height / 2;
    ballSpeedX = ballSpeedX * -1;  // Send ball toward other player
  }

Breaking it down

• ballX < 0 - Ball went off the LEFT edge
• ballX > width - Ball went off the RIGHT edge (width = 800)
• ballX = width / 2 - Reset to horizontal center (400)
• ballY = height / 2 - Reset to vertical center (200)
• ballSpeedX = ballSpeedX * -1 - Reverse horizontal direction
  • If left player missed, ball goes back to left player
  • If right player missed, ball goes back to right player
  • Keeps game fair!

Test it: Let the ball go past a paddle - it should reset to center and go the other direction!

Step 5: Randomize Ball Start Direction

Let's make the game more interesting by randomizing which way the ball starts:

Update your setup() function:

function setup() {
  createCanvas(800, 400);
  
  // Randomize ball direction at start
  ballSpeedX = random() > 0.5 ? 5 : -5;
  ballSpeedY = random(-3, 3);
}

Breaking it down

• random() > 0.5 ? 5 : -5 - Ternary operator
  • random() gives number between 0 and 1
  • If greater than 0.5 (50% chance), use 5 (goes right)
  • Otherwise use -5 (goes left)
  • Ball starts toward random player!
• random(-3, 3) - Random vertical speed between -3 and 3
  • Negative goes up, positive goes down
  • Creates varied starting angles

Test it: Click "stop" and "play" several times - ball should start in different directions!

Complete Ball Movement Code

Here's the full code so far:

// Left paddle
let leftPaddleY = 200;
let paddleWidth = 10;
let paddleHeight = 80;
let paddleSpeed = 5;

// Right paddle
let rightPaddleY = 200;

// Ball
let ballX = 400;
let ballY = 200;
let ballSize = 15;
let ballSpeedX = 5;
let ballSpeedY = 3;

function setup() {
  createCanvas(800, 400);
  
  // Randomize ball direction at start
  ballSpeedX = random() > 0.5 ? 5 : -5;
  ballSpeedY = random(-3, 3);
}

function draw() {
  background(0);
  
  // Draw center line
  stroke(255);
  strokeWeight(2);
  for (let i = 0; i < height; i += 20) {
    line(width / 2, i, width / 2, i + 10);
  }
  noStroke();
  
  // Left paddle movement
  if (keyIsDown(87)) {
    leftPaddleY -= paddleSpeed;
  }
  if (keyIsDown(83)) {
    leftPaddleY += paddleSpeed;
  }
  leftPaddleY = constrain(leftPaddleY, 0, height - paddleHeight);
  
  // Right paddle movement
  if (keyIsDown(UP_ARROW)) {
    rightPaddleY -= paddleSpeed;
  }
  if (keyIsDown(DOWN_ARROW)) {
    rightPaddleY += paddleSpeed;
  }
  rightPaddleY = constrain(rightPaddleY, 0, height - paddleHeight);
  
  // Move the ball
  ballX += ballSpeedX;
  ballY += ballSpeedY;
  
  // Bounce off top and bottom walls
  if (ballY <= ballSize / 2 || ballY >= height - ballSize / 2) {
    ballSpeedY = ballSpeedY * -1;
  }
  
  // Reset ball if it goes off left or right edge
  if (ballX < 0 || ballX > width) {
    ballX = width / 2;
    ballY = height / 2;
    ballSpeedX = ballSpeedX * -1;
  }
  
  // Draw left paddle
  fill(255);
  rect(20, leftPaddleY, paddleWidth, paddleHeight);
  
  // Draw right paddle
  rect(770, rightPaddleY, paddleWidth, paddleHeight);
  
  // Draw ball
  circle(ballX, ballY, ballSize);
}

Understanding Ball Physics

Let's break down how velocity works:

Positive vs Negative Speed

Speed	Direction
ballSpeedX = 5	Moving RIGHT
ballSpeedX = -5	Moving LEFT
ballSpeedY = 3	Moving DOWN
ballSpeedY = -3	Moving UP

How Bouncing Works

When ball hits a wall:

1. Check if position is at/past wall
2. Multiply speed by -1 (reverse direction)
3. Ball moves away from wall next frame

Example:

• Ball moving right at speed 5
• Hits right wall
• Speed becomes -5
• Now moves left!

What You Learned

In this step, you:

• ✅ Made the ball move automatically with velocity
• ✅ Created bouncing physics for top/bottom walls
• ✅ Reset ball when it goes off screen
• ✅ Randomized ball direction at game start
• ✅ Understood how positive/negative speeds create direction

What's Next?

The ball moves and bounces off walls, but it goes straight through the paddles! Next, we'll add collision detection so paddles can actually hit the ball.

Coming up: Paddle collision and realistic ball bouncing!

---

Next Step: Paddle Collision - Making Contact Matter