Atividade 15 - Transição entre Imagens

A proposta da atividade é simular algum efeito de transição mostrado no Video Toaster 400 Demo, que pode ser assistido aqui. O efeito que escolhi foi o mostrado no minuto 20:05.

Efeito escolhido

Para fazer essa transição é preciso entender que os pixels da primeira imagem são divididos ao meio e movidos para os lados, fazendo com que apareça a segunda imagem.

Imagens utilizadas


Para o desenvolvimento da aplicação, inicialmente crio duas variáveis que representarão a posição dos últimos pixels da esquerda e os primeiros da direita, que defino de início como 160 e 161 respectivamente por ser a metade da imagem. Inicializo também as duas imagens que utilizarei, e crio uma nova com as mesmas dimensões, em que esta será responsável por guardar a animação.
No evento draw() verifico se a variável de esquerda é maior ou igual a 0 e se a da direita é menor ou igual a 320, caso seja entra em dois laços for() que percorrerão todos os pixels da imagem. Dentro deles verifico se a posição x do pixel está dentro do intervalo da esquerda ou da direita, caso esteja, o pixel da imagem 1 será adicionado na imagem final, e caso não seja, o pixel da imagem dois será adicionado.
Depois da verificação, mostro a imagem final e acrescento 1 da variável da esquerda e diminuo 1 da direita, para fazer essa transição.

Resultado

Para download do projeto clique aqui.

Comentários

Postar um comentário

Postagens mais visitadas deste blog

Atividade 16 - Polígono regular

Imagem
A proposta da atividade é desenhar um polígono regular no centro da tela, cuja quantidade de lados é informada no código, utilizando a função rotate() do processing. Para o desenvolvimento da aplicação, utilizei a função polares() feita em sala na aula de coordenadas polares, que recebe um raio e um ângulo, e retorna um array com as coordenadas polares do ângulo. E utilizei também a função divideFatias() que também foi feita em sala. De início, crio uma variável que guarda o ângulo do resultado da função dividePizza(), que recebe a quantidade de lados do polígono. Crio também dois vetores que recebem o resultado da função polares(). No primeiro, passo como parâmetro o raio 250, e o a variável do ângulo. No segundo, faço o mesmo, porém com o ângulo multiplicado por 2, para ser o ponto final do triângulo. Uso a função translate() para alterar o ponto principal como sendo o centro da tela. Após isso crio um laço for() que é executado referente a quantidade de lados do polígono. ...
Leia mais

Atividade 7 - Adaptive Logo

Imagem
Para essa atividade, resolvi analisar a adaptive logo da Tygron, que é uma empresa Holandesa focada no planejamento urbano. A Tygron desenvolve e usa tecnologias de jogos para resolver problemas complexos no campo do planejamento espacial, clima e gerenciamento de água, entre outras coisas. A nova identidade visual combina perfeitamente com a tecnologia de ponta do mecanismo de jogos da Tygron e ajuda a desenvolver mais a nível profissional no mercado nacional e internacional. Arte do site da Tygron Sua identidade visual baseia-se em diversas formas distintas, mas que possuem características em comum. Diversas variações do logotipo De inicial, todas as variações do logotipo provêm da letra T relacionada à marca, e a partir dela, implementasse linhas que se unem a outras, formando polígonos. O "T" marcado em preto, com as demais linhas adicionais em vermelho Além das diversas adaptações que podem ser feitas no logotipo da empresa, a agência SI...
Leia mais