1.6 Começando a animar

Até agora vimos comandos e sintaxes para criação de imagens estáticas. A partir do conhecimento e uso de variáveis, é possível gerar imagens em movimento, por exemplo. Veremos como produzir nossas primeiras animações usando P5.

O código a seguir gera um “ponto” preto de 10px de diâmetro no centro de um canvas de 400×400 pixels.

ponto_estatico

Agora vamos escrever, depois do comando point(), a seguinte linha:

x = x + 1;

O q isso quer dizer? Quer dizer q na próxima vez q a sequência de comandos for lida (pois tudo o q está dentro de function draw() {} é lido em loop), o ponto será desenhando mais 1 pixel à direita do anterior.

ponto_movimento_com_rastro
Se o background estiver escrito em function setup(), o ponto deixa um “rastro” ao se mover

Se o comando background estiver escrito em function setup() {}, o ponto anterior não é apagado, criando um “rastro”. Para evitar isso e o ponto se “mover” sem deixar vetígios, basta escrever o comando de background()  dentro de function draw() {}.

ponto_movimento
Aqui o ponto se move sem deixar “vestígios” pois o comando background foi escrito em function draw()

Variando a parcela da soma (experimente escrever x + 10 ou x + 0.5, por exemplo), teremos “velocidades” diferentes para o deslocamento do ponto. Para valores negativos (x – 1, por exemplo), o ponto corre no sentido oposto.

Alterando o valor inicial de x para 0, veremos o ponto percorrer toda a largura do canvas até sumir pela borda direita.

ponto_x-inicial=0
Acima o valor inicial de x = 0 faz com q a animação comece na borda esquerda do canvas

DICA: uma forma abreviada de escrever x = x + 1 é escrever x++.

Mas e se quisermos q o ponto volte ao local original qdo chegar à borda oposta? Ou se quisermos q ele mude de sentido? Para isso vamos conhecer um comando de condicional, o if.

Vamos ao primeiro caso: voltar ao local original qdo o ponto atingir a borda direita, partindo da borda esquerda. Para tanto, basta escrever as linhas de código a seguir, após o incremento de x:

if (x > width) {
x = 0;
}

As linhas acima dizem q quando o valor de x for maior q a largura da tela (a condição deve ser escrita dentro dos parênteses), a variável deve voltar ao valor 0, o q significa voltar à borda esquerda do canvas (essa instrução fica dentro das chaves).

if_caso1
Começando a se mover a partir da borda esquerda do canvas, qdo o ponto atingir a margem direita, ele volta automaticamente para a posição original com x= 0

Vamos ao segundo caso: mudar o sentido da animação.

Aqui precisamos modificar um pouco o código original para atingir nosso objetivo. A primeira coisa a fazer é criar uma variável q será o nosso valor de incremento, ao invés de escrever um número à soma de x como fizemos até agora.

Em function setup() {}, vamos atribuir um valor para inc. Por exemplo, inc = 1.

Em seguida vamos inserir esta variável na soma de x, ou seja, x = x + inc.

O “pulo do gato” vem agora. Após a linha de soma, vamos criar duas condicionais. A primeira delas será para quando x chegar à borda direita. Quando isso acontecer, o valor de inc será negativo, o q fará o ponto mudar o sentido da animação, ou seja:

if (x > width) {
inc = -inc;
}

E a segunda condicional será qdo o ponto atingir a borda esquerda do canvas. Novamente o inc deverá sofrer nova inversão, conforme as linhas abaixo:

if (x < 0) {
inc = -inc;
}

if_caso2

Experimente e veja o ponto mover-se de um lado para o outro infinitamente!

DICAS: Para “enxugar” o código e deixá-lo mais “limpo”, existem algumas formas de “abreviação” de escrita. Na imagem a seguir veremos 2 delas.

if_caso2_shortcode

A primeira diz respeito à soma x = x + inc q pode ser escrita como x += inc

Já a segunda é a utilização de duas barras verticais “||” dentro da condicional if . Isso significa q se a primeira condição OU a segunda condição acontecerem, a expressão será verdadeira e a operação dentro das chaves será executada.

Clique aqui para ver o código final.

1.6 Começando a animar