14° Atividade - Aula 16: Efeitos de Transição

Para essa atividade, precisamos expor e discutir os modelos natural e matemático, com base na teoria dos conjuntos, de uma aplicação que implementa um dos efeitos apresentados no vídeo abaixo, aplicado entre duas imagens à sua escolha.

Para a atividade, escolhi os efeitos que aparecem entre os tempos 2:48 e 2:58.

Escolhi usar os posteres acima, que são da primeira e segunda temporada de Stranger Things, ambos com o tamanho de 675x1000 pixels.

Modelo Natural:

No trecho do vídeo, são apresentados quatro efeitos de transição simples, onde se diferenciam apenas pela direção por onde ocorrem. Neles uma barra aparece de um dos quatro lados da image e vai até o lado oposto, alterando o local por onde passa para a outra imagem, até alterar as duas imagens entre si.

Modelo Matemático:

Temos ao todo três conjuntos, um com a primeira imagem, uma com a segunda imagem e um terceiro que, inicialmente, possui os pixels de uma das duas imagens, mas durante o efeito, são substituídos pouco a pouco pelos pixels da outra imagem.

Modelo Computacional:

Para o programa que gera o código, decidi fazer através de máquinas de estados, para assim poder fazer todos os quatro efeitos.

Primeira mente defini os estados IMAGEMATUAL, que guardava a imagem que estava na tela no momento, MODO que definia a direção de onde a transição iria começar e por fim, uma variável booleana ALTERAR, que fazia que que nem um outro filtro começa-se sem que o anterior estivesse começado.

Para definir qual efeito iria ser usado, fiz com que sempre que houvesse um clique do mouse, o MODO recebesse um valor entre 0 e 3 e logo em seguida o efeito começa-se.

Com o MODO definido, fiz uma função para cada uma das quatro direções, mas a funcionalidade de todas é a mesma. Sempre que um efeito começa uma variável é incrementada a cada frame, para fazer com que a imagem seja substituída pouco a pouco até o limite da imagem. Essa variável ia de 0 a 675, caso o efeito estivesse ocorrendo na horizontal, ou de 0 a 1000, caso fosse na vertical. Com esse valor definido, criei um scanline, que ia de 0 ao valor da variável, alterando assim os pixels pouco a pouco. Quando a variável chegava ao seu limite, ela voltava a ser 0, ao mesmo tempo que todas as maquina de estado ALTERAR e MODO voltavam ao valor inicial e a IMAGEMATULA era alterada para o valor seguinte. Como último passo, fiz com que os cinco últimos pixels que estavam sendo alterados ficassem vermelhos, para ficar mais fiel ao vídeo original.

E esse é o resultado final.

Link para o drive.

Link para o código no github.