Exercício concluído e dúvida

Oi, Krissie! Tudo bem com você?

Acho que não entendi muito bem, você deseja de início manter o tamanho da bolinha e depois de um certo tempo mudar o tamanho?

Porque o x e o y da bolinha já são alterados na function movimentaBolinha(). O x e o y são os pontos que a bolinha está posicionada na tela e funcionam de acordo com o plano cartesiano do p5.js.

Fico no aguardo, um abraço e até breve!

Oi, Camila! Tudo sim e vc?

Acho que não me expressei direito. Mas seria em relação ao ponto de origem da bolinha. Por exemplo, se a tela tem tamanho 600 em x, o xBolinha irá partir de 300. Mas se eu alterar o tamanho da tela para 400 em x, para o xBolinha partir do centro novamente, preciso alterar manualmente o valor dele. Gostaria de saber como montar o código para que xBolinha e yBolinha fiquem posicionados sempre no centro, mesmo que eu altere os valores de largura e altura da tela.

Agradeço desde já, até breve.

Oi Krissie, tudo bem? Pelo que entendi, diferente do Scratch, no plano do Javascript, a bolinha sempre começa no centro do eixo. Não precisamos definir isso, como fizemos no Scratch. Perceba que em momento algum a gente define o local de saída da bolinha quando apertamos o "start", mas apenas o tamanho do fundo. Já no Scratch, colocavamos: "Vá para a posição "0" em X e "0" em Y." Acho que é essa a sua dúvida. Espero te ajudado.

Até mais.

Oi Breno, tudo joia e com você? Acredito seja o contrário, no Scratch o centro do plano é a coordenada x=0 e y=0, enquanto no p5.js a cordenada 0 e 0 é o canto superior esquerdo. Pelo o que entendi no exercício, quando definimos o xBolinha e yBolinha é referente a cordenada inicial do círculo.

Nesse exemplo aqui embaixo eu deixei o xBolinha com o valor do exercício e na linha 18 eu alterei o tamanho do fundo e o círculo não fica no centro. A minha dúvida é em como montar o código para que o xBolinha sempre inicie no centro da tela, independente do tamanho da tela.

Oi Krissie!!! Que bom! Tudo certo também!!! É verdade, não tinha atentado pra isso!!! Talvez se você fizesse como fizemos com o raio, tipo: let width = 400 let xBolinha = width / 2 let height = 200 let yBolinha = height / 2

já tentou isso? Só que pra inserir esses valores manualmente na hora que tivesse rodando o jogo, teria que chamar uma funcão input, e ainda não cheguei nesse nível hehehe

abs

Oi Breno! Eu havia tentado isso e não estava dando certo, mas eu reorganizei e coloquei as fórmulas entre "()" e deu certo.

Valeu!! Abraços

Vou deixar aqui meu código até agora:

//tamanhodatela
let width = 600;
let height = 400;

//variáveis da Bolinha
let xBolinha = (width/2);
let yBolinha = (height/2);
let diametro = 15;
let raio = diametro / 2;

//velocidade da Bolinha
let velocidadeXBolinha = 3;
let velocidadeYBolinha = 3;

//variáveis da minha raquete
let xRaquete = 5;
let yRaquete = 150;
let RaqueteComprimento = 10;
let RaqueteAltura = 90;

function setup() {
  createCanvas(width, height);
}

function draw() {
  background(0);
  mostraBolinha();
  movimentaBolinha();
  verificaColisaoBorda();
  mostraRaquete();

}

function mostraBolinha() {
  circle(xBolinha, yBolinha, diametro);
}

function movimentaBolinha() {
  xBolinha += velocidadeXBolinha;
  yBolinha += velocidadeYBolinha;
}

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

function mostraRaquete() {
  rect(xRaquete, yRaquete, RaqueteComprimento, RaqueteAltura);
  }

Oi, Krissie e Breno! Espero que esteja tudo bem com vocês!

Essa dúvida foi de quebrar cabeça mesmo, não é?!

Bom, lendo a resposta do Breno, eu percebi que há uma pequena confusão sobre o sistema de coordenadas que é utilizado para posicionar elementos na tela do p5.js e do Scratch.

• Sistema de Coordenadas

O p5.js e o Scratch funcionam através de um sistema de coordenadas para posicionar e movimentar os sprites/atores e outros elementos na tela. Esse sistema é conhecido como o plano cartesiano. No entanto, scratch e p5.js usam o plano cartesiano com quadrantes diferentes, o que pode acarretar em uma leve mudança na lógica utilizada nos cálculos. Vejamos:

Na imagem acima, observamos que o Scratch utiliza todos os quadrantes do plano cartesiano. Por outro lado, o p5.js utiliza apenas o 4ª quadrante do sistema de coordenadas, e é por isso que os valores e um pouco da lógica são alterados durante a execução dos projetos.

O canvas do p5.js é feito nesse quadrante do plano cartesiano.

• Tamanho da tela e posicão de elementos no p5.js.

Quando atribuímos o valor de xBolinha e yBolinha, estamos dizendo ao p5.js os pontos no sistema de coordenadas onde aquele desenho irá aparecer. A lógica pensada pelos dois está correta, basta alinharmos esses detalhes para ficar completamente funcional.

Com a lógica utilizada pelo instrutor no desenvolvimento desse projeto, de fato o ideal é criar uma variável para armazenar os valores do canvas, do background onde o jogo será feito. E aí você fica mais livre para modificar o posicionamento da bolinha. A ideia da Krissie ficou bem legal e funcional ao criar as variáveis tamanho da tela:

//tamanhodatela
let width = 600;
let height = 400;

E depois dividir esses valores para encontrar o ponto central:

let xBolinha = (width/2);
let yBolinha = (height/2);

Minha única sugestão é que faça uma mudança nos nomes das variáveis, pois width e height são reservadas e pode haver conflito futuramente. Poderia substituir , por exemplo , por larguraTela e AlturaTela que ficaria excelente!

Parabéns pela solução encontrada, as sugestões e descobertas de vocês só ajuda o fórum a crescer!!

Um grande abraço e bons estudos! Já estou ansiosa para conferir os projetos de vocês! :D