Tarefa 12 - Aula 14

Ulisses Silva
4 de nov. de 2018
3 min de leitura

Criar e explicar, com base na teoria dos conjuntos, um dos efeitos disponíveis em http://goo.gl/KATZjk aplicado entre duas imagens à sua escolha.

Para realizar o que é pedido na tarefa, escolhi o efeito do vídeo que é mostrado no tempo (0:40), onde a imagem de uma girafa pela tela e a imagem de fundo vai trocando de acordo com a posição do meio da girafa. (link do vídeo)

A teoria dos conjuntos é o ramo da matemática que estuda conjuntos, que são coleções de elementos. Embora qualquer tipo de elemento possa ser reunido em um conjunto, a teoria dos conjuntos é aplicada na maioria das vezes a elementos que são relevantes para a matemática.

(foto: diagrama de Euler-Venn)

A linguagem da teoria dos conjuntos pode ser usada nas definições de quase todos os elementos matemáticos. Os conceitos elementares e associação de conjuntos são frequentemente ensinados na escola primária, junto com diagramas de Venn, diagramas de Euler, e as operações elementares.

Exemplo de operações com conjuntos

Criação do efeito de transição

Para resolver a tarefa escolhi duas imagens do personagem "Homem-Aranha." Na imagem da esquerda o personagem está com sua roupa clássica e mais famosa. Enquanto que na direita ele está com a vestimenta de simbionte, um ser alienígena que aumenta os poderes do herói ao conviver em simbiose.

Como as imagens possuíam tamanhos diferentes, tive que dar um tratamento no para ajustar e cortar até que ambas possuíssem o mesmo tamanho, no caso, 691 x 854 pixels. Diferentemente do vídeo de referência, na qual ele usa uma girafa que passa pela tela, decidi desenhar o símbolo do próprio Homem-Aranha, para que no centro da tela passasse uma aranha do tamanho das imagens.

Resultado da imagem da aranha. Como ela era simétrica, bastou desenhar um dos lados e depois espelhar e juntar. Decidi deixá-la toda branca e com esse contorno forte preto para fazer contraste com as imagens do fundo que já são muito coloridas.

Uma das lógicas de operação matemática na teoria dos conjuntos é a interseção entre dois conjuntos. Logo, imaginei 3 conjuntos que seriam utilizados para a resolução da tarefa. Os dois primeiros seriam cada uma das imagens do Homem-Aranha, e o terceiro seria um conjunto auxiliar que receberia as imagens dos dois primeiros conjuntos baseando-se na posição de um elemento de interseção, no caso a aranha branca. A ideia é que, visualmente, uma das imagens fique representada à esquerda do centro da aranha, e a outra à direita do mesmo centro.

Programação da aplicação

Primeiro criei 4 variáveis de imagem, as 3 primeiras seriam as imagens do Homem-Aranha junto com a imagem da aranha branca. A quarta variável usei a função "createImage" do processing para armazenar um espaço vazio que fosse do tamanho das outras imagens.

Dentro do Setup, coloquei um tamanho de tela igual o tamanho das imagens (691 x 854), e carreguei as imagens referentes às 3 variáveis iniciais. Como a posição da logo (aranha branca) não seria fixa, pois ela precisava se movimentar lateralmente na tela, criei uma variável inteira para armazenar sua posição X que chamei de "logoX". No setup ela recebe o valor da largura da tela vezes -1. Para que ela inicialmente fiar fora da tela mesmo.

Em seguida, preenchi a imagem auxiliar com a primeira imagem usando a ideia de laços aninhados (scanline) como na tarefa passada (tarefa 11 - aula 13), para tanto, foi necessário criar uma variável do tipo "color", para receber cada pixel dentro dos laços e ir aplicando em cada pixel da imagem auxiliar, esse procedimento de preenchimento inicial foi usado apenas para a tela não começar vazia.

Para fazer o movimento da logo na tela, criei uma variável booleana chamada "troca", que é inicialmente "false", e uma variável char chamada "lado" que inicialmente recebe o caractere 'L', representando a esquerda (left). Dentro de um procedimento de "mousePressed", a "troca" se torna verdadeira caso esteja como falsa. E para interagir com essa "troca", criei um procedimento chamado "movement", que primeiro checa se a "troca" está verdadeira, e depois checa a variável "lado", se ela for 'L', a logo se movimentará para a direita até desaparecer da tela e o lado se torna 'R', e a troca volta a ser falsa. De forma que o usuário, mesmo se clicar no mouse novamente durante a transição de tela, ele terá primeiro que esperar a logo chegar do outro lado antes de trocar novamente.

Por fim, criei um procedimento "mistura", que está constantemente checando o lado, se é 'L' ou 'R'. E realizando através dos laços de scanline, o preenchimento de acordo com a posição da logo. Para tanto, fez-se necessário criar 3 variáveis locais que dependem da posição da logo, para que o preenchimento ocorresse na parte central da logo.

Abaixo segue um exemplo da aplicação.