let xBolinha = 300; let yBolinha = 200; let diametro = 50; let velocidadeXBolinha = 6; let velocidadeYBolinha = 6; let raio = diametro/2;
function setup() { createCanvas(600, 400); }
function draw() { background(0); circle(xBolinha, yBolinha, diametro); xBolinha += velocidadeXBolinha; yBolinha += velocidadeYBolinha;
if(xBolinha + raio> width || xBolinha - raio < 0){ velocidadeXBolinha *= -1; }
if(yBolinha + raio > height || yBolinha -raio <0){ velocidadeYBolinha *= -1;
}
}
Olá, Gilmar! Como você está?
Essa é uma pergunta excelente e faz todo o sentido. No entanto, para compreendermos melhor precisamos entender o que é o P5 e como ele funciona, vamos lá?
p5.js é uma biblioteca JavaScript para codificação criativa, com foco em tornar a codificação acessível e inclusiva para artistas, designers, educadores, iniciantes e qualquer outra pessoa! O p5.js é gratuito e de código aberto porque acreditamos que o software e as ferramentas para aprendê-lo devem ser acessíveis a todos.
Usando a metáfora de um sketch, p5.js tem um conjunto completo de funcionalidades de desenho. No entanto, você não está limitado à sua tela de desenho. Você pode pensar em toda a página do navegador como um esboço/sketch, incluindo objetos HTML5 para texto, entrada, vídeo, webcam e som.
Mas o que isso significa?
Devido ao p5.js ter sido desenvolvido para ser acessível, a biblioteca vem com inúmeras funções pré-prontas, justamente para facilitar o processo de escrita do código. Sendo assim, a função draw() é uma dessas soluções que já estão incluídas na biblioteca para facilitar a vida do desenvolvedor. E como a função draw() funciona?
Chamada diretamente após setup (), a função draw () executa continuamente as linhas de código contidas em seu bloco até que o programa seja interrompido ou noLoop () seja chamada. A draw () é chamada automaticamente e nunca deve ser chamada explicitamente.
Deve sempre ser controlada com noLoop (), redraw () e loop (). Depois que noLoop () interrompe a execução do código em draw (), redraw () faz com que o código dentro de draw () seja executado uma vez e loop () fará com que o código dentro de draw () retome a execução continuamente. (...)
Só pode haver uma função draw () para cada sketch, e draw () deve existir se você quiser que o código seja executado continuamente ou para processar eventos como mousePressed (). Às vezes, você pode ter uma chamada vazia para draw () em seu programa, (...)
(...)
Mas o que isso significa?
A function draw() é a função que faz a "mágica acontecer". E essa função já pré-pronta na biblioteca p5.js que irá desenhar os elementos no ambiente de visualização. Um aspecto interessante da função é que ela funciona como se possuísse um loop , o que faz com que o código escrito em seu escopo seja executado continuamente.
É por isso que nós não precisamos declará-la, ela já está contida na biblioteca do p5.js de forma padrão.
Além disso, não precisamos criar loops ou uma função de loop para cada bloco que desejamos repetir no código (como o da movimentação da bolinha), pois a draw() cumpre esse papel :)
Vou deixar aqui os links que redirecionam para a fonte de informações, que é a sessão de referência do p5.js
Reference do p5.js que explica detalhadamente o que é a function draw()
Home do p5 com informações sobre a biblioteca
Espero que tenha conseguido ajudá-lo!
Em caso de dúvidas ou se quiser compartilhar seu progresso, estamos à disposição!
Um grande abraço e até breve!