2D Transformation Demo

Opa! Fala galera! Voltando aqui depois de um bom tempo! Mas volto mostrando uma pequena aplicação desenvolvida por mim com a intenção de demonstrar como funcionam as transformações 2D.

Em primeiro lugar, falemos do que se tratam as transformações: Uma imagem 2D é composta formada por um agrupamento de pontos. Uma transformação consiste na multiplicação de cada um desses pontos por uma matriz específica. As transformações mais comuns são aquelas implementadas na maioria dos editores de imagem como rotação, translação e redimensionamento.

Na aplicação desenvolvida, foi utilizado Javascript juntamente com o elemento Canvas do HTML. A intenção foi demonstrar como funciona cada transformação, incluindo a matriz correspondente a cada transformação e a pilha de transformações, que funciona do seguinte modo: se queremos rotacionar um elemento e, em seguida, redimensioná-lo, multiplicamos ambas as matrizes referentes a cada operação para, só então, multiplicarmos por cada ponto da imagem. Isso diminui o processamento necessário para se realizar todo a transformação.

Okay… vamos à explicação do funcionamento da aplicação (Não postarei código ainda… vou implementar mais algumas coisas, dar uma melhorada e posto o código completo pra vocês): tenho um polígono desenhado basicamente com métodos lineTo() do contexto 2D do canvas. Cada um dos vértices desse polígono passa pela multiplicação com a matriz resultante da multiplicação de todas as matrizes da pilha. As operações envolvidas também são percebidas através do esquema de cores utilizado. Desse modo, para uma rotação da imagem sobre ela mesma, deslocamos o polígono até a origem das retas, executamos a rotação e deslocamos de volta ao ponto inicial. Assim, ao requisitar uma rotação desse tipo, na verdade, requisitamos três transformações cujas matrizes são empilhadas.

Bom… sem mais a dizer (por enquanto), segue o link pra aplicação:
2D Transformations Demo

Conforme vou lançando novas versões, vou atualizando o post com novas matrizes/funcionalidades!
Até a próxima. 😉

Anúncios

One response to this post.

  1. […] A aplicação é bem simples e consegue demonstrar de forma clara o funcionamento de algumas transformações como: translação, rotação e redimensionamento de imagens. Para mais detalhes da aplicação consute a publicação da mesma aqui. […]

    Responder

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: