colisao raquete e bolinha

Oi Paulo! Como você está?

Na primeira vez que verificamos a colisão com as bordas, estávamos delimitando o espaço em que a bolinha poderia se mover. Antes dessa função, a bolinha se moveria infinitamente em uma mesma direção, tendo seu x e y cada vez maiores. Por isso na função verificaColisaoBorda() os parâmetros utilizados são width e height, que são parâmetros embutidos no P5.JS e que dizem respeito ao tamanho que definimos na função setup() . Vamos relembrá-la:

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

Logo, width corresponde ao x da tela, e height ao y da tela.

function verificaColisaoBorda() {
    if (xBolinha + raio > width || xBolinha - raio < 0) {
        velocidadeXBolinha *= -1;
    }
    if (yBolinha + raio > height || yBolinha - raio < 0) {
        velocidadeYBolinha *= -1;
    }
}

Aqui, se a posição da bolinha for maior ou menor que o tamanho da tela, a velocidade será invertida: ao tocar na borda, a bolinha muda de direção.

Quando criamos a função verificaColisaoRaquete(), a estratégia foi comparar a posição x da bolinha com a posição x da raquete, como está na primeira condição da função: xBolinha - raio < xRaquete + raqueteComprimento. Subtraímos o raio da bolinha para que ela seja considerada em sua totalidade, já que o x representa o ponto central do objeto, e o mesmo acontece com a adição do comprimento da raquete. Portanto, essa estratégia faz com que a bolinha reconheça todo o espaço equivalente ao tamanho da raquete, na borda esquerda da tela, e a colisão com a borda para de ocorrer.

Para isso entram as próximas duas verificações: yBolinha - raio < yRaquete + raqueteAltura && yBolinha + raio > yRaquete, que comparam a posição y (vertical) da bolinha e da raquete, e garantem que a bolinha apenas vai reconhecer a raquete quando o y dos dois objetos forem equivalentes.

Vou deixar aqui um artigo bem legal que fala sobre como funciona o plano cartesiano no P5.JS e que pode ajudar a compreender como funcionam esses cálculos condicionais:

• P5 JS: Plano Cartesiano

Espero que tenha ficado mais claro, Paulo. Estou a disposição.

Excelente explicação. Já ficou bem mais claro pra mim

Poderia explicar a lógica dessa ultima sequencia de códigos

&& yBolinha + raio > yRaquete

Havia entendi o porque de diminuiu o raio para considerar a bolinha na sua totalidade mas não entendi o porque da somar

Claro, Paulo!

O raio é metade do diâmetro da bolinha. Ele representa o valor do ponto central do círculo até qualquer ponto em sua extremidade. Quando estamos trabalhando no plano cartesiano, precisamos considerar qual ponto da bolinha nos interessa em determinado momento. A totalidade da bolinha não é necessariamente toda sua área, mas sim o ponto externo de sua circunferência.

Observe os valores a partir do eixo y do plano cartesiano. Quanto menor for o valor, mais acima ele se encontra, e quanto maior, mais abaixo. Ao subtrairmos o valor do raio do y da bolinha (que é seu ponto central), nosso resultado é essa extremidade mais acima. E ao somar o valor do raio, temos como resposta a extremidade de baixo. Por isso a operação é diferente dependendo do que estamos analisando na condição.

O mesmo vale para o eixo x em relação aos lados. Quando menor o x, mais à esquerda, e quanto maior, mais à direita.

Se ficou alguma dúvida, estou por aqui.

Abraço!

Ah ok no caso tanto se diminui como se soma o raio do eixo y porque nesse caso nos interessa tanto a parte superior da bolinha (-raio) como a parte inferior da bolinha (+raio) diferentemente do eixo x que apenas nos interessa a porção mais esquerda da bolinha ( - raio) que é parte que colide com a raquete. Estou correto?

Isso, Paulo!

A parte esquerda da bolinha é o que nos interessa pois é o que colide com a raquete, exatamente. E essa é uma condição dentro no nosso if. Vamos analisá-lo em partes.

if (xBolinha - raio < xRaquete + raqueteComprimento && yBolinha - raio < yRaquete + raqueteAltura && yBolinha + raio > yRaquete)

Em JS, && é um operador lógico que significa "e". É como se tivéssemos três ifs dentro de uma linha apenas, cada um com uma condição que será analisada e terá um retorno verdadeiro ou falso.

• Em xBolinha - raio < xRaquete + raqueteComprimento, analisamos a parte esquerda da bolinha e a colisão com a raquete;
• Em yBolinha - raio < yRaquete + raqueteAltura comparamos a parte superior da bolinha com a parte inferior da raquete;
• Em yBolinha + raio > yRaquete comparamos a parte inferior da bolinha com a parte superior da raquete.

Quando todas as condições forem verdadeiras, ou seja: a bolinha está no mesmo x que a raquete, nem acima nem abaixo no eixo y, a colisão acontece e a movimentação da bolinha muda de direção.

Abraço!