Comentei todos os comandos, pois um código bem comentado fica mais fácil de realizar a interpretação, segue código conforme solicitado na atividade
let xBolinha = 300; // Variável da Posição X da bolinha
let yBolinha = 200; // Variável da Posição Y da bolinha
let dBolinha = 15; // Variável do Diametro da bolinha
let rBolinha = dBolinha/2; //Variável do Raio da bolinha
let velocidadeXBolinha = 6; // Variável da Velocidade da bolinha no eixo X
let velocidadeYBolinha = 6; // Variável da Velocidade da bolinha no eixo Y
function setup() {
createCanvas(600, 400);
}
function draw() {
background(0); // Fundo do Programa
mostraBolinha(); // Chamada da função mostraBolinha()
movimentaBolinha(); // Chamada da função movimentaBolinha()
colisaoBolinha(); // Chamada da função colisaoBolinha()
}
function mostraBolinha(){ // Função para mostrar a bolinha
circle(xBolinha, yBolinha, dBolinha); // Inicialização da bolinha
}
function movimentaBolinha(){ // Função para movimentar a bolinha
xBolinha += velocidadeXBolinha; // Comando para bolinha se movimentar no eixo X
yBolinha += velocidadeYBolinha; // Comando para bolinha se movimentar no eixo Y
}
function colisaoBolinha(){
if (xBolinha + rBolinha > width || xBolinha - rBolinha < 0){
velocidadeXBolinha *= -1; // Inverter o lado do eixo X da bolinha quando tocar na borda
}
if(yBolinha + rBolinha > height || yBolinha - rBolinha < 0){
velocidadeYBolinha *= -1; // Inverter o lado do eixo Y da bolinha quando tocar na borda
}
}