Boa tarde, percebi que nesses códigos a gente apenas cria a função, mas não chamamos ela para ser executada e mesmo assim o programa funciona. O correto não seria chamar essas funções fora da função draw? ou depois chamar a propria função draw ?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Boa tarde, percebi que nesses códigos a gente apenas cria a função, mas não chamamos ela para ser executada e mesmo assim o programa funciona. O correto não seria chamar essas funções fora da função draw? ou depois chamar a propria função draw ?
Boa noite Marcos, tudo bem?
O correto é chamar cada função, em sua respectiva ordem, dentro da function draw(). O que pode estar acontecendo é que ao criar cada função específica você copiou e colou o código dentro da nova função, nesse caso ele está ao mesmo tempo dentro da function draw() e da function bolinha(), por exemplo. Isso garante que tudo ocorra normalmente, visto que o código continua na linha original, mas ao mesmo tempo esteja duplicado e a function bolinha() não está sendo utilizada.
Espero ter ajudado.
Por exemplo: chamamos todas as funçoes dentro da função draw(), correto? e a função draw()? não vamos chamar essa função para que todas as outras sejam chamadas? Não sei se deu pra entender minha duvida... =/
Olá, Marcos! Como vai você?
Sua dúvida é muito pertinente e está diretamente relacionada ao funcionamento da biblioteca do p5.js. Você tem razão, ao declararmos uma função, precisamos chamá-la para que ela funcione corretamente (em javascript mais puro). No entanto, devido ao formato da biblioteca p5.js, temos a possibilidade de chamarmos as funções dentro da function draw().
Dessa forma, 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.
E é por isso que chamamos as funções de desenho em seu interior :) Da mesma forma funciona a preload(), que faz o pré-carregamento de arquivos ou a setup(), que são as configurações iniciais, pois se fossemos utilizar apenas o JavaScript mais puro, certamente o trabalho seria maior.
Vou deixar aqui os links que redirecionam para a fonte de informações, que é a sessão de referência do p5.js