Posts Tagged ‘canvas’

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