(if) para de funcionar depois de adicionar (function)

Olá Gabriel, tudo bem contigo?

Bom o seu código possui apenas dois probleminhas que o impedem de funcionar.

1. O primeiro é a variável xbolinha que está declarada com o "B" de bolinha escrito minusculo quando deveria estar maiúsculo. Pois ele está declarado assim:

   let xbolinha = 300;
   

   • Mas ele deveria estar assim:

   let xBolinha = 300;
   

2. Outro detalhe, o parâmetro width não vai ser reconhecido, pois ele estará em escopo global e isso não pode acontecer! Pois elas precisam estar em uma função ou numa variável para poderem ser aplicadas em algum momento no código, elas não podem simplesmente estar "jogadas" no escopo global. É por isso que o p5 vai reclamar no console, e ele dará uma dica sobre isso quando ele falar isso aqui no console: "If you have defined it in your code, you should check its scope", no português: "Se você o definiu em seu código, verifique seu escopo", basicamente se você tem uma verificação no escopo global ela não tem nenhuma função, pois ela está "jogada" ali e não poderá ser chamada em um momento chave ou especifico do código.

Para resolver esse problema podemos simplesmente colocar as verificações dentro da function draw, dessa forma:

let xBolinha = 300;
let yBolinha = 200;
let diametro = 15;
let raio = diametro / 2 

let velocidadeXbolinha = 2;
let velocidadeYbolinha = 2;

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

function draw(){
  background(0);
  circle(xBolinha, yBolinha, diametro)
  xBolinha += velocidadeXbolinha
  yBolinha += velocidadeYbolinha

    if (xBolinha > width) {
        velocidadeXbolinha *= -1;
  }
}

Em suma era isso, caso precise eu estarei por aqui!

Espero ter ajudado!

Abraços e bons estudos.