Oi, Mariana! Espero que esteja tudo bem com você!

Bom, é normal atravessar um pouco mesmo porque o instrutor faz o cálculo a partir do diâmetro inteiro da bolinha. Sendo assim, a sensibilidade é um pouco menor e a bolinha precisa "entrar" um pouco mais na borda para que a colisão seja reconhecida. Para resolver, o instrutor também propõe a solução de cálculo através do raio da bolinha, que é uma parte um pouco menor dela e a sensibilidade irá aumentar. Vou enviar o código para você visualizar melhor:

let xBolinha = 300 
let yBolinha = 200 
let diametro = 15
let raio = diametro/2

let velocidadexBolinha = 5 
let velocidadeyBolinha = 5

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

function draw() { 
  background(0); 
  circle(xBolinha,yBolinha,diametro); 
  xBolinha += velocidadexBolinha; 
  yBolinha += velocidadeyBolinha;

if (xBolinha + raio > width || xBolinha - raio < 0){ 
velocidadexBolinha *= -1; 
 }

if (yBolinha + raio > height || yBolinha - raio < 0){ 
velocidadeyBolinha *= -1; 
}

}

Essa lógica pode ser encontrada nesta aula: https://cursos.alura.com.br/course/pong-javascript/task/56092

Espero que as informações tenham ajudado!

Um forte abraço, fico à disposição e bons estudos!!!

A bolinha não entra um pouco ela some lá, mas acho que no caso é a tela que é maior que o quadro e foi reduzida e fica aquela barra, eu não tinha reparado, então consegui extende-la.

Olá, Mariana!

Entendi agora. Provavelmente foi esse o problema na hora da visualização pelo preview do editor web do p5.js, pois testei novamente seu código no meu e verifiquei que a bolinha colide normalmente nas bordas. Fiz até um gif, olha só:

Legal, né? :D

Seu trabalho está ficando ótimo, parabéns!!!

Continue compartilhando suas dúvidas e progresso conosco.

Um abraço e bons estudos!