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
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
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!