Somar o raio ao "ponto zero" ao invés de diminuir do xBolinha

Eu li todos os tópicos e respostas acerca da subtrair o raio da bolinha quando ela vai para a esquerda / para cima, mas mesmo assim não parece fazer sentido pra mim.

Portanto escrevi meu código de uma maneira que fez sentido pra mim e que teve o resultado esperado (de a bolinha rebater ao encostar sua extremidade na borda da tela).

Eu preferi somar o raio ao "ponto zero", ou seja, à extremidade do canvas, antecipando assim o fim da área para a bolinha. E funcionou.

Se alguém puder analisar e me dar um feedback ou mesmo ainda tiver paciência para explicar (como explicaria para uma criança de 6 anos) o porquê de subtração do raio, fico agradecido.

O código ficou dessa forma:

function draw() {
  background(0);
  circle(xBolinha, yBolinha, diametro);

  xBolinha += velocidadeXBolinha;
  yBolinha += velocidadeYBolinha;

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

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

}