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 ?
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