Não estou conseguindo entender sobre a colisão da borda da bolinha

Olá, Gabriel! Tudo certo?

Obrigado por compartilhar o seu raciocínio e dúvida conosco.

O que acontece no caso dessa função é o seguinte: O p5js considera o centro de um elemento (que no caso é a bolinha) para posicioná-lo.

Logo, se o objetivo é considerar a lateral direita da bolinha, por exemplo, devemos somar o raio da bolinha ao valor do centro. Da mesma forma, se queremos o valor da lateral esquerda da bolinha, devemos subtrair o valor do raio.

Veja as imagens abaixo para entender melhor:

• Posição central da bolinha:

  

• Lateral direita da bolinha (posição central + raio):

  

• Lateral esquerda da bolinha (posição central - raio):

  

O mesmo acontece para as posições de cima e de baixo da bolinha, porém consideramos o eixo Y para isso.

Espero ter ajudado, fico à disposição para ajudar caso precise.

Abraço e bons estudos.

eu estav viajando muito,vlw pela ajuda

Eu acho que entendi assim, como teve que fazer os calculos, de Diametro / 2 . teve que criar uma variavel. variavel let raio = diametro / 2 .

ai na hora la embaixo se colocasse so diametro ia ficar assim . let xBola = 300; let yBola = 200; let dDiametro = 30;

aqui é sem declarar variavel raio como ficaria.

if (xBola + diametro > width || xBola - diametro < 0){ velocidadeXBola *= -1; }

oque iria acontecer e que iria somar Xbola + 30 e depois iria fazer Xbola - 30 já o código que o professor deu na aula que entendi e que. raio = Diametro / 2 ;

este abaixo e como ficou o codigo do professor.

let xBola = 300; let yBola = 200; let dDiametro = 30;

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

a soma aqui seria xBola + 15 > width || xBola - 15 < 0

Professor veja se e isso que entendi.