O editor

O trabalho de programação com a Processing, assim como com toda linguagem de programação, requer ferramentas adequadas. Para nossa sorte, a equipe de desenvolvimento da biblioteca p5.js pensou nisso e criou um editor muito bom, simples, gratuito e disponível online.

Digite o endereço editor.p5js.org em seu navegador de internet e aguarde. Você deve ver a seguinte imagem na tela de seu computador:

Esse é o editor que utilizaremos. Na metade esquerda da tela, escrevemos os programas. Na metade direita, vemos o resultado.

Vejamos agora como escrever nosso primeiro programa.

O primeiro programa

Seu primeiro programa será muito simples. Em verdade, ele já está escrito dentro do editor:

function setup() {
   createCanvas(400, 400);
 }

function draw() {
   background(220);
 }

Iremos detalhar a função de cada palavra nesse programa mais adiante. Por ora, você precisa saber apenas como executá-lo, ou seja, fazê-lo funcionar e ver o resultado.

Para isso, existem dois botões no canto superior esquerdo do editor:

Você conhece esses botões. O primeiro, com um triângulo no meio, é o play, e o outro, o stop. O primeiro executa os programas e o segundo os interrompe. Logo ao lado, há um quadradinho de seleção chamado Auto-refresh que, se marcado, fará com que as modificações de seu programa se reflitam imediatamente em sua execução. Deixe-o marcado, para simplificar o nosso trabalho futuro.

Sua única tarefa agora consiste em clicar com o mouse no botão play e ver o que acontece. Faça isso agora.

O resultado não é nada excitante: um quadrado cinza surgiu do lado direito do editor.

Vamos analisar agora cuidadosamente o significado de cada palavra desse programa.

Análise

O programa que você criou é bem simples:

function setup() {
  createCanvas(400, 400);
}
function draw() {
  background(220);
}

Já sabemos o que ele faz: cria um quadrado na cor cinza. Mas como?

Todo programa em p5.js tem dois blocos onde as coisas acontecem. O primeiro deles, o bloco de configurações iniciais, é responsável por criar um ambiente onde tudo o mais acontecerá:

function setup() {

}

Observe as palavras function e  setup. Elas estarão no início de todos os programas. Se você quiser programar em p5.js, acostume-se a escrever essas palavras, seguidas dos parênteses e das chaves como mostrado acima.

A palavra function é uma herança dos tempos em que apenas matemáticos programavam computadores. Em verdade, eles criaram a maioria das linguagens de programação fazendo uso principalmente do conceito de função, que tem um significado bem preciso para os profissionais. Para nós, é melhor imaginarmos uma função como uma máquina composta de pequenas partes, como engrenagens ou máquina menores, que vai realizar alguma tarefa específica. Assim, podemos ler esse primeiro bloco como uma função (ou máquina) de nome setup que vai fazer alguma coisa.

A palavra setup pode ser traduzida como configuração. Ela diz que o que vier entre as chaves “{” e “}” conta como elemento do ambiente onde tudo o mais acontecerá. É como se, antes de iniciar o trabalho, arrumássemos nosso espaço de maneira adequada para a realização da tarefa.

Em nosso caso, precisamos criar uma tela, chamada de canvas, sobre a qual iremos desenhar, como um pintor que coloca uma tela em branco sobre um cavalete. Fazemos isso com outra função:

function setup() {
   createCanvas(400, 400);
 }

A função createCanvas(400, 400) cria uma tela com o tamanho de 400 pixels de largura e 400 pixels de altura. Um pixel é um quadradinho muito pequeno. A tela de seu computador é formada de milhões de pixels, como um imenso mosaico, onde cada quadradinho tem uma cor. A maioria dos pixels desta tela em que você está lendo tem a cor branca. Você nem os percebe. Quando ganham outras cores, aparecem letras e desenhos que você reconhece. Assim, quando escrevemos createCanvas (400, 400) estamos criando uma tela de 400 por 400 pixels para nossos desenhos.

Observe que colocamos um ponto-e-vírgula no final da função createCanvas:

   createCanvas(400, 400);

Isso é muito importante. O ponto-e-vírgula indica o fim de um comando, que é o jargão usado pelos programadores para se referirem a funções. Em verdade, programadores profissionais estão acostumados a dar ordens para as máquinas, e seu conjunto de ordens é costumeiramente chamado de programa. Tecnicamente, há outras maneiras de se programar um computador além de empilhar centenas de ordens umas sobre as outras. No entanto, a maioria dos nossos programas será isso mesmo: uma série de ordens que o computador deve executar para realizar uma tarefa. No fim de cada ordem, ou no fim de cada comando, deve haver um ponto-e-vírgula. Não se esqueça dele!

☞ Altere os números dentro dos parênteses para (200, 400) ou (500, 100) e reexecute o programa. O que aconteceu?

❦

Criada uma tela onde desenharemos, vamos para o segundo bloco obrigatório de nossos programas:

function draw() {

}

Esse bloco é formado por uma segunda função, chamada draw. Significa que é o bloco de desenho, onde efetivamente começaremos a pintar em nossa tela criada anteriormente.

Por enquanto, apenas pintamos a tela de cinza com o comando background(220), seguido de um ponto-e-vírgula:

function draw() {
  background(220);
}

A palavra background significa fundo. Ou melhor, a cor da tela. O número entre os parênteses é 220. É um número que varia entre 0 e 255, inclusive. O que acontece se o alterarmos dentro desses limites?

☞ Altere o número dentro dos parênteses para qualquer número inteiro entre 0 e 255, inclusive. O que aconteceu quando você mudou para 0? E quando o número foi 255? Anote os resultados.

❦

Vamos agora estudar o sistema de coordenadas da p5.js para podermos de fato desenhar alguma coisa.

Próximo capítulo