Transformações 2D

O processo da computação gráfica determina os seguintes passos:

1. Modelação:
   1. Definição de cada objeto gráfico no respetivo espaço do objeto;
   2. Definição do modelo, no espaço do mundo, juntando os vários objetos gráficos do ponto anterior num único grafo de cena;
2. Construção (Rendering): No espaço do dispositivo, com base no modelo do ponto anterior e das definições da vista;

A construção assenta num conjunto de operações (por exemplo, clipping) que, normalmente, são automaticamente tratadas pelo sistema gráfico em que se está a trabalhar.

Sobre a modelação falta esclarecer:

• Como cada objeto gráfico é definido no seu espaço;
• Como esse objeto é «transportado» para o espaço do mundo;

As Transformações são as principais ferramentas nestes passos. Neste capítulo vamos ilustrar o papel que desempenham.

Transformações: Representação Matricial e Casos Especiais

Uma transformação é uma função que aplica pontos em pontos:

$$p=(p_x,p_y)\stackrel{T}{⟶}q=(q_x,q_y)$$

Os tipos principais de transformações são:

• Translação: $q=(q_x,q_y)$ resulta de mover $p=(p_x,p_y)$ segundo uma certa direção;

• Rotação: $q=(q_x,q_y)$ resulta de rodar $p=(p_x,p_y)$ um certo ângulo em torno da origem;p_0 =

• Escala: $q=(q_x,q_y)$ resulta de aumentar ou reduzir $p=(p_x,p_y)$ por um certo fator;

• Composição: $q=(q_x,q_y)$ resulta de aplicar a $p=(p_x,p_y)$ uma sequência de transformações;

Adicionalmente ainda podem ser usadas reflexões (em relação a um certo eixo ou ponto) e deslizamentos (numa certa direção).

A escolha destes quatro tipos de transformações principais assenta nas seguintes razões:

• são suficientemente expressivos para a maior parte das necessidades da computação gráfica;
• são intuitivamente acessíveis;
• são numericamente eficientes;

A eficiência numérica assenta na forma como os cálculos são efetuados: as coordenadas transformadas $(q_x,q_y)$ resultam de multiplicar as coordenadas originais $(p_x,p_y)$ por uma matriz de transformação:

$$\left[\begin{array}{c}{q}_x\\ q_y\\ 1\end{array}\right]=\left[\begin{array}{ccc}a& b& c\\ d& e& f\\ 0& 0& 1\end{array}\right]\left[\begin{array}{c}{p}_x\\ p_y\\ 1\end{array}\right]$$

Os valores concretos dos parâmetros a,b,c,d,e,f dependem da transformação concreta que se pretende aplicar às coordenadas originais.

Nas páginas seguintes vamos ver como esses valores também dependem do tipo de transformação.

Translações

Exemplo de uma Translação

Uma translação consiste em mover as coordenadas originais $p=(p_x,p_y)$ segundo um certo vetor $d=(d_x,d_y)$ de forma que $$q=p+d.$$

Isto é, as coordenadas transformadas são obtidas por $$(q_x,q_y)=q=p+d=(p_x,p_y)+(d_x,d_y)$$

A matriz de translação é

$$\begin{array}{rl}T(d_x,d_y)& =\left[\begin{array}{ccc}1& 0& d_x\\ 0& 1& d_y\\ 0& 0& 1\end{array}\right]\end{array}$$

e temos

$$\begin{array}{rl}(q_x,q_y,1)& =T(d_x,d_y)\left[\begin{array}{c}{p}_x\\ p_y\\ 1\end{array}\right]\end{array}$$

Rotações

Exemplo de uma Rotação

Uma rotação consiste em rodar as coordenadas originais $(p_x,p_y)$ segundo um certo ângulo $\alpha$ em torno da origem $(0,0)$.

A matriz de rotação é

$$\begin{array}{rl}R(\alpha )& =\left[\begin{array}{ccc}\cos \alpha & \sin \alpha & 0\\ -\sin \alpha & \cos \alpha & 0\\ 0& 0& 1\end{array}\right]\end{array}$$

e temos

$$\begin{array}{rl}(q_x,q_y,1)& =R(\alpha )\left[\begin{array}{c}{p}_x\\ p_y\\ 1\end{array}\right]\end{array}$$

Escalas

Exemplo de uma Escala

Uma escala consiste em encolher ou esticar as coordenadas originais $(p_x,p_y)$ segundo um certo fator $(s_x,s_y)$.

A matriz de escala é

$$\begin{array}{rl}S(s_x,s_y)& =\left[\begin{array}{ccc}{s}_x& 0& 0\\ 0& s_y& 0\\ 0& 0& 1\end{array}\right]\end{array}$$

e temos

$$\begin{array}{rl}(q_x,q_y,1)& =S(s_x,s_y)\left[\begin{array}{c}{p}_x\\ p_y\\ 1\end{array}\right]\end{array}$$

Composição

Nem sempre as transformações básicas são suficientes para construir os objetos gráficos pretendidos.

Nesse caso é necessário compor as transformações básicas de forma a obter-se o efeito pretendido.

Motivação da composição

Exemplo de uma Composição

Supondo que se pretende escalar e rodar um certo objeto gráfico, sem o deslocar da posição em que está. O problema está na rotação, quo o feita em torno da origem do referencial, e não em torno do «centro do objeto».

A solução consiste em compor várias transformações de forma a obter-se o efeito pretendido. Geometricamente:

1. Colocamos o referencial no «centro» do objeto, com uma translação.
2. Com o referencial no «centro» do objeto, fazemos as operações de escala e de rotação.
3. Repomos o referencial na posição em que estava inicialmente, de novo com uma translação.

Explore transformações com o seguinte código SVG:

Transformações