Exibir código-fonte para Transformações em Imagens Vetoriais no Plano

Afluentes: [[Computação Gráfica]]

= Representação= 

{{tip|O plano é um espaço bidimensional composto de dois vetores, x e y. Para representar elementos vetoriais no plano, é necessário primeiramente representar cada ponto (x, y) ligados por linhas.}}

Por exemplo, se tivermos um triângulo, composto de três pontos e linhas ligando cada um dos pontos, então teremos:

<pre>
Ponto {
	Real x
	Real y
}

Triangulo = Vetor [3] Ponto

Triangulo.Ponto[0]( 5, 10);
Triangolo.Ponto[1](10,  5);
Triangulo.Ponto[2](15, 10);

j = 1;
Para i = 0 até 2 Fazer
	j = i + 1;
	Se j > 2
		Então j = 0
	Fim se
	Desenhar_linha(
		Triangulo[i].Ponto.x, Triangulo[i].Ponto.y,
		Triangulo[j].Ponto.x, Triangulo[j].Ponto.y)
Fim para
</pre>

<center>[[Image:Plano.png]]</center>
<center><small><b>Figura 1: Representação de um triângulo no Plano.</b></small></center>

O código em C do arquivo ret.c apresenta a estrutura de um retângulo e uma operação de translação sobre a figura criada atraves da utilização das setas direcionais do teclado.

= Transformações =

As transformações são operações feitas nos objetos existentes, no plano bidimensional nesse caso, de forma que eles sejam modificados. Existem diversos tipos de operações, mas veremos apenas as transformações de translação, escala e rotação.

== Translação ==

A translação no plano é a operação que move determinado objeto de um local à outro no no espaço bidimensional. A operação da translação ocorre com a soma da matriz de translação com todos os pontos do objeto. A matriz de translação é a seguinte:

<math>
\begin{pmatrix}
   Tx & Ty
\end{pmatrix}
</math>

tal que:

 Tx é a translação na horizontal e
 Ty é a translação na vertical.

Logo, a fórmula matemática da operação de translação fica da seguinte forma:

<math>
\begin{pmatrix} x & y \end{pmatrix} \cdot \begin{pmatrix} Tx & Ty \end{pmatrix}
</math>

tal que:

<math>
x = x + Tx
</math>

<math>
y = y + Ty
</math>

=== Algoritmo ===

Baseado na matriz e na fórmula para a operação de translação no plano, o algoritmo para esta operação fica da seguinte maneira:

<pre>
Entrada Tx e Ty

Para i = 0 Até Quantidade_de_pontos Fazer
	Ponto[i].x = Ponto[i].x + Tx
	Ponto[i].y = Ponto[i].y + Ty
Fim para
</pre>

Ou seja, a operação é executada em '''todos''' os pontos do elemento.

=== Exemplo ===

Agora imagine que vamos executar a operação de translação no nosso triângulo (Figura 1). Considere que vamos executar a operação de translação com os seguintes valores de Tx e Ty respectivamente (-2, 7). Então teremos que:

<pre>
Ponto[0].x = Ponto[0].x + Tx = 5 + (-2) = 3
Ponto[0].y = Ponto[0].y + Ty = 10 + 7 = 17

Ponto[0].x = Ponto[0].x + Tx = 10 + (-2) = 8
Ponto[0].y = Ponto[0].y + Ty = 5 + 7 = 12

Ponto[0].x = Ponto[0].x + Tx = 15 + (-2) = 13
Ponto[0].y = Ponto[0].y + Ty = 10 + 7 = 17
</pre>

Logo, nossos pontos passarão a ser:

<pre>
Pontos (3, 17),	(8, 12) e (13, 17)
</pre>

Gerando uma nova imagem com o elemento Triângulo em uma nova posição.

<center>[[Image:Translacao.png]]</center>
<center><small><b>Figura 2: O Triângulo após a operação de translação.</b></small></center>

== Escala ==

{{tip|A escala no plano é a operação que modifica o tamanho de um objeto no plano.}}

A operação da escala ocorre com a multiplicação da matriz de Escala com todos os pontos do objeto. A matriz de escala é a seguinte:

<pre>
	| Sx	 0 |
	|  0	Sy |
</pre>

tal que:

<pre>
	Sx é a modificação da escala na horizontal e
	Sy é a modificação da escala na vertical
</pre>

Logo, a fórmula matemática da operação de translação fica da seguinte forma:

<pre>
[ x	y ]	*	| Sx	 0 |
			|  0	Sy |
</pre>

tal que:

<pre>
x = (x * Sx) + (y *  0) = x * Sx
y = (x *  0) + (y * Sy) = y * Sy
</pre>

=== Algoritmo ===

Baseado na matriz e na fórmula para a operação de escala no plano, o algoritmo para esta operação fica da seguinte maneira:

<pre>
Entrada Sx e Sy

Para i = 0 Até Quantidade_de_pontos Fazer
	Ponto[i].x = Ponto[i].x * Sx
	Ponto[i].y = Ponto[i].y * Sy
Fim para
</pre>

A operação é executada em todos os pontos do elemento, assim como na operação de translação.

=== Exemplo ===

Agora imagine que vamos executar a operação de escala no nosso triângulo original (Figura 1). Considere que vamos executar a operação de escala com os seguintes valores de Sx e Sy respectivamente (0.5, 2). Então teremos que:

<pre>
Ponto[0].x = Ponto[0].x * Sx =  5 * 0.5 =  2.5
Ponto[0].y = Ponto[0].y * Sy = 10 * 2   = 20

Ponto[0].x = Ponto[0].x * Sx = 10 * 0.5 =  5
Ponto[0].y = Ponto[0].y * Sy =  5 * 2   = 10

Ponto[0].x = Ponto[0].x * Sx = 15 * 0.5 =  7.5
Ponto[0].y = Ponto[0].y * Sy = 10 * 2   = 20
</pre>

Logo, nossos pontos passarão a ser:

<pre>
Pontos (2.5, 20), (5, 10) e (7.5, 20)
</pre>

Gerando uma nova imagem com o elemento Triângulo com sua escala modificada.

<center>[[Image:Escala1.png]]</center>
<center><small><b>Figura 3: O triãngulo após a operação de translação.</b></small></center>

{{note|Porém, temos um problema. Ao aplicar a escala, estamos modificando também a posição do nosso elemento. Para contornar o problema, devemos definir um ponto que será visto como o ponto de origem deste elemento, ou também chamado de Pivot. Devemos então mover o Pivot para o ponto de origem do plano e só depois aplicar a operação de escala. Após feito isso, os pontos são movidos novamente utilizando como referência o ponto de origem do Pivot.}}

Neste caso, pegaremos o ponto 0 como pivot do objeto para mostrar o exemplo acima agora usando a operação sobre o pivot.

Sendo assim, nosso algoritmo fica da seguinte forma:

<pre>
Entrada Sx e Sy

Pivot = Ponto[0];

Transladar(-Pivot.x, -Pivot.y);

Para i = 0 Até Quantidade_de_pontos Fazer
	Ponto[i].x = Ponto[i].x * Sx
	Ponto[i].y = Ponto[i].y * Sy
Fim para

Transladar(Pivot.x, Pivot.y);
</pre>

Agora com essa operação de translação usando o pivot negativo, temos os seguintes pontos:

<pre>
Pontos = (0, 0), (5, -5) e (10, 0)
</pre>

<center>[[Image:Escala2.png]]</center>
<center><small><b>Figura 4: Transladando para a origem utilizando o pivot.</b></small></center>

Só então aplicamos a operação de Escala, resultando os seguintes pontos:

<pre>
Pontos = (0, 0), (2.5, -10) e (5, 0)
</pre>

<center>[[Image:Escala3.png]]</center>
<center><small><b>Figura 5: Operação de Escala.</b></small></center>

Depois disso então movemos de volta os pontos para o ponto de origem do objeto conforme a localização original do pivot, armazenada anteriormente. Obtemos então os seguintes pontos:

<pre>
Pontos = (5, 10), (7.5, 0) e (10, 10)
</pre>

<center>[[Image:Escala4.png]]</center>
<center><small><b>Figura 6: Transladando de volta ao ponto de referência, pivot.</b></small></center>

== Rotação ==

A rotação, no plano, é a operação que rotaciona determinado objeto no espaço bidimensional. A operação de rotação ocorre com a multiplicação da matriz de Rotação com todos os pontos do objeto. A matriz de rotação é a seguinte:

<center>[[Image:Circle_sincos.gif]]</center>

<math>
\begin{pmatrix}
\cos(\theta) & \sin(\theta) \\
-\sin(\theta) & \cos(\theta) \\
\end{pmatrix}
</math>

tal que:

 ''θ'' é o ângulo, '''em radianos''', que se quer rotacionar o objeto,
 ''sin'' é a operação do seno sobre o ângulo e
 ''cos'' é a operação do cosseno sobre o ângulo.

Logo, a fórmula matemática da operação de translação fica da seguinte forma:

<math>
\begin{pmatrix}
x & y
\end{pmatrix}
\cdot
\begin{pmatrix}
\cos(\theta) & \sin(\theta) \\
-\sin(\theta) & \cos(\theta) \\
\end{pmatrix}
</math>

tal que:

<math>
x' = (x \cdot \cos(\theta)) + (y \cdot -\sin(\theta))
</math>

<math>
y' = (x \cdot \sin(\theta)) + (y \cdot \cos(\theta))
</math>

{{note|Observe que agora temos x' e y'. Isso por que em ambas as oeprações estamos utilizando o x e y originais. Se modificarmos o x na primeira operação, na segunda ele já vai estar modificado, o que distorce o elemento. A solução é criar variáveis auxiliares para não alterar os valores originais até o término do processo.}}

{{note|Outro ponto importante é que, assim como na escala, devemos transladar nosso objeto para o ponto de origem do espaço, baseando-se em um pivot do elemento.}}

=== Algoritmo ===

Baseado na matriz e na fórmula para a operação de escala no plano, o algoritmo para esta operação fica da seguinte maneira:

<pre>
Entrada ang

Pivot = Ponto[0];

Transladar (-Pivot.x, -Pivot.y)

Para i = 0 Até Quantidade_de_pontos Fazer
	xAux = (Ponto[i].x * cos(ang)) + (Ponto[i].y * -sen(ang))
	yAux = (Ponto[i].x * sen(ang)) + (Ponto[i].y *  cos(ang))
	Ponto[i].x = xAux
	Ponto[i].y = yAux
Fim para

Transladar (Pivot.x, Pivot.y)
</pre>

A operação é executada em '''todos''' os pontos do elemento, assim como na operação de translação e na escala.