Creative Coding · Session c11

Debugging

Every coder writes bugs. The real skill is finding them.

Here is a secret professional programmers know: nobody writes code that works the first time. Bugs — mistakes that make the code do the wrong thing — are completely normal. What separates a good coder from a frustrated one isn't avoiding bugs, it's being a calm detective who can track them down. This session is all about that detective work.

There are two kinds of bug:

Errors — the code crashes and the console shows a red message (a typo, a missing bracket). The message even tells you the line number.
Silent bugs — the code runs, but does the wrong thing (the ball won't bounce, the score counts twice). No error message — you have to hunt.

Target behaviour — the ball should bounce

This preview works: the ball bounces off all four walls and leaves a glowing trail. Watch one side bounce carefully so you know exactly what the starter code is supposed to do.

Bug Quest — copy, run, investigate

The full starter code below contains one silent bug. Copy it into the editor and run it. The ball will escape through the left or right wall. Use the five-step method to find the cause before opening Case 1.

let x, y, vx, vy;
let r = 18;              // radius

function setup() {
  createCanvas(420, 260);
  x = width / 2;
  y = height / 2;
  vx = 3.2;              // horizontal speed
  vy = 2.3;              // vertical speed
}

function draw() {
  background(13, 17, 23, 40);   // faint = trail
  x += vx;
  y += vy;
  // bounce: if it hits a wall, flip the speed
  if (x < r || x > width - r)  vx * -1;
  if (y < r || y > height - r) vy *= -1;
  noStroke();
  fill(6, 182, 212);
  circle(x, y, r * 2);
}

🔧 The debugging method — 5 calm steps

Read the error. If there's a red message, read it slowly — it names the problem and the line number. Half of bugs are solved right here.
Print the values. Add console.log(x, vx) to see what a variable actually is. Bugs love hiding in "I assumed it was 5, but it was 0."
Isolate it. Comment out lines with // until the bug disappears. The last line you removed is near the culprit.
Check your assumptions. Is that variable spelled right? Is it == (compare) or = (set)? Is the array index off by one?
Explain it out loud. Tell the bug to a rubber duck (or a parent). Saying it in words often reveals the mistake — this really is a famous trick called rubber-duck debugging.

Check your diagnosis

Case 1 is the bug in the full starter code. Cases 2 and 3 are two fresh bugs to solve after that. Find each one before opening the answer.

🔍 Case 1 — the ball flies straight through the wall

if (x < r || x > width - r) vx * -1;

The ball never bounces off the sides — it just leaves the screen. The line looks almost right…

Reveal

vx * -1 just calculates −vx and throws it away — it never stores it back. It must be vx *= -1 (or vx = vx * -1). A silent bug: no error, wrong behaviour.

🔍 Case 2 — a red error: "y is not defined"

function draw() {
  background(13, 17, 23, 40);
  x += vx;
  bally += vy;
  circle(x, y, r * 2);
}

The console shows a red ReferenceError. Where does step 1 (read the error) point you?

Reveal

The variable is y, but the code says bally — a typo. The error even names it: "bally is not defined." Fix: y += vy;. Step 4 (check spelling) catches this.

🔍 Case 3 — the score jumps by 2 every time

let score = 0;
function mousePressed() {
  score = score + 1;
  score += 1;
  console.log(score);
}

You expected the score to go up by 1 per click, but the log shows 2, 4, 6… Step 2 (print the values) already gave you the clue.

Reveal

The score is added to twice — score = score + 1 and score += 1 do the same job. Delete one line. (These "add twice by accident" bugs are super common.)

The most dangerous typo in coding: = vs ==. One = sets a value; two == compares. Writing if (score = 10) secretly sets the score to 10 and is always treated as true. Always double-check: am I asking a question (==) or giving a command (=)?

Challenges — break it, then fix it

In the working sketch, add console.log(x, y) inside draw(). Open the console and watch the numbers change. (This is your most useful debugging tool.)
Change vy *= -1 to vy *= 1. Predict what happens before you run it, then run it. Were you right? Now fix it.
Delete the - r from x > width - r. Watch the ball sink half-way into the wall before bouncing. Explain why using the radius.
Introduce a typo on purpose (rename vx to vX in just one place). Read the red error, then use it to find and fix your own bug.
Detective challenge: Ask a parent to secretly change one thing in the code. Use the 5-step method to find it. Time yourself.

Next session → c12: State & Modes You can now hunt down a bug without guessing. Next you will make a program remember what is happening — day or night, playing or paused — and change its behaviour when that state changes.

Debugging

Target behaviour — the ball should bounce

Bug Quest — copy, run, investigate

Check your diagnosis

Ask your tutor