1
resposta

width e height idefinido.

Estou fazendo o passo a passo da aula mas width e height está indefinido. O que devo fazer ? https://editor.p5js.org/Angelica005/sketches/yOJ2suPUF

1 resposta

Olá, Angélica! Tudo bem?

Perdão pela demora em te responder.

Verifiquei seu código e identifiquei o que podemos alterar para ele funcionar. Vamos lá!

Primeiro, você precisará tirar o seguinte bloco de código da função draw:

xBolinha += velocidadeXBolinha;
yBolinha += velocidadeYBolinha;

E, para esses atributos, vamos criar uma nova função: a function movimentaBolinha(). Sua função ficará desta forma:

function movimentaBolinha(){
  xBolinha += velocidadexBolinha;
  yBolinha += velocidadeyBolinha;
}

E, voltando à function draw(), vamos criar dentro dela a função movimentaBolinha(), pois precisamos chamar a função para ela funcionar.

Ok. Já temos uma parte pronta do código!

Para acontecer a colisão nas bordas, você precisará criar uma nova função: a function verificaColisaoBorda(). O bloco de código a seguir irá dentro dela:

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

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

E, assim como a outra função feita ali em cima, vamos também chamá-la na function draw().

Portanto, a função draw ficará desta forma:

function draw() {
  background(0);
  circle(xBolinha,yBolinha,diametro);
  movimentaBolinha();
  verificaColisaoBorda();
}

E, para melhor compreensão de como seu código ficará por completo, abaixo irei deixar ele arrumado, caso você fique em dúvida de alguma alteração.

//variáveis da bolinha
let xBolinha = 300;
let yBolinha = 200;
let diametro = 15;

//movimento da bolinha
let velocidadeXBolinha = 6;
let velocidadeYBolinha = 6;


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

function draw() {
  background(0);
  circle(xBolinha,yBolinha,diametro);
  movimentaBolinha();
  verificaColisaoBorda();
}

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


function verificaColisaoBorda(){
  if (xBolinha > width ||
      xBolinha < 0){
    velocidadeXBolinha *= -1;
  }

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

Se alguma dúvida persistir, estou à disposição para te ajudar.

Abraços e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓