Por que a bolinha com esse código não começa já centralizada?

Saudações.

Minha dúvida é: por que colocando-se " xBolinha = width / 2 " e "yBolinha = height / 2 " ocorre erro em vez de a bolinha começar centralizada?

Obrigado, Abraço.

//variaveis da bolinha let xBolinha = width / 2 let yBolinha = height / 2 let diametro = 15 let raio = diametro / 2

//variaveis da velocidade da bolinha let velocidadexBolinha = 6 let velocidadeyBolinha = 6

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

function draw() { background(0); mostraBolinha() movimentaBoliha() verificaColisaoBorda() }

//tamanho da bolinha function mostraBolinha(){ circle(xBolinha , yBolinha , diametro) }

//velocidade da bolinha function movimentaBoliha(){ xBolinha += velocidadexBolinha yBolinha += velocidadeyBolinha }

//rebater nas bordas function verificaColisaoBorda(){ //rebater nas laterais if (xBolinha + raio > width || xBolinha - raio < 0){ velocidadexBolinha *= -1 } //rebater no teto e no piso if (yBolinha + raio > height || yBolinha - raio < 0){ velocidadeyBolinha *= -1 } }