Basic Setup - Canvas and Game Objects

Let's create the foundation of our Pong game by setting up the canvas and drawing our paddles and ball.

Step 1: Create the Canvas

Open the p5.js Web Editor at https://editor.p5js.org/ and replace the starter code with:

function setup() {
  createCanvas(800, 400);
}

function draw() {
  background(0);
}

Breaking it down

• createCanvas(800, 400) - Creates an 800x400 pixel game area (perfect for Pong!)
• background(0) - Black background (classic arcade style)
• This gives us a blank black canvas to work with

Test it: Click the play button ▶️ - you should see a black rectangle!

Step 2: Add Paddle Variables

Let's create variables for the left paddle:

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

function setup() {
  createCanvas(800, 400);
}

function draw() {
  background(0);
  
  // Draw left paddle
  fill(255);
  rect(20, leftPaddleY, paddleWidth, paddleHeight);
}

Breaking it down

• leftPaddleY = 200 - Vertical position of the paddle (starts in middle)
• paddleWidth = 10 - How wide the paddle is
• paddleHeight = 80 - How tall the paddle is
• rect(20, leftPaddleY, paddleWidth, paddleHeight) - Draws the paddle
  • 20 is the X position (20 pixels from left edge)
  • leftPaddleY is the Y position (will change as paddle moves)
• fill(255) - Makes the paddle white

Test it: You should see a white vertical rectangle on the left side!

Step 3: Add the Right Paddle

Now add the right paddle:

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

// Right paddle
let rightPaddleY = 200;

function setup() {
  createCanvas(800, 400);
}

function draw() {
  background(0);
  
  // Draw left paddle
  fill(255);
  rect(20, leftPaddleY, paddleWidth, paddleHeight);
  
  // Draw right paddle
  rect(770, rightPaddleY, paddleWidth, paddleHeight);
}

Breaking it down

• rightPaddleY = 200 - Right paddle also starts in middle
• rect(770, rightPaddleY, paddleWidth, paddleHeight) - Right paddle position
  • 770 puts it near the right edge (800 - 20 - 10 = 770)
• Both paddles use the same width and height (consistent!)

Test it: You should now see two white paddles, one on each side!

Step 4: Add the Ball

Let's add a ball in the center:

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

// Right paddle
let rightPaddleY = 200;

// Ball
let ballX = 400;
let ballY = 200;
let ballSize = 15;

function setup() {
  createCanvas(800, 400);
}

function draw() {
  background(0);
  
  // Draw left paddle
  fill(255);
  rect(20, leftPaddleY, paddleWidth, paddleHeight);
  
  // Draw right paddle
  rect(770, rightPaddleY, paddleWidth, paddleHeight);
  
  // Draw ball
  circle(ballX, ballY, ballSize);
}

Breaking it down

• ballX = 400 - Ball starts in horizontal center (half of 800)
• ballY = 200 - Ball starts in vertical center (half of 400)
• ballSize = 15 - Diameter of the ball
• circle(ballX, ballY, ballSize) - Draws a white circle

Test it: You should see the complete game board - two paddles and a ball in the middle!

Step 5: Add the Center Line

Let's add a dotted center line for that classic Pong look:

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

// Right paddle
let rightPaddleY = 200;

// Ball
let ballX = 400;
let ballY = 200;
let ballSize = 15;

function setup() {
  createCanvas(800, 400);
}

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);
  }
  
  // Reset stroke settings
  noStroke();
  
  // Draw left paddle
  fill(255);
  rect(20, leftPaddleY, paddleWidth, paddleHeight);
  
  // Draw right paddle
  rect(770, rightPaddleY, paddleWidth, paddleHeight);
  
  // Draw ball
  circle(ballX, ballY, ballSize);
}

Breaking it down

• stroke(255) - White outline color
• strokeWeight(2) - Thickness of the lines
• for (let i = 0; i < height; i += 20) - Loop every 20 pixels
• line(width / 2, i, width / 2, i + 10) - Draw short vertical line segments
  • width / 2 is the center X position (400)
  • Creates dashed effect by spacing lines 20 pixels apart
• noStroke() - Turn off stroke so paddles don't have outlines

Test it: You should see a dotted line down the middle of the screen!

Complete Step 1 Code

Here's everything together:

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

// Right paddle
let rightPaddleY = 200;

// Ball
let ballX = 400;
let ballY = 200;
let ballSize = 15;

function setup() {
  createCanvas(800, 400);
}

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);
  }
  
  // Reset stroke settings
  noStroke();
  
  // Draw left paddle
  fill(255);
  rect(20, leftPaddleY, paddleWidth, paddleHeight);
  
  // Draw right paddle
  rect(770, rightPaddleY, paddleWidth, paddleHeight);
  
  // Draw ball
  circle(ballX, ballY, ballSize);
}

What You Learned

In this step, you:

• ✅ Created an 800x400 canvas with black background
• ✅ Drew two paddles using rectangles
• ✅ Added a ball in the center using a circle
• ✅ Created a dotted center line with a loop
• ✅ Used variables to store positions and sizes

What's Next?

Right now, everything is static - nothing moves! In the next step, we'll add keyboard controls so players can move their paddles up and down.

Coming up: Making the paddles respond to W/S and Arrow keys!

---

Next Step: Paddle Movement - Adding Keyboard Controls