Por que subtrair o raio da bolinha?

Olá Mateus,

É exatamente isso, você precisa subtrair o raio para considerar o limite da bolinha e não o seu centro.

Se você desenha um canvas de altura e largura 200, as coordenadas X=0 e Y=0 ficam no ponto esquerdo superior, e as coordenadas X=200 e Y=200 ficam no ponto direito inferior. Então para que você possa considerar a colisão da bolinha, você precisa somar o raio a posição X e posição Y da bolinha para colisão na lateral direita e abaixo, e subtrair o raio da posição X e posição Y da bolinha para colisão na lateral esquerda e acima.

Olá Mateus, tranquilo?

Vamos lá, de forma simples, é pra subtrair o valor do eixo da bolinha.

Mas como assim?

Quando a bolinha está indo para o lado direito no eixo x (>------->------>-------->------->--------->), o valor de x está aumentando 10, 20, 30, 40... Ou seja, no eixo x (width), a medida que ela sai da esquerda e vai para a direita, o valor é aumentado.

Para que a bolinha volte, é preciso subtrair esse valor. Se ela estiver na posição 600, agora ela precisa ir para a posição 599, 590, 580, 570, 500... Assim por diante. Concorda que agora a bolinha está fazendo o caminho contrário? Saindo da direita e indo para a esquerda (<------<----------<---------<-------<). Daí quando ela passar o eixo x no ponto 0, o valor ficará negativo.

Isso vale para o eixo y tabmém.

            |-----------------------y0        Essa linha horizontal é o ponto zero do eixo y, 
            |                                                indo pra baixo vamos somando e aumentando o valor, pra cima estamos subtraindo
            |
            |
            |
            |
            X0 --> x10 -->> x50 e asim vai
            Essa linha vertical é o ponto zero do eixo x, indo pra direita somamos, indo pra esquerda subtraimos

Se a bolinha passa para a direita do eixo x (no ponto 0), continuar caminhando, ela vai ficar negativa, e vai indo, ou seja, ela a partir desse ponto, é menor que zero. Mesma coisa pro eixo y, de ela passar do 0, e continuar indo pra cima, vai ficando negativo, e pra baixo é positivo.

Tentei passar da forma que eu entendo, se não conseguir sanar sua dúvida, só falar que tento explicar de outra forma kk.

O que está me causando dificuldades aqui é a idéia de subtrair, de tirar. Confesso a vocês. Pra direita nós somamos o raio porque queremos que a área correspondente ao raio da direita seja somada com o centro da bolinha para que o limite à direita seja reconhecido. Até aí ok.

Mas pra esquerda nós subtraímos, ou seja, tiramos essa área correspondente ao raio da esquerda?

Fica difícil imaginar o limite à esquerda sendo reconhecido assim uma vez que estamos subtraindo a área correspondente ao raio da esquerda, parece que não estamos fazendo nada para que esse limite seja reconhecido e que a colisão vai acontecer no centro da bolinha de qualquer jeito, entendem? Com certeza estou confundindo alguma coisa nisso de ter que subtrair o raio e por isso não estou entendendo, enfim, desculpem.

Estou com a mesma dúvida, meu código sem subtrair o raio está funcionando da mesma forma.

let xBolinha = 300;
let yBolinha = 200;
let dBolinha = 20;
let raio = dBolinha / 2;

let velocidadeXBolinha = 5;
let velocidadeYBolinha = 5;


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

function draw() {
  background(0);
  circle(xBolinha, yBolinha, dBolinha);
  xBolinha += velocidadeXBolinha;
  yBolinha += velocidadeYBolinha;

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

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

}

Vacilei, estava distraído e esqueci que já tinha diminuído o raio na condição ||... kkkkk

Olá Mateus,

Ao subtrair não significa que você vai desconsiderar o raio, e sim que você precisa que o programa considere o ponto da bolinha ANTES do centro da bolinha. Quando você desenha invoca a função para desenhar um circulo, você coloca os parâmetros da posição X e Y da bolinha, ou seja o seu CENTRO, e o diâmetro (o tamanho que o circulo terá em pixels). O programa ele não sabe as posições que as bordas do círculo estão, ele sabe a posição do centro e é por isso que você precisa somar o valor do raio ao valor do centro do círuclo, tanto no eixo X quanto no eixo Y, para determinar se houve colisão com a borda da tela na parte inferior e direita. E da mesma forma você precisa subtrair o valor do raio ao valor do centro do círculo, no eixo X e Y, para determinar se houve colisão com a borda da tela na parte superior e esquerda.

Felipe, então nós subtraímos apenas para que o programa saiba qual é o limite da bolinha à esquerda e porque a subtração está atrelada ao lado esquerdo do background que é negativo assim como a adição está atrelada ao lado direito que é positivo? Se for isso mesmo, então fez sentido pra mim!

Ola Mateus,

Sim, é exatamente isso.

Sim, agora eu entendi que essa subtração é simplesmente o tamanho do raio da bolinha à esquerda e que deve ser considerado para que a colisão aconteça no limite dela. Trata-se de uma subtração também porque está no lado negativo do background. Isso serve pro Y também. Muito obrigado, Felipe! Você me ajudou demais!