Setup e Draw Essas são funções fundamentais para criação de uma animação em P5js. Mais a frente falaremos melhor sobre o que é uma função e como você pode criar suas próprias. Antes quero que você seja capaz de começar a criar alguns desenhos próprios, para isso você deve conhecer setup( ) e draw( ) . setup( ) Essa função rodará uma no início do programa, sendo responsável por definir alguns atributos do ambiente como o tamanho da canvas ou frequencia de quadros por segundo. Leia mais e veja o código de exemplo na página de referência setup( ) . draw( ) Essa é a função responsável por transformar suas linhas de código em um desenho. Ela tem uma particularidade, por padrão ela roda repetidamente várias vezes por segundo e assim possibilita não só a criação de desenhos, mas de animações também. É dentro de draw( ) que escreveremos o código que representa nossos desenhos. Leia mais sobre essa função e veja um código de exemplo na página de refência em português draw( ) . Formas
let yPos = 0; function setup() { // setup() roda uma vez frameRate(30); } function draw() { // draw() roda repetidademente, até ser parada background(204); yPos = yPos - 1; if (yPos < 0) { yPos = height; } line(0, yPos, width, yPos); } Descrição Chamada diretamente depois de setup() , a função draw() executa repetidamente as linhas de código contidas dentro de seu bloco até que o programa seja parada ou noLoop() seja chamada. Note que se noLoop() for chamado em setup() , draw() ainda será executada uma vez antes de parar. Sendo chamada automaticamente, draw() não deve nunca ser chamada de forma explicita, devendo ser controlada com noLoop(), redraw() e loop(). Depois de noLoop() parar a execução do código em draw(), redraw() faz o código dentro de draw() ser exeuctado novamente uma vez, e loop() vai fazer com que draw() volte a executar seu código repetidamente. O número de vezes que draw() executa a cada segundo pode ser controlado com a função frameRate