Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Podemos definir as variáveis xBolinha e yBolinha como metade da largura e altura respectivamente?

Referente ao curso Lógica de programação: comece em lógica com o jogo Pong e JavaScript, no capítulo Iniciando no javascript e atividade Entendendo o P5.js e Draw()

por Alec Koichi Tsutsumi Watanabe
| 15.8k xp | 7 posts

De acordo com o que está escrito no artigo P5.JS: Plano cartesiano postado na lição, podemos definir o posicionamento centralizado da bolinha no plano cartesiano da seguinte maneira:

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

function draw() {
    background (220);
    circle(width/2, height/2, 80);
}

Já que a posição da bolinha pode ser definida como metade da largura e altura, podemos usar width e height para definir as variáveis xBolinha e yBolinha?

Quando altero o código para (veja abaixo), o console retorna erros:

//variáveis da bolinha
let xBolinha = width/2;
let yBolinha = height/2;
let dBolinha = 15;
let raio = dBolinha/2;

//variáveis da velocidade da bolinha
let velocidadeXBolinha = 6;
let velocidadeYBolinha = 6;

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

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

function mostraBolinha(){
  circle(xBolinha, yBolinha, dBolinha)
}

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 = velocidadeYBolinha * -1;
  }
}

Desta maneira, a bolinha não é desenhada.

2 respostas
solução!
por Camila Pessôa
| 920.2k xp | 1928 posts
Alura Scuba Team

Olá, Alec! Tudo certinho?

O problema aqui está relacionado a própria configuração da biblioteca do p5.js

Você consegue implementar a lógica que utilizou, mas pra isso funcionar você precisa indicar na function setup que width e height serão variáveis. Vou deixar um exemplo abaixo para você testar:

//variáveis da bolinha

let xBolinha; //cria a variável vazia
let yBolinha;


let dBolinha = 15;
let raio = dBolinha/2;

//variáveis da velocidade da bolinha
let velocidadeXBolinha = 6;
let velocidadeYBolinha = 6;

function setup(){
  createCanvas(600, 400);
  xBolinha = width/2; //adiciona o valor da variável com o width
  yBolinha = height/2;
}

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

function mostraBolinha(){
  circle(xBolinha, yBolinha, dBolinha)
}

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 = velocidadeYBolinha * -1;
  }
}

Apenas não recomendo fazer dessa forma porque reduz a legibilidade do código e aumenta sua complexidade.

Fico à disposição.

Um abraço e bons estudos!

por Alec Koichi Tsutsumi Watanabe
| 15.8k xp | 7 posts

Olá Camila, tudo tranquilo.

Obrigado!