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

Junho Verde “animado”

 

Há um bom tempo não trabalho com animação (sem querer fazer piadinha), mas surgiu a chance de incrementar algumas cartelas estáticas para uma campanha criada onde trabalho. A princípio o uso de animação não foi cogitado, mas aproveitei a chance para acrescentar um diferencial ao trabalho. Coisa bem simples, até pq ando bem enferrujado nessa área.

E pra não perder o hábito de mostrar um pouco sobre o “processo criativo”, segue como as ideias surgiram:

junho-verde

Junho Verde “animado”

O Monge e o Peixe

Local: sala Walter da Silveira (?), Salvador, Bahia. Data: indeterminada. Na programação daquele dia, um evento ligado à animação (?), um curta singelo, de timming “aceleradinho”, aquarelado, música perfeita para a história e um enredo q misturava humor e certa dose de surrealismo. O nome do filme: The Monk and the Fish. O autor: um homem cujo nome demorei  para pronunciar – Michaël Dudok de Wit. Após a exibição dos quase 6 minutos e 30 segundos, uma única reação: aplausos (o único filme que foi aplaudido naquele dia, se não me engano).

Local: cine Odeon, Rio de Janeiro. Data: 22 de julho de 2017. Na programação daquele dia, um evento ligado à animação (Animamundi), um “papo animado” com o já sexagenário autor do não apenas engraçado The Monk and the Fish, mas também do apaixonante e emocionante Father and Daughter (q me fez chorar mais uma vez…). Dudok brindou a plateia com simpatia, conteúdo e lições valiosas. Após quase 2 horas q passaram voando, uma única  reação: aplausos. O palestrante anterior tb fora aplaudido, mas Dudok foi o único ovacionado com a plateia em pé e por bastante tempo…

Queria ter tietado de perto, mas não foi possível. E se a vida fosse abrevida neste instante, tudo teria valido à pena.

Seguem os links dos curtas para comprovação do que eu digo… ou não.

Não resisti e fui pesquisar sobre a trilha de The Monk and the Fish, la Follia (ou A Folia), que lembra um clima renascentista, mas que tem uma “pegada rock’n’roll” em algumas partes da melodia. Segundo o Wikipedia:

Folia é uma dança surgida no século XV em Portugal cujo esquema harmônico-melódico foi, desde então, utilizado em centenas de variações feitas por mais 150 compositores, de Lully a Sergei Rachmaninov. É um dos mais antigos e recorrentes temas musicais europeus.

E segue um exemplo para verificação, de ninguém menos q Antonio Vivalvi:

Na “grande rede” é possível encontrar outras variações.

O Monge e o Peixe

“Veio de uma estrela!”

Nos idos de não me lembro mais, participei de um projeto muito bacana q me possibilitou atuar na direção de arte e de animação de uma pequena série animada chamada Rockstar. Do projeto original, conseguimos executar 2 dos 3 episódios pensados. Chegamos até a esboçar o storyboard do terceiro vídeo, mas o projeto deu uma parada por conta de verba.

Como forma de fazer o registro do projeto e aproveitando para treinar um pouco de web, montei uma página q reune as duas aniamações, bem como alguns textos complementares, ficha técnica e contato dos autores.

Obrigado a todos q participaram e até uma próxima!

rockstar

“Veio de uma estrela!”

Apenas… FAÇA!

É neste espaço q costumo mostrar um pouco do q faço, do q penso, do q reflito. Mas é tb aqui q me permito dividir um pouco as conquistas geradas pelo esforço empregado nas tais “horas vagas”, já não assim tão vagas, pois q ocupadas…

Ao lado do amigo e ilustrador Marcelo Castro, co-dirigi um curta-metragem patrocinado pelo Programa Petrobras Cultural, o Dalivincasso. O filme levou mais de 2 anos para ficar pronto e vai indo bem, tendo boa receptividade nos salões nacionais e internacionais, como é possível acompanhar tanto no blog do projeto, bem como na página do Facebook. Conseguimos tb entrar na grade de transmissão fechada de uma companhia aérea – a  Norwegian 737 Airlines – e nosso curta será exibido de março a junho deste ano. Participaremos tb de um oficina nos mês de junho em São Paulo como parte integrante do FILE+2015. Nosso curta será parte do material de apoio da oficina, bem como foi selecionado para a premiação.

Ainda falando sobre animação, tive a grata surpresa, há algumas semanas, de ter uma das minhas primeiras animações selecionada para a edição deste ano do Skepto FilmFestival, um festival voltado à produção independente de audiovisual. Meu curta de 1 minuto, Ajudando nosso mundo em 60 segundos será exibido no dia 16 de abril, numa sessão voltada ao tema da sustentabilidade. Montei esta animação no final de 2010 e desde então é um material q vem me dando algumas alegrias. O tema tb ajuda, pois é uma discussão atual, mas é bom saber q um trabalho ainda está na ativa, sobrevivendo e chamando a atenção das pessoas. Talvez seja a dica q deixo para quem está interessado em fazer qq coisa: por mais desgastante q possa parecer e aparentemente sem possibilidade de retorno, FAÇA. Ninguém sabe ao certo o q acontecerá com seu trabalho. Se ele for bom (na opinião de alguns ou de tantos), haverá retorno. Se não for, vc pelo menos ousou (começou, fez e terminou) e é o q importa. Terminou, parta pra outra. Só a experiência e a persistência vão ajudar-nos a fazer trabalhos melhores.

E para terminar um post tão longo, graças ao contato q fiz com o pessoal do site Divulgamat, da Espanha, além de ter sido contemplado com a “imagem do mês” de março (outra “grata surpresa”), os organizadores do site me sugeriram montar uma “expo” virtual e selecionei os 10 post mais curtidos do meu tumblr q mistura Matemática e design, o MMC. Quem quiser ver o resultado basta clicar aqui. Esta tb foi outra ideia q tive há quase 2 anos e q venho “alimentando” como dá, uma vez q o conteúdo tem-se tornado cada vez mais difícil de produzir. Pensei em desistir em vários momentos, cansado por não ter “retorno”, mas não tem jeito. O retorno é bom, revigora, estimula, mas não pode ser o objetivo final. Fazer esperando “algo em troca” frusta, causa ansiedade, não soa natural. A dica continua a mesma: apenas… faça. O resto vem como consequência.

Apenas… FAÇA!