Comportamento da bolinha não acontece como esperado

Esse é meu código:

let xBolinha = 300;
let yBolinha = 200;
let diametro = 15;

let velocidadeXBolinha = 6;
let velocidadeYBolinha = 6;

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

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

  xBolinha *= xBolinha + velocidadeXBolinha;

  yBolinha *= yBolinha + velocidadeYBolinha;

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

}

Porem quando aperto o play a bolinha apenas cai do meio para a diagoinal diereita e não bate e volta como no vídeo.