Referência - draw()

 

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().

Só pode haver uma função draw() por sketch, e draw() deve existir se você quiser que o código execute constantemente, ou para para processar eventos como mousePressed(). As vezes você pode ter uma chamada vazia de draw() no seu programa.

É importante notar que o sistema de coordenas é redefinido ao início de cada chamada de draw(). Ou seja, se alguma transformação for executada dentro de draw() (ex.: scale, rotate, translate) ela será esquecida quando draw() rodar novamente, seus efeitos não acumularão durante o tempo. Por outro lado, aplicações de estilo (ex.: fill, stroke, etc) continuará até ser modificada explicitamente.

Sintaxe

function draw(){

}

Referência:

https://p5js.org/reference/#/p5/draw