Creative Coding · Session c10

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.

Live sketch — the ball that should bounce

This one works: the ball bounces off all four walls and leaves a glowing trail. Below it is the code — then we'll break it on purpose and fix it.

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.

Crack the case

Each box below is the bouncing-ball code with one bug introduced. Find it 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.

Coming up next → c11: Prompting (basic) Now that you can hunt down a bug yourself, you're ready for a superpower: asking an AI to help you write and fix code. But there's a catch — an AI only gives good code if you ask well, and you must be able to check its work. Your new debugging skills are exactly what make that safe.

Debugging

Live sketch — the ball that should bounce

Crack the case

Ask your tutor