Oi Yasmin, tudo bem? Tenho uma sugestão pra você.

Usei a ferramenta "</>" de opções que permite melhor visualização do seu código, como o que fiz no exemplo abaixo, conforme nos é orientado a deixar o código mais fácil de ler e de ser copiado a fim de conferir o exercício! Bem, espero que tenha gostado da sugestão

Seu código usando a ferramenta "</>":

let xbolinha = 100; let ybolinha = 200; let diametro = 30; let raio = diametro /2;

let velocidadeXbolinha = 5; let velocidadeYbolinha = 6;

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

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

function mostraBolinha (){ circle(xbolinha, ybolinha, diametro); }

function movimentaBolinha(){ xbolinha += velocidadeXbolinha; ybolinha += velocidadeYbolinha; }

function colisaoBolinha(){
if(xbolinha + raio > width || xbolinha - raio < 0){ velocidadeXbolinha *= -1; }

if (ybolinha + raio > height || ybolinha - raio <0){ velocidadeYbolinha *= -1; } }

Meu código, semelhante ao orientado na aula:

//variáveis da bolinha
let xBolinha = 300;
let yBolinha = 200;
let diametro = 20;
let raio = diametro / 2;

//variáveis de velocidade da bolinha
let veloXbolinha = 2;
let veloYbolinha = 2;

//função de criação do canvas (o que seria o  'PALCO' lá no SCRATCH)
function setup() {
  createCanvas(600, 400);
}


function draw() {

  background(0);
  mostraBolinha();
  movimentaBolinha();
  colisaoBorda();

}

//função de criação da bolinha com seus parâmetros (largura, altura, diamêtro)
function mostraBolinha(){

  circle(xBolinha, yBolinha, diametro);

}

//função de movimento da bolinha
function movimentaBolinha(){

    xBolinha += veloXbolinha;
    yBolinha += veloYbolinha;

}

//função de colisão da extremidade da bolinha nas bordas do canvas
function colisaoBorda(){

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

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