03 Transformações em 2D [Parte I]

Transformações Geométricas

Computação Gráfica – DCC065

Sumário

●

Tópicos da aula de hoje:

●

Por que transformações?

●

Classificação das transformações

●

Transformações

Translação

Escala

Rotação

Coordenadas Homogêneas

Combinando transformações

Por que transformações?

● Em CG, uma vez tendo um objeto definido,

“transformações” são utilizadas para mover este objeto, mudar seu tamanho (escala) ou rotacioná-lo.

Imagens de Hearn & Baker

Classificação das Transformações

São transformações geométricas que preservam a forma, o tamanho e os ângulos dos objetos.

Elas são:

● Rotação ● Translação ● Reflexão

Classificação das Transformações

São transformações geométricas que preservam o paralelismo entre as linhas mas não seus

comprimentos e ângulos. Exemplo de transformações Não-Rígidas:

● Escala

Classificação das Transformações

Uma função (ou mapeamento ou ainda

transformação) F é linear se, para todos

os vetores v

e v

e todos escalares k:

● F(V

1+V2) = F(V1) + F(V2)

● F(kV

1) = kF(V1)

● Exemplos de transformações lineares:

● Escala ● Reflexão ● Rotação

Classificação das Transformações

Basicamente as transformações afins são: Transformações Lineares + Translações

● Desta forma, podemos afirmar que toda

transformação linear é também afim, mas o contrário não é verdade

● Então a função y = mX+b não é linear, mas é

Classificação - Resumo

Translação

Rotação

Reflexão

Escala

Cisalhamento

Translação

● Move um objeto de uma posição para outra

x

= x

+ dx

y

= y

+ dy

y x 0 1 1 2 2 3 4 5 6 7 8 9 10 3 4 5 6

Exemplo de Translação

● O que acontecerá ao objeto se aplicarmos

Exemplo de Translação

● O que acontecerá ao objeto se aplicarmos

Escala

● Escalas multiplicam todas as coordenadas ● Atenção: Objetos podem mudar de lugar ao

aplicarmos operações de escala

x_new = Sx × x_old y_new = Sy × y_old

y x 0 1 1 2 2 3 4 5 6 7 8 9 10 3 4 5 6

Escala

● Escalas multiplicam todas as coordenadas ● Atenção: Objetos podem mudar de lugar ao

aplicarmos operações de escala

x_new = Sx × x_old y_new = Sy × y_old

y x 0 1 1 2 2 3 4 5 6 7 8 9 10 3 4 5 6

Como podemos fazer para que objetos não sofram alteração de posição?

Exemplo de Escala

● O que acontecerá ao objeto se aplicarmos

Exemplo de Escala

● O que acontecerá ao objeto se aplicarmos

Rotação

● Rotaciona todas as coordenadas por um

ângulo específico

x_new = x_old × cosθ – y_old × sinθ y_new = x_old × sinθ + y_old × cosθ

● Pontos sempre serão rotacionados em

relação a origem y x 0 1 1 2 2 3 4 5 6 7 8 9 10 3 4 5 6

Rotação

● Atenção!

Muitas linguagens (como C e C++) já possuem funções trigonométricas implementadas. Nestas funções, normalmente, o ângulo a ser passado como parâmetro deve estar em radianos e não em graus. Se necessário, para converter de

graus (g) para radianos (r), utilize a seguinte fórmula:

● Em OpenGL as funções de rotação utilizam

Exemplo de Rotação

● O que acontecerá ao objeto se aplicarmos

Exemplo de Rotação

Primeiro, vamos calcular o ângulo em radianos (no exercício g = 30)

r = g * PI / 180 = 0,5235

Vamos agora calcular as funções trigonométricas

cos(0.5235)=0.866 sin(0.5235)=0.5

Recapitulando a fórmulas

x_new = x_old × cosθ – y_old × sinθ y_new = x_old × sinθ + y_old × cosθ

Exemplo de Rotação

Basta agora calcularmos os novos pontos

x’(3, 1) = 3*0.866 – 1*0.5 = 2.598 – 0.5 = 2.098 y’(3, 1) = 3*0.5 + 1*0.866 = 1.5 + 0.866 = 2.366 x’(5, 1) = 5*0.866 – 1*0.5 = 4.33 – 0.5 = 3.83 y’(5, 1) = 5*0.5 + 1*0.866 = 2.5 + 0.866 = 3.366 x’(4, 3) = 4*0.866 – 3*0.5 = 3.46 – 1.5 = 1.96 y’(4, 3) = 4*0.5 + 3*0.866 = 2.0 + 2.598 = 4.598

Exemplo de Rotação

Representando transformações

● Podemos representar as transformações

através de matrizes

● Esta forma de representação tem como

vantagem básica permitir que em uma única matriz represente a combinação de várias transformações.

Escala

● A escala de um ponto por

(s

x

, s

)

Rotação

● A rotação de um ponto em relação a origem

Translação

● Defina agora a matriz 2 x 2 que nos

possibilite representar operações de translação:

Translação

● Defina agora a matriz 2 x 2 que nos

possibilite representar operações de translação:

Não é possível representar matrizes 2 x 2 para resolver esse problema.

Por que usar coordenadas

homogêneas?

● As operações de translação, rotação e

escala podem ser facilmente executadas com o uso de matrizes.

● Porém, enquanto as operações de rotação e

escala podem ser concatenadas numa única matriz (pela multiplicação prévia de suas

respectivas matrizes) as operações de

translação ainda têm de ser conduzidas em separado, uma vez que sua aplicação

Por que usar coordenadas

homogêneas?

● Usando coordenadas homogêneas,

representaremos transformações em 2D

através de matrizes 3 x 3 e transformações em 3D através de matrizes 4 x 4

● Com isso, poderemos concatenar todas as

matrizes de transformação numa única matriz global de transformação que será aplicada a todos os pontos da cena

Coordenadas Homogêneas

● Um ponto

(x, y)

coordenadas homogêneas como

(x

h

, y

, h)

● O parâmetro

h

que:

● Deste modo, o ponto cartesiano (x, y)

corresponde à uma infinidade de triplas

(hx, hy,

h)

(x, y, 1)

Escala

● A escala de um ponto por

(s

x

, s

)

reescrita matricialmente em coordenadas homogêneas como:

Rotação

● Já a rotação de um ponto em relação a

Translação

● Finalmente a translação de um ponto por

(dx, dy)

Transformações Inversas

● Transformações podem ser facilmente

Combinando Transformações

● Como já visto, várias transformações podem

ser combinadas em uma única matriz para facilitar o processamento

● Permitido pelo fato de usarmos coordenadas homogêneas

● Imagine rotacionar um polígono em volta de

um ponto que não seja a origem:

● Translade o centro do polígono para a origem ● Rotacione normalmente em relação a origem ● Faça a translação inversa

Combinando Transformações

(cont…)

1 2

Combinando Transformações

(cont…)

Combinando Transformações

(cont…)

Combinando Transformações

(cont…)

Combinando Transformações

(cont…)

● As três transformações seriam combinadas

da seguinte forma

Lembre-se: Multiplicação de matrizes não é uma

operação comutativa, então a ordem IMPORTA!

Combinando Transformações

(cont…)

● A ordem de execução é a seguinte:

1º 2º

Resumo das operações

x

= x

+ dx

y

= y

+ dy

x_new = x_old × cosθ – y_old × sinθ y_new = x_old × sinθ + y_old × cosθ

Resumo das operações

Escala:

Transformações Geométricas com OpenGL ● Os principais comandos em OpenGL para

realizar as transformações geométricas são os seguintes:

glTranslatef(dx, dy, dz);

glScalef(sx, sy, sz);

Transformações Geométricas com OpenGL

● Na próxima aula aprenderemos como utilizar

pilhas de matrizes, mas para o exercício de hoje basta sabermos sobre este assunto que é possível "salvar" a posição inicial do

sistema de transformações geométricas utilizando os comandos:

glPushMatrix(); glPopMatrix();

Transformações Geométricas com OpenGL ● Exemplo. Imagine que

queremos gerar a

imagem ao lado. Nesta imagem queremos desenhar 5 círculos, com a esfera da esquerda na posição (-10, 0) e a esfera da direita na posição (10, 0)

Transformações Geométricas com OpenGL

● Sem armazenarmos a posição inicial teríamos, por

exemplo, o seguinte código:

glTranslatef(-10.0, 0.0, 0.0); // Posiciona primeira esfera

for(int i = 0; i <= 5; i++) // Usado apenas como contador

{

glutSolidSphere(1, 20, 20); // Desenha esfera

glTranslatef(5, 0, 0); // Vai para próxima posição

}

for(int i = -10; i <= 10; i+=5)

{

glPushMatrix(); // Armazena posição inicial

// A partir da origem, move para a posição desejada

glTranslatef(i, 0, 0);

glutSolidSphere(1, 20, 20); // Desenha esfera

glPopMatrix(); // Descarta translação realizada

}

● Se armazenarmos a posição inicial teríamos, por

Saiba mais!

● Computer Graphics, C Version

● Capítulo 5

Neste capítulo você encontrará uma abordagem teórica

interessante a respeito de

Saiba mais!

● Computação Gráfica - Teoria e

Prática.

● Capítulo 2

Este capítulo traz boas definições a respeito do tema desta aula

incluindo uma seção que trata do assunto em OpenGL.

49

Saiba mais!

● Mathematics for Computer

Graphics

● Capítulo 7

Uma abordagem mais matemática dos temas abordados nesta aula pode ser encontrada neste capítulo do livro do John Vince. Todas as

deduções matemáticas das

formulações que utilizamos estão abertas neste capítulo.

Saiba mais!

● OpenGL Programming Guide

Seventh Edition

● Capítulo 3 e Apêndice C

O Capítulo 3 trata dos comandos de transformação em OpenGL e o Apêndice C desta referência trata das coordenadas homogêneas e um breve resumo sobre matrizes de transformação.

Saiba mais!

● Learn OpenGL

● Capítulo 8

Neste capítulo há uma revisão de conceitos matemáticos sobre operações com vetores e

matrizes e como utilizá-los em OpenGL/GLSL utilizando a

Exercício 1

● Crie de forma iterativa, através de translações, o tabuleiro ao lado com

dimensões -3.0 a 3.0 em todos os eixos (glOrtho terá essas dimensões).

● Crie um pequeno círculo de lado 1 que será movimentado pelos espaços do tabuleiro.

● A movimentação será realizada com as teclas 'w','a','s','d' e o círculo não poderá ser movido para fora do tabuleiro.

● Dica 1: Cada quadrado do tabuleiro poderá ser feito manualmente ou com a

função glutSolidCube (pesquise os parâmetros).

● Dica 2: Utilize a função glutSolidSphere para criar o círculo vermelho.

Pesquise os parâmetros desta função.

● Dica 3: É possível desenhar apenas os espaços pretos ou brancos