Oi Danilo, tudo bem? Espero que sim.
Antes de mais nada, peço desculpas pela demora em obter um retorno!
O p5.js é uma biblioteca JavaScript criada para tornar o desenvolvimento algo acessível e inclusivo para artistas, designers, educadores e iniciantes, ou seja, para todos os públicos. Por conta dessa característica, a biblioteca vem com inúmeras funções ”pré-fabricadas” (algo pronto para você usar), que facilita o processo de escrita do código. No caso de utilizar o Visual Studio Code, todas as funcionalidades devem ser criadas do zero, sendo assim, a função draw(), setup(), preload() e outras já inclusas na biblioteca do p5.js para facilitar a vida da pessoa desenvolvedora, não estariam disponíveis no VS Code. O p5.js ainda permite ter um preview do jogo em uma tela ao lado, minimizando as trocas de tela necessárias no desenvolvimento com um editor de código-fonte.
Ao utilizar o Visual Studio Code, todas as funcionalidades devem ser criadas desde o início,
A divisão dos arquivos em pastas, e a separação dos códigos em arquivos secundários é realmente muito interessante, pois ela auxilia na organização do código, o que facilita a busca por algum código específico.
Contudo alguns cuidados precisam ser tomados para evitar erros. Dentre eles é possível citar: a atenção na grafia utilizada para escrever o nome das pastas, escolhendo nomes descritivos para cada uma e inserir todos os arquivos com os códigos de cada parte no index,como mostra a figura abaixo, pois ele permite que todos os arquivos e pastas sejam reconhecidos, garantindo a leitura de todo o conteúdo.
Com relação a ordem de leitura, ela varia de acordo com a ordem dos comandos inseridos no código, uma vez que a leitura das linhas de código acontece dependendo da ordem em que as funções estão escritas dentro da function draw ( )
. No exemplo abaixo a leitura acompanha os seguintes passos:
function draw() {
background(imagemDaEstrada); // 1 - Desenha o background;
mostraAtor(); // 2 - Mostra a vaquinha na tela;
movimentaAtor(); // 3 - Permite que o ator se movimente pelo cenário;
mostraCarro(); // 4 - Mostra o carro na tela;
movimentaCarro(); // 5 - permite que o carro se movimente pelo cenário;
// 6 - Volta para o início da função draw ();
}
É importante ter em mente que essa leitura é feita de forma muito rápida e que, à medida que, os parâmetros são analisados, o sistema vai buscar a função ou pasta respectiva e os comandos serão executados.
Espero ter ajudado a esclarecer sua dúvida. Caso surjam outras, estarei à disposição para te ajudar :)
Grande abraço!
Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!