Variável raio

hello, devs!

na aula 07 o professor ensina a como "consertar" aquele problema de parte da bola entrar dentro da borda. fiz o código que ele fez.

esse:

let xBall = 290
let yBall = 190
let dBall = 20
let movimentoXBall = 10
let movimentoYBall = 10
let raio = diametro / 2 

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

function draw() {
  background(0);
  circle(xBall, yBall, dBall)
xBall += movimentoXBall
yBall += movimentoYBall

if (xBall + raio > width || xBall - raio < 0){
  movimentoXBall *= -1
}
if (yBall + raio > height || yBall - raio < 0){
  movimentoYBall *= -1
}

}

só que não funciona por nada. Alguém consegue me dizer o por quê?

Em contrapartida, decidi substituir as variáveis do P5JS "width" e "heigth" pelos valores númericos que as mesmas representam. E deu certo. eis aqui o código:

let xBall = 290
let yBall = 190
let dBall = 20
let movimentoXBall = 1
let movimentoYBall = 1
let raioBall = dBall/2

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

function draw() {
  background(0);
  circle(xBall, yBall, dBall)
xBall += movimentoXBall
yBall += movimentoYBall

if (xBall + raioBall > 600 || xBall - raioBall < 0){
  movimentoXBall *= -1
}
if (yBall + raioBall > 400 || yBall - raioBall < 0){
  movimentoYBall *= -1
}

}

Eu só consegui destravar dessa parte depois que fiz isso. A minha dúvida mesmo é o pq de no primeiro código não funcionar...