movimentando o carro

Oi oi, Thiago! Tudo bem com você?

Seu questionamento é muito pertinente e faz todo o sentido. Para compreendermos melhor precisamos entender o que é o P5 e como ele funciona, vamos lá?

P5.js

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?

function draw()

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.

Além de não precisarmos declará-la, pois já está contida na biblioteca do p5.js de forma padrão, tudo o que inserirmos em seu interior será repetido e é por isso que o carro se movimenta sem parar. :)

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!