Começando a animar

Por enquanto entendemos como o grid do p5.js funciona e como conseguimos desenhar nele, usando círculos, retângulos e linhas, colorindo-os ou não.

Mas qual o motivo de existir essas duas estruturas, com o nome de draw e setup?

A estrutura de configuração é executada apenas uma vez, enquanto a de desenho várias vezes. Como assim várias vezes? O processing utiliza um mecanismo que faz com que essa estrutura seja chamada muitas vezes durante um segundo. É o famoso FPS que vocês tem nos joguinhos. FPS é uma sigla para Frames Per Second, ou seja, quadros por segundo. No caso do p5.js, por padrão estamos trabalhando em 60 FPS. O que isso quer dizer? Que em 1 segundo, a estrutura draw é chamada 60 vezes!

Vamos ver como essa chamada da estrutura tantas vezes faz diferença. Vocês já viram variáveis em algoritmos 1, certo? Vamos começar a usar algumas variáveis por aqui também. O p5.js já tem algumas variáveis declaradas que podemos simplesmente usar. Vamos começar com a primeira variável: a coordenada X do mouse! Hã? Sim, o p5.js identifica onde o seu mouse está no grid e fica colocando esse valor em uma variável chamada mouseX, que você pode usar diretamente. Veja este exemplo:

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

function draw() {
  background(200); 
  circle(mouseX, 200, 100);
}

O círculo está se mexendo! E de acordo com a posição do meu mouse. Vocês entendem o motivo de ele só se mexer na horizontal?

E se quisermos que ele siga o nosso mouse diretamente? O que acham que poderíamos fazer? Sim! Usar a outra variável, mouseY (percebam que o X e Y são maiúsculos).

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

function draw() {
  background(200); 
  circle(mouseX, mouseY, 100);
}

Legal, né? Já conseguimos fazer um círculo seguir o mouse! Aqui vocês perceberam o que está acontecendo? O p5.js fica repetindo esse bloco dentro do draw várias vezes por segundo, enquanto atualiza coisas para nós. Desse jeito, conforme o mouse é mexido, as variáveis que guardam os valores de onde a seta está em (x, y) ficam mudando de valor. Já que estamos várias vezes por segundo pegando esses valores, podemos ver essa animação acontecer.

Vamos pensar um pouco sobre isso. O que vocês acham que acontece se eu inverter os valores de mouseX e mouseY na chamada do circulo? [aqui a ideia é exercitar eles a lerem o código e pensarem no que vai acontecer, pra não ficarem só alterando e executando)

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

function draw() {
  background(200); 
  circle(mouseY, mouseX, 100);
}

Agora olhando para esse nosso sketch, quero falar sobre o comando background. Perceberam que ele está dentro do draw? O acham que acontece se eu colocar ele dentro do setup, agora que nossa bolinha fica se mexendo conforme o mouse?

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

function draw() {
  circle(mouseX, mouseY, 100);
}

Wow! Temos rastros! Isso acontece porque agora não estamos mais fazendo o comando de “limpar a folha” com alguma cor a todo momento. Fazemos uma vez e nunca mais.

Ótimo, já conseguimos usar nossa primeira variável e também entender melhor o que está acontecendo no setup e draw . Vamos criar uma variável nossa agora? No javascript, vamos criar variáveis assim: let variavel;. Podemos atribuir um valor na declaracão, como no C: let variavel = 12;. O javascript não tem tipos como no C, onde precisamos dizer que uma variável é int ou float , por exemplo. A linguagem lida com isso da sua maneira (vocês verão conteúdos sobre isso mais pra frente).

Vamos criar nossa primeira variável. Do mesmo jeito que usamos o mouseX para colocar no comando do círculo, agora vamos criar o nosso X e colocar no comando do círculo.

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

function draw() {
  background(200);
  let x = 200;
  circle(x, 200, 100);
}

Ótimo! Temos um círculo no centro do grid. O que precisamos fazer para que ele se movimente agora? Se o X é uma variável, queremos fazê-la? Variar! Então podemos simplesmente aumentar esse valor!

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

function draw() {
  background(200);
  let x = 200;
  circle(x, 200, 100);
  x = x + 1;
}

Antes de rodarmos esse código, vamos pensar. O que vai acontecer? [faz os alunos responderem e até tenta ver uma votação sobre “a bolinha vai andar/não vai andar”]

Percebem que a bolinha não saiu do lugar? Por que isso acontece? Como podemos arrumar? [esperamos respostas]

Claro, se o draw é chamado 60 vezes em um segundo, em todas as vezes o valor do X é 200 e o círculo é desenhado no x = 200, porque a variável X está sendo DECLARADA ali. Não queremos que ela seja declarada neste momento, queremos que ela seja declarada em outro lugar para que aqui possamos só usar e aumentar seu valor. Como fazer isso? Declarando de maneira global, fora das estruturas.

let x;

function setup() {
  createCanvas(400, 400);  
  x = 200;
}

function draw() {
  background(200);
  
  circle(x, 200, 100);
  x = x + 1;
}

Ihu! Agora nossa bolinha anda com uma variável criada por nós, sem a necessidade de mexer o mouse. O que podemos fazer com isso? Um monte de coisas. Que tal brincar um pouco com variáveis e cores? Vamos colocar a bolinha mais à esquerda e usar o valor do X dentro da função fill , pra ver o que acontece.

let x;

function setup() {
  createCanvas(400, 400);  
  x = 0;
}

function draw() {
  background(200);
  
  fill(x);
  circle(x, 200, 100);
  x = x + 1;
}

Nossa bolinha vai, na escala de cinza, do preto até o branco!