Transformações Geométricas Bidimensionais

Computação Gráfica — Conceitos Fundamentais e Formulação Matricial

Prof. Pedro Ximenes

Universidade Católica de Pernambuco (UNICAP)

Introdução: O que são Transformações Geométricas? Aplicações práticas.

Transformações Básicas: Translação, Rotação e Escala (Equações e Matrizes $2 \times 2$).

Coordenadas Homogêneas: Motivação, formulação unificada $3 \times 3$ e composição linear.

Laboratório & Material Complementar: Playground interativo e referências.

Definição

Transformações geométricas são operações matemáticas aplicadas à descrição geométrica de um objeto para alterar sua posição, orientação ou tamanho.

Translação — muda a posição do objeto no plano.
Rotação — muda a orientação do objeto em torno de um ponto.
Escala — muda o tamanho do objeto.

Aplicações Práticas

Animação de objetos em jogos e simulações digitais.
Posicionamento de modelos e câmeras em cenas 3D.
Manipulação interativa de objetos (arrastar, girar, redimensionar em interfaces).

Outras transformações (próximas aulas)

Reflexão e Cisalhamento (shear) — não serão abordados nesta aula.

Demonstração Interativa Canvas 2D

Código JavaScript Canvas 2D

canvas_transform.js HTML5 2D API

Aplicações

Animação de objetos em jogos e simulações
Posicionamento de modelos em cenas 3D
Manipulação interativa de objetos (arrastar, girar, redimensionar)

A translação consiste em adicionar distâncias fixas às coordenadas de cada ponto do objeto.

Equações de Translação

Dado um ponto $(x, y)$ e os fatores de translação $t_x$ e $t_y$:

$$x' = x + t_x \qquad y' = y + t_y$$

$t_x$ — deslocamento na direção $x$ (horizontal)
$t_y$ — deslocamento na direção $y$ (vertical)
$(x', y')$ — coordenadas do ponto depois da translação ("$x$ linha" e "$y$ linha")

Observação

A mesma translação ($t_x, t_y$) é aplicada a todos os vértices do objeto geométrico.

Para facilitar cálculos futuros, escrevemos a translação usando matrizes:

Forma Matricial

              $$\begin{pmatrix} x' \\ y' \end{pmatrix} = \begin{pmatrix} x \\ y \end{pmatrix} + \begin{pmatrix} t_x \\ t_y \end{pmatrix}$$
            

Ou seja: Ponto transladado = Ponto original + Vetor de translação

Importante

A translação é uma soma de duas matrizes (vetores coluna).
Parâmetros: $t_x$ e $t_y$ (podem ser positivos ou negativos).
Se $t_x = 0$ e $t_y = 0$, o objeto não se move.

Plano Cartesiano 2D Ponto Inicial: (3, 2)

Deslocamento $t_x$: +1

Deslocamento $t_y$: +3

Problema: Transladar o ponto $(3, 2)$ com $t_x = 1$ e $t_y = 3$.

Cálculo Passo a Passo

$$\begin{aligned} \begin{pmatrix} x' \\ y' \end{pmatrix} &= \begin{pmatrix} x \\ y \end{pmatrix} + \begin{pmatrix} t_x \\ t_y \end{pmatrix} = \begin{pmatrix} 3 \\ 2 \end{pmatrix} + \begin{pmatrix} 1 \\ 3 \end{pmatrix} \\ &= \begin{pmatrix} 3 + 1 \\ 2 + 3 \end{pmatrix} = \begin{pmatrix} \mathbf{4} \\ \mathbf{5} \end{pmatrix} \implies P' = (4, 5) \end{aligned}$$

Na direção $x$: deslocou 1 unidade ($3 \to 4$)
Na direção $y$: deslocou 3 unidades ($2 \to 5$)
Valores negativos de $t_x$ ou $t_y$ movem na direção oposta

Translação de Linha Linha $P_1(1,2) \to P_2(4,3)$

$t_x$ da Linha: +2

$t_y$ da Linha: +1

Para transladar um objeto inteiro (ex: uma linha), aplique a mesma translação a cada vértice:

Exemplo — Translação de uma linha ($t_x = 2, t_y = 1$)

$$P_1' = \begin{pmatrix} 1 \\ 2 \end{pmatrix} + \begin{pmatrix} 2 \\ 1 \end{pmatrix} = \begin{pmatrix} 1 + 2 \\ 2 + 1 \end{pmatrix} = \begin{pmatrix} \mathbf{3} \\ \mathbf{3} \end{pmatrix} \implies P_1' = (3, 3)$$ $$P_2' = \begin{pmatrix} 4 \\ 3 \end{pmatrix} + \begin{pmatrix} 2 \\ 1 \end{pmatrix} = \begin{pmatrix} 4 + 2 \\ 3 + 1 \end{pmatrix} = \begin{pmatrix} \mathbf{6} \\ \mathbf{4} \end{pmatrix} \implies P_2' = (6, 4)$$

Se fosse um quadrado (4 vértices), triângulo (3 vértices), etc., o mesmo processo se repete para cada vértice.

Rotação em Torno do Pivô $(x_r, y_r)$

Ângulo de Rotação $\theta$: 50°

Parâmetros da Rotação

Ponto de rotação $(x_r, y_r)$ — o ponto fixo ao redor do qual o objeto gira
Ângulo de rotação $\theta$ — quanto o objeto gira (em graus)

Analogia do Prego e Barbante

Imagine um prego no ponto $(x_r, y_r)$ e um barbante esticado até o vértice
Ao girar, o barbante mantém seu comprimento constante (raio $r$)
O mesmo processo é aplicado a todos os vértices

Convenção de sinal

$\theta > 0$: sentido anti-horário • $\theta < 0$: sentido horário.

Círculo Trigonométrico & Polares Origem $(0, 0)$

Ângulo $\phi$: 20°

Giro $\theta$: 35°

Para simplificar, consideramos o ponto de rotação na origem ($x_r = 0, y_r = 0$).

Coordenadas Polares

O ponto original $(x,y)$ pode ser escrito como: $$x = r \cos\phi \qquad y = r \sin\phi$$ onde $r$ é a distância à origem e $\phi$ é o ângulo original com o eixo $x$.

Após a rotação por $\theta$, o novo ponto fica:

$$x' = r \cos(\phi + \theta) \qquad y' = r \sin(\phi + \theta)$$

O raio $r$ é constante (não muda).

Considere o triângulo retângulo formado pelo ponto $(x,y)$:

$$\cos\phi = \frac{\text{cateto adjacente}}{\text{hipotenusa}} = \frac{x}{r} \implies x = r\cos\phi$$

Da mesma forma, para a coordenada vertical $y$:

$$\sin\phi = \frac{\text{cateto oposto}}{\text{hipotenusa}} = \frac{y}{r} \implies y = r\sin\phi$$

Conclusão

$$(x, y) = (r\cos\phi,\; r\sin\phi)$$

Agora precisamos nos livrar de $\phi$ e $r$. Usamos as identidades trigonométricas de soma de ângulos:

Identidades de soma de ângulos

$$\cos(\alpha + \beta) = \cos\alpha\;\cos\beta - \sin\alpha\;\sin\beta \qquad \sin(\alpha + \beta) = \cos\alpha\;\sin\beta + \sin\alpha\;\cos\beta$$

Multiplicando pelo raio constante $r$ em cada termo:

$$\begin{aligned} x' &= r\cos(\phi+\theta) = r(\cos\phi\cos\theta - \sin\phi\sin\theta) = (\underbrace{r\cos\phi}_{x})\cos\theta - (\underbrace{r\sin\phi}_{y})\sin\theta \\ y' &= r\sin(\phi+\theta) = r(\cos\phi\sin\theta + \sin\phi\cos\theta) = (\underbrace{r\cos\phi}_{x})\sin\theta + (\underbrace{r\sin\phi}_{y})\cos\theta \end{aligned}$$

Equações finais da Rotação 2D

              $$\boxed{x' = x\cos\theta - y\sin\theta \qquad y' = x\sin\theta + y\cos\theta}$$
            

Transformando as equações de rotação em notação matricial:

Matriz de Rotação ($2 \times 2$)

              $$\begin{pmatrix} x' \\ y' \end{pmatrix} = \begin{pmatrix} \cos\theta & -\sin\theta \\ \sin\theta & \cos\theta \end{pmatrix} \begin{pmatrix} x \\ y \end{pmatrix} = \begin{pmatrix} (\cos\theta \cdot x) + (-\sin\theta \cdot y) \\ (\sin\theta \cdot x) + (\cos\theta \cdot y) \end{pmatrix}$$
            

A diagonal principal contém $\cos\theta$
A diagonal secundária contém $\sin\theta$, com sinal negativo na primeira linha
A rotação é uma multiplicação de matrizes (diferente da translação que era soma!)

Cuidado!

A multiplicação de matrizes NÃO é comutativa: $A \times B \neq B \times A$
Não troque a ordem das matrizes! Esta matriz só vale quando a rotação é em torno da origem $(0,0)$.

Rotação no Plano Ponto Inicial: $(3, 2)$

Ângulo de Giro $\theta$: 30°

Problema: Rotacionar o ponto $(3, 2)$ por $\theta = 30^\circ$ ao redor da origem.

Lembrando: $\cos 30^\circ = \frac{\sqrt{3}}{2} \approx 0{,}866$ e $\sin 30^\circ = \frac{1}{2} = 0{,}500$

Cálculo Matricial Passo a Passo

$$\begin{aligned} \begin{pmatrix} x' \\ y' \end{pmatrix} &= \begin{pmatrix} \cos 30^\circ & -\sin 30^\circ \\ \sin 30^\circ & \cos 30^\circ \end{pmatrix} \begin{pmatrix} 3 \\ 2 \end{pmatrix} = \begin{pmatrix} 0{,}866 & -0{,}500 \\ 0{,}500 & 0{,}866 \end{pmatrix} \begin{pmatrix} 3 \\ 2 \end{pmatrix} \\ &= \begin{pmatrix} (3 \cdot 0{,}866) + (2 \cdot (-0{,}500)) \\ (3 \cdot 0{,}500) + (2 \cdot 0{,}866) \end{pmatrix} = \begin{pmatrix} 2{,}598 - 1{,}000 \\ 1{,}500 + 1{,}732 \end{pmatrix} = \begin{pmatrix} \mathbf{1{,}60} \\ \mathbf{3{,}23} \end{pmatrix} \end{aligned}$$

Observações

O ponto se moveu no sentido anti-horário (pois $\theta > 0$)
A distância à origem permaneceu constante: $r = \sqrt{3^2 + 2^2} \approx 3{,}60$
Em provas: podem usar calculadora! Configure para graus

Limitação atual

A matriz de rotação que aprendemos só funciona quando o ponto de rotação está na origem $(0, 0)$.

E se quisermos rotacionar ao redor de um ponto qualquer $(x_r, y_r)$?
Seria possível deduzir uma fórmula direta para isso, mas seria trabalhoso.
Existe uma forma mais elegante de resolver esse problema!

Solução (mais adiante)

Usando coordenadas homogêneas e composição de transformações (próximas aulas), poderemos compor uma sequência de translação + rotação + translação inversa para obter a rotação em torno de qualquer ponto arbitrário.

Definição

Translação e Rotação juntas formam as chamadas transformações de corpo rígido.

Isso significa que elas:

Não deformam o objeto
Preservam os ângulos internos do objeto
Preservam as distâncias entre os vértices
Apenas mudam a posição (translação) e a orientação (rotação)

E a escala?

A escala não é uma transformação de corpo rígido, pois ela altera o tamanho do objeto. Vamos estudá-la a seguir.

A escala altera o tamanho do objeto, multiplicando as coordenadas por fatores de escala.

Equações de Escala

$$x' = s_x \cdot x \qquad y' = s_y \cdot y$$

$s_x$ — fator de escala na direção $x$
$s_y$ — fator de escala na direção $y$

Forma Matricial ($2 \times 2$)

$$\begin{pmatrix} x' \\ y' \end{pmatrix} = \begin{pmatrix} s_x & 0 \\ 0 & s_y \end{pmatrix} \begin{pmatrix} x \\ y \end{pmatrix} = \begin{pmatrix} s_x \cdot x + 0 \cdot y \\ 0 \cdot x + s_y \cdot y \end{pmatrix} = \begin{pmatrix} s_x \cdot x \\ s_y \cdot y \end{pmatrix}$$

Fatores de escala ficam na diagonal principal, com zeros nas demais posições.

Restrições dos fatores $s_x$ e $s_y$

Devem ser positivos ($> 0$) e diferentes de zero
Valores negativos geram outra transformação (reflexão — próximas aulas)

Efeito dos valores

$s > 1 \implies$ aumenta o objeto
$0 < s < 1 \implies$ diminui o objeto
$s = 1 \implies$ não altera naquela direção

Tipos de escala

Uniforme: $s_x = s_y$ (mantém proporções)
Diferencial: $s_x \neq s_y$ (alonga/achata o objeto)

Exemplos: $s_x = s_y = 2 \implies$ duplica o tamanho; $s_x = s_y = 0{,}5 \implies$ metade do tamanho; $s_x = 2, s_y = 3 \implies$ escala diferencial.

Escala e Linhas de Projeção

Fator $s_x$: 0.50x

Fator $s_y$: 0.50x

Problema: Escalar a reta $P_1 = (2, 4)$ e $P_2 = (4, 5)$ com $s_x = 0{,}5$ e $s_y = 0{,}5$.

Cálculos Passo a Passo

$$\begin{aligned} P_1' &= \begin{pmatrix} 0{,}5 & 0 \\ 0 & 0{,}5 \end{pmatrix} \begin{pmatrix} 2 \\ 4 \end{pmatrix} = \begin{pmatrix} (0{,}5 \cdot 2) + 0 \\ 0 + (0{,}5 \cdot 4) \end{pmatrix} = \begin{pmatrix} \mathbf{1{,}0} \\ \mathbf{2{,}0} \end{pmatrix} \\\\[2pt] P_2' &= \begin{pmatrix} 0{,}5 & 0 \\ 0 & 0{,}5 \end{pmatrix} \begin{pmatrix} 4 \\ 5 \end{pmatrix} = \begin{pmatrix} (0{,}5 \cdot 4) + 0 \\ 0 + (0{,}5 \cdot 5) \end{pmatrix} = \begin{pmatrix} \mathbf{2{,}0} \\ \mathbf{2{,}5} \end{pmatrix} \end{aligned}$$

Efeito colateral!

A escala diminuiu a linha pela metade, mas também mudou sua posição! Isso ocorre porque a escala tem como centro de referência a origem $(0,0)$.

Problema da escala básica

Assim como na rotação, a escala que aprendemos tem a origem $(0,0)$ como referência. Ao escalar, o objeto muda de tamanho E de posição simultaneamente.

Muitas vezes queremos escalar o objeto sem movê-lo (escala com ponto fixo arbitrário).
É possível deduzir uma fórmula direta, mas seria complexa e pouco prática.

Solução (mais adiante)

Assim como a rotação em torno de ponto arbitrário, a escala com ponto fixo será resolvida de forma muito mais fácil usando coordenadas homogêneas e composição de transformações (próximas aulas).

Vimos que as três transformações básicas podem ser escritas na forma geral:

$$P' = M_1 \cdot P + M_2$$

$M_1$ (Matriz $2 \times 2$)

Fatores multiplicativos:
• Rotação
• Escala

$M_2$ (Vetor coluna $2 \times 1$)

Termos de translação:
• $t_x$ e $t_y$ (soma vetorial)

O problema

A translação usa adição, enquanto rotação e escala usam multiplicação.
Quando precisamos fazer sequências de transformações (3, 4, 5 seguidas), alternar entre soma e multiplicação é computacionalmente ineficiente.
Gostaríamos de representar tudo como multiplicação de matrizes!

Ideia Central

Expandimos as matrizes de $2 \times 2$ para $3 \times 3$, adicionando uma terceira coordenada chamada de parâmetro homogêneo $h$.

$$(x_h, \; y_h, \; h)$$

Regras e Convenção

$h$ pode ser qualquer valor $\neq 0$, mas por conveniência padrão adotamos $h = 1$.
Com $h = 1$: o ponto 2D fica simplesmente $(x, y, 1)$.
Projeção para o sistema cartesiano: $x = x_h / h$, \; $y = y_h / h$.

Exemplos: O ponto $(2, 3)$ fica $(2, 3, 1)$. O ponto $(4, 5)$ fica $(4, 5, 1)$.

A translação no espaço homogêneo é expressa pelo sistema linear:

$$\begin{aligned} x'_h &= 1\cdot x_h + 0\cdot y_h + t_x\cdot h \\ y'_h &= 0\cdot x_h + 1\cdot y_h + t_y\cdot h \\ h' &= 0\cdot x_h + 0\cdot y_h + 1\cdot h \end{aligned}$$

Coordenadas cartesianas correspondentes

$$x' = x + t_x \qquad y' = y + t_y$$

Com $h=1$, a terceira coordenada preserva rigorosamente o valor $1$.

Com coordenadas homogêneas, a translação vira uma multiplicação de matrizes!

Matriz de Translação ($3 \times 3$)

              $$\begin{pmatrix} x' \\ y' \\ 1 \end{pmatrix} = \underbrace{\begin{pmatrix} 1 & 0 & t_x \\ 0 & 1 & t_y \\ 0 & 0 & 1 \end{pmatrix}}_{T(t_x, t_y)} \begin{pmatrix} x \\ y \\ 1 \end{pmatrix} = \begin{pmatrix} 1\cdot x + 0\cdot y + t_x\cdot 1 \\ 0\cdot x + 1\cdot y + t_y\cdot 1 \\ 0\cdot x + 0\cdot y + 1\cdot 1 \end{pmatrix} = \begin{pmatrix} x + t_x \\ y + t_y \\ 1 \end{pmatrix}$$
            

Propriedades

Por conveniência, $h=1$.
Os fatores $t_x$ e $t_y$ ficam na terceira coluna.
O restante funciona como a matriz identidade: diagonal 1, demais 0.
Verificação: $x' = x + t_x$, $y' = y + t_y$, $1 = 1$ ✓

Matriz de Rotação ($3 \times 3$)

              $$\begin{pmatrix} x' \\ y' \\ 1 \end{pmatrix} = \underbrace{\begin{pmatrix} \cos\theta & -\sin\theta & 0 \\ \sin\theta & \cos\theta & 0 \\ 0 & 0 & 1 \end{pmatrix}}_{R(\theta)} \begin{pmatrix} x \\ y \\ 1 \end{pmatrix} = \begin{pmatrix} (\cos\theta\cdot x) - (\sin\theta\cdot y) + 0 \\ (\sin\theta\cdot x) + (\cos\theta\cdot y) + 0 \\ 0 + 0 + 1\cdot 1 \end{pmatrix} = \begin{pmatrix} x\cos\theta - y\sin\theta \\ x\sin\theta + y\cos\theta \\ 1 \end{pmatrix}$$
            

Por conveniência, $h=1$.
A terceira coluna é $(0, 0, 1)^T$ (sem componente de translação).
A sub-matriz $2 \times 2$ no canto superior esquerdo é a mesma matriz de rotação anterior.
$\theta > 0$: anti-horário • $\theta < 0$: horário.
Ponto de rotação fixado na origem $(0,0)$.

Matriz de Escala ($3 \times 3$)

              $$\begin{pmatrix} x' \\ y' \\ 1 \end{pmatrix} = \underbrace{\begin{pmatrix} s_x & 0 & 0 \\ 0 & s_y & 0 \\ 0 & 0 & 1 \end{pmatrix}}_{S(s_x, s_y)} \begin{pmatrix} x \\ y \\ 1 \end{pmatrix} = \begin{pmatrix} (s_x\cdot x) + 0 + 0 \\ 0 + (s_y\cdot y) + 0 \\ 0 + 0 + 1\cdot 1 \end{pmatrix} = \begin{pmatrix} s_x\cdot x \\ s_y\cdot y \\ 1 \end{pmatrix}$$
            

Por conveniência, $h=1$.
A terceira coluna é $(0, 0, 1)^T$ (sem translação).
Fatores de escala $s_x$ e $s_y$ na diagonal principal ($s_x, s_y > 0$).

Ordem das matrizes — vale para todas!

Se trocar a ordem das matrizes, nem sempre é possível multiplicar e, quando é, o resultado pode ser completamente diferente. A ordem importa!

Translação $T(t_x, t_y)$

$$T = \begin{pmatrix} 1 & 0 & t_x \\ 0 & 1 & t_y \\ 0 & 0 & 1 \end{pmatrix} \quad t_x, t_y \in \mathbb{R}$$

Rotação $R(\theta)$ (na origem)

$$R = \begin{pmatrix} \cos\theta & -\sin\theta & 0 \\ \sin\theta & \cos\theta & 0 \\ 0 & 0 & 1 \end{pmatrix} \quad \theta \text{ em graus}$$

Escala $S(s_x, s_y)$

$$S = \begin{pmatrix} s_x & 0 & 0 \\ 0 & s_y & 0 \\ 0 & 0 & 1 \end{pmatrix} \quad s_x, s_y > 0$$

Todas as matrizes: última linha = $(0\;\;0\;\;1)$ e ponto = $(x,\;y,\;1)^T$

Canvas 2D Interativo

Translação $t_x, t_y$: 0px 0px

Rotação $\theta$: 0°

Escala $s_x, s_y$: 1.0x 1.0x

Matriz $3 \times 3$ Composta Resultante

Código Canvas 2D

A grande vantagem

Agora todas as transformações (incluindo a translação!) são representadas por multiplicações de matrizes $3 \times 3$.

Isso permite:

Compor várias transformações em uma única matriz resultante.
Aplicar sequências de transformações de forma muito mais rápida e eficiente.
Resolver problemas geométricos complexos, tais como:
- Rotação ao redor de um ponto arbitrário $(x_r, y_r)$
- Escala com ponto fixo arbitrário $(x_f, y_f)$

Próximas aulas

Veremos como compor (multiplicar) essas matrizes na ordem correta para criar transformações complexas!

Dicas de estudo

Se teve dificuldade com seno e cosseno, revise trigonometria básica
Se teve dificuldade com coordenadas polares, consulte as suas anotações de álgebra linear ou geometria analítica
Pratique a multiplicação de matrizes: é uma habilidade essencial!

Referências Bibliográficas

1. Angel, E.; Shreiner, D. Interactive Computer Graphics: A Top-Down Approach with WebGL. 8th edition. Capítulo 5.

2. Mount, D. CMSC 427 — Computer Graphics Lecture Notes. University of Maryland. Aula 8.

3. Material de Introdução à Computação Gráfica — IME-USP. Disponível em: panda.ime.usp.br/introcg

Transformações Geométricas Bidimensionais

Computação Gráfica — Conceitos Fundamentais e Formulação Matricial

Sumário

Transformações Geométricas — Visão Geral

Transformações Geométricas — Ilustração

Translação — Equações

Translação — Notação Matricial

Translação — Exemplo Numérico

Translação — Aplicando a Objetos

Rotação — Conceitos Básicos

Rotação — Dedução (Parte 1)

Rotação — Dedução (Coordenadas Polares)

Rotação — Dedução (Parte 2): Identidades Trigonométricas

Rotação — Forma Matricial ($2 \times 2$)

Rotação — Exemplo Numérico

Rotação — Ponto de Rotação Arbitrário

Transformações de Corpo Rígido

Escala — Equações e Parâmetros

Escala — Regras dos Fatores

Escala — Exemplo Numérico

Escala — Ponto Fixo

Por que Coordenadas Homogêneas?

Coordenadas Homogêneas — Definição

Translação em Coordenadas Homogêneas (Dedução)

Translação em Coordenadas Homogêneas

Rotação em Coordenadas Homogêneas

Escala em Coordenadas Homogêneas

Resumo — As Três Matrizes em Coordenadas Homogêneas

Laboratório Interativo — Composição & Matriz $3 \times 3$

Vantagem: Sequências de Transformações como Multiplicações

Ferramentas, Dicas e Referências