Introdução à animação

Os programas que criamos até agora em p5.js tinham como característica comum o fato de que seus comandos eram executados uma única vez e, em seguida, a execução era encerrada, apresentando o resultado final. Na maioria das vezes esse resultado era apresentado numa janela gráfica que, obviamente, exibia uma imagem estática, uma vez que a execução do programa já tinha sido encerrada. Mas, e se desejarmos gerar imagens com movimento e/ou possibilitar que o usuário interaja com o nosso programa? Nesse caso precisaremos manter o programa em execução continuamente. O p5.js possui um esquema pronto para gerenciar essa execução contínua do programa, que permite não apenas atualizar e alterar o conteúdo apresentado na janela gráfica, como também receber inputs do usuário, propiciando interatividade. Nesta aula aprenderemos a programar as funções setup() e draw(), que são executadas automaticamente pelo p5.js, com os conteúdos por nós definidos. A programação colocada dentro da função setup() será executada uma única vez, enquanto que o conteúdo de draw() é executado repetidamente até o programa ser interrompido. Também aprenderemos a usar funções e variáveis internas que tratam teclado e mouse, possibilitando-nos desenvolver programas interativos.

Gerando imagens com movimento

As funções setup() e draw()

Para instruir o p5.js que queremos que uma sequência de comandos seja executada somente uma vez enquanto que outra seja repetida várias vezes, precisamos dividir nossos programas em dois blocos, um formando o corpo da função chamada setup() e outro constituindo-se no conteúdo da função draw(), como mostrado na listagem a seguir.

function setup() {
  // comandos a ser executados só uma vez, quando o programa começa
}

function draw() {
  // comandos a executar repetidamente, enquanto o programa estiver rodando
}

Note que o conteúdo de cada função é delimitado por chaves, o que chamamos de bloco (outros exemplos de blocos de programa delimitados por chaves foram vistos nos comandos IF, FOR e WHILE). Esses "blocos" contêm os algoritmos, ou seja, os programas que nós escrevemos e que o p5.js executará automática e sistematicamente da seguinte forma: o conteúdo do bloco da setup() é executado, uma única vez, quando nosso programa tem sua execução iniciada; em seguida é executado o conteúdo da draw(), o qual é re-executado repetidamente. É essa repetição que permite a geração de animações e interações, pois a cada final de execução da draw() a janela gráfica é atualizada com os resultados desse processamento. Por default a draw() é executada 60 vezes por segundo (se o conteúdo dessa execução e a velocidade do dispositivo permitirem), mas essa frequência pode ser modificada por meio da função frameRate(), que define a quantidade de atualizações da janela gráfica, por segundo, que desejamos.

Qualquer um dos programas vistos até o momento funcionaria da mesma forma se colocado dentro da função setup(), como ilustrado pela listagem a seguir, que mostra nosso primeiro programa em p5.js, agora utilizando as funções setup() e draw().

Uma vez que passamos a utilizar as funções setup() e draw(), não mais é permitido deixar comandos "soltos" fora dessas estruturas, exceto as declarações de variáveis globais, que serão abordadas na próxima seção.

function setup() {
  createCanvas(400, 400);
  line(0, 0, 200, 200);
}

function draw() {
}

Atividade 1

Modifique o programa anterior, movendo a chamada da função line() para o bloco da função draw(). Mudou alguma coisa? Agora modifique a chamada para line(0, 0, mouseX, mouseY). Veja o que acontece se você mover o mouse dentro da janela gráfica. Pense numa solução para eliminar o rastro da linha.

Observação: a exemplo das já conhecidas width e height, mouseX e mouseY são variáveis de sistema; seus conteúdos correspondem à posição atual do mouse.

Saiba mais sobre funções

Função é um trecho de programa que possui um nome, podendo ter parâmetros de entrada e um valor de retorno, e é executado toda vez que chamamos esse nome em nossos programas. Desde o início temos nos utilizado de funções disponíveis na biblioteca (library em inglês) p5.js, como createCanvas(), circle(), rect(), noFill() e random(), entre outras. Nós usamos as funções sem precisar saber como é sua lógica de programação interna, sem nem mesmo ver seus algoritmos internos. Só precisamos saber se devemos passar parâmetros (quais são e em que ordem, como por exemplo na circle() que deve receber, nessa ordem, as coordenadas x e y do centro do círculo e seu diâmetro) e se a função retorna alguma coisa (como por exemplo a random(), que retorna um número aleatório).

As funções da biblioteca p5.js, assim como de outras bibliotecas que podem ser agregadas (como, por exemplo, uma biblioteca para tocar e manipular arquivos de áudio ou uma biblioteca para produzir efeitos de realidade aumentada), vêm prontas e nós só precisamos chamá-las em nossos programas para que executem suas funcionalidades. Mas há algumas funções especiais, como é o caso de setup() e draw(), assim como das que tratam teclado, mouse e outros eventos do sistema, que podem ter seus conteúdos escritos por nós ao programarmos em p5.js. Essas funções, contudo, não serão chamadas por nós, mas automaticamente pelo sistema. A setup() é chamada quando o programa inicia, a draw() a cada determinado período de tempo (1/60 de segundo, por default), as de teclado quando o usuário tecla alguma coisa e assim por diante. Dessa forma, conseguimos programar o que queremos que aconteça toda vez que o programa é iniciado, o que deve ficar repetidamente sendo processado e o que deve acontecer, por exemplo, quando o usuário pressiona determinada tecla ou clica seu mouse. Futuramente veremos como criar as nossas próprias funções, com nomes, parâmetros de entrada e de retorno definidos por nós.

Observação: diferente do Processing (que é baseado em Java), em JavaScript/p5.js não é necessário declarar o tipo do valor de retorno de uma função (não existe a palavra void antes do nome da função). Toda função é declarada simplesmente com function nomeDaFuncao() { ... }, e ela pode ou não usar a palavra return para devolver um valor — isso não precisa ser indicado com antecedência.