[Dúvida] Tamanho da tela (create canvas)

Fiz uma simulação no tamho da tela (createCanvas) para um quadrado perfeito, ou seja, os dois lados iguais (400x400). A bolinha parou de movimentar de forma aleatória e passou a uma movimentar de forma reta com inclinação perpendicular, assim cheguei a seguinte conclusão:

a) com quadrado perfeito e na velocidade 6 ela toca no ponto zero dos eixos x e y, por isso ela inverte a posição (-1) e continua com uma reta quando toca; b) sendo um quadrado perfeito, para que a bolinha se movimente de forma aleatória, um certo "grau" de inclinação deve ser estabelecido, seja através da velocidade da bolinha ou ajustando de forma proporcional por meio de uma variável a inclinação, que vai determinar o quanto aleatório será esse movimento.

Peço por favor observarem se minhas conclusões fazem sentido. Confesso que estou inseguro quanto a elas.

Muito obrigado a todos!

Segue abaixo o código:

let tamanhoXTela = 400; //variavel do tamanho da tela;
let tamanhoYTela = 400; //variavel do tamanho da tela;
let xBolinha = tamanhoXTela / 2; //variavel de posicao x (horizontal) da bolinha
let yBolinha = tamanhoYTela / 2; //variavel de posicao y (vertical) da bolinha
let diametro = 15; //variavel do tamanho da bolinha
let raio = diametro / 2; //variavel do raio do circulo
let velocidadeXBolinha = 6; //variavel da velocidade eixo x da bolinha
let velocidadeYBolinha = 6; //variavel da velocidade eixo y da bolinha

function setup() {
  createCanvas(tamanhoXTela, tamanhoYTela); //tamanho da tela
}

function draw() {
  background(0); //cor de fundo
  mostraBolinha();
  movimentoBolinha();
  verificaColisaoBorda();
}

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

function movimentoBolinha() {
  xBolinha += velocidadeXBolinha; //movimento e velocidade da bolinha eixo x
  yBolinha += velocidadeYBolinha; //movimento e velocidade da bolinha eixo y
}

function verificaColisaoBorda() {
  //altera o sentido da bolinha no eixo x se tocar na borda
  if (xBolinha + raio > width || xBolinha - raio < 0) {
    velocidadeXBolinha *= -1; //inverte o sentido
  }
  //altera o sentido da bolinha no eixo y se tocar na borda
  if (yBolinha + raio > height || yBolinha - raio < 0) {
    velocidadeYBolinha *= -1; //inverte o sentido
  }
}