Prof. Fernando V. Paulovich 12 de março de SCC Computação Gráca

(1)

Transformações Geométricas 2D

SCC0250 - Computação Gráca Prof. Fernando V. Paulovich

http://www.icmc.usp.br/~paulovic paulovic@icmc.usp.br

Instituto de Ciências Matemáticas e de Computação (ICMC) Universidade de São Paulo (USP)

(2)

Sumário

1 Introdução 2 Transformações Básicas 3 Coordenadas Homogêneas 4 Transformações Inversas 5 Transformações 2D Compostas 6 Outras Transformações 2D 7 Transformações 2D e OpenGL

(3)

Sumário

1 Introdução 2 Transformações Básicas 3 Coordenadas Homogêneas 4 Transformações Inversas 5 Transformações 2D Compostas 6 Outras Transformações 2D

(4)

Introdução

Transformações Geométricas são operações aplicadas à descrição geométrica de um objeto para mudar sua

posição (translação) orientação (rotação) tamanho (escala)

Além dessas transformações básicas, existem outras

reexão cisalhamento

(5)

Sumário

(6)

Translação

A translação consiste em adicionar osets às coordenadas que denem um objeto

x0 = x + tx

y0= y + ty

Usando notação matricial, uma translação 2D pode ser descrita como P0= P + T P0= x0 y0 , P = x y , T = tx ty

(7)

Rotação

Dene-se uma transformação de rotação por meio de um eixo de rotação e um ângulo de rotação

Em 2D a rotação se dá em um caminho circular no plano, rotacionando o objeto considerando-se um eixo perpendicular ao plano xy

(8)

Rotação

Parâmetros de rotação 2D são o ângulo θ de rotação e o ponto (xr, yr)de rotação, que é a intersecção do eixo de rotação com o

plano xy

Se θ > 0 a rotação é anti-horária Se θ < 0 a rotação é horária

(9)

Rotação

Para simplicar considera-se que o ponto de rotação está na origem do sistema de coordenadas

O raio r é constante, φ é o ângulo original de P = (x, y) e θ é o ângulo de rotação

(10)

Rotação

Sabendo que cos(φ + θ) = x 0 r ⇒ x 0_{= r · cos(φ + θ)} sen(φ + θ) = y 0 r ⇒ y 0_{= r · sen(φ + θ)} como

cos(α + β) = cos α · cos β − sen α · sen β sen(α + β) = cos α · sen β + sen α · cos β

então

(11)

Rotação

P = (x, y) pode ser descrito por meio de coordenadas polares x = r · cos φ, y = r · sen φ

Então por substituição

x0= x · cos θ − y · sen θ y0= x · sen θ + y · cos θ

Escrevendo na forma matricial temos P0 = R · P

(12)

Transformação de Corpo Rígido

A rotação e a translação é uma Transformação de Corpo Rígido pois direcionam ou movem um objeto sem deformá-lo

(13)

Escala

Para alterar o tamanho de um objeto aplica-se o operador de escala

Multiplica-se as coordenadas de um objeto por fatores de escala x0= x · sx, y0= y · sy Na forma matricial P0= S · P x0 y0 = sx 0 0 sy x y

(14)

Escala

Propriedades de sx e sy

sxe sydevem ser maiores que zero

Se sx> 1e sy> 1o objeto aumenta

Se sx< 1e sy< 1o objeto diminui

Se sx= sya escala é uniforme

(15)

Escala

(16)

Sumário

(17)

Coordenadas Homogêneas

As três transformações básicas podem ser expressas por P0= M1· P + M2

M1: matriz 2 × 2 com fatores multiplicativos

M2: matriz coluna com termos para translação

Para se aplicar uma sequencia de transformações, esse formato não ajuda

Eliminar a adição de matrizes permite escrever uma sequencia de transformações como uma multiplicação de matrizes

(18)

Coordenadas Homogêneas

Isso pode ser feito expandindo-se o espaço Cartesiano 2D para o espaço de Coordenadas Homogêneas 3D

Nessa expansão um ponto (x, y) é expandido para (xh, yh, h),

onde h é o parâmetro homogêneo (h 6= 0)

As coordenadas cartesianas são recuperados projetando as coordenadas homogêneas no plano h = 1

(19)

(20)

Coordenadas Homogêneas

Por semelhança de triângulos, a projeção do sistema homogêneo para o sistema Cartesiano se dá pela seguinte relação

x = xh

h , y =

yh

h

Nas coordenadas homogêneas, h pode ser qualquer valor diferente de zero, mas escolhemos h = 1 para a transformação ser mais simples

(21)

Coordenadas Homogêneas Translação 2D

Usando coordenadas homogêneas, as transformações são convertidas em multiplicações de matrizes

A translação no espaço homogêneo é dada por x0_h= 1 · xh+ 0 · yh+ tx· h

y0_h= 0 · xh+ 1 · yh+ ty· h

(22)

Coordenadas Homogêneas Translação 2D

Denindo na forma matricial temos

  x0_h y0 h h  =   1 0 tx 0 1 ty 0 0 1     xh yh h  

Voltando ao espaço Cartesiano

x0_h/h = (1 · xh+ 0 · yh+ tx· h)/h ⇒ x0 = x + tx

y0_h/h = (0 · xh+ 1 · yh+ ty· h)/h ⇒ y0= y + ty

(23)

Coordenadas Homogêneas Translação 2D

Por conveniência, com h = 1, denimos a translação no espaço Cartesiano como Ph0= T(tx, ty) · Ph   x0_h y0_h 1  =   1 0 tx 0 1 ty 0 0 1     xh yh 1  

(24)

Coordenadas Homogêneas Rotação 2D

Uma rotação pode ser denida usando coordenadas homogêneas da seguinte forma Ph0= R(θ) · Ph   x0_h y_h0 1  =   cos θ − sen θ 0 sen θ cos θ 0 0 0 1     xh yh 1  

(25)

Coordenadas Homogêneas Escala 2D

Uma escala pode ser denida usando coordenadas homegêneas da seguinte forma Ph0 = S(sx, sy) · Ph   x0_h y0_h 1  =   sx 0 0 0 sy 0 0 0 1     xh yh 1  

(26)

Transformando Vértices

Exemplo de utilização de uma matriz de transformação 1 #version 150

2

3 in vec3 a_position; 4

5 voidmain(void) 6 {

7 //criando uma matriz de escala 2D

8 mat3 model = mat3(1.5, 0.0, 0.0,//primeira coluna 9 0.0, 1.5, 0.0,//segunda coluna 10 0.0, 0.0, 1.0);//terceira coluna 11

12 //multiplicando a matriz de transformacao pelo vetor 13 //em coordenadas homogeneas

14 vec3 pos = model * vec3(a_position[0], a_position[1], 1.0); 15

16 //convertendo as coordenadas homogeneas para euclideanas 17 gl_Position = vec4(pos[0]/pos[2], pos[1]/pos[2], 0.0, 1.0); 18 }

(27)

Sumário

(28)

Translação Inversa

Para a translação, inverte-se o sinal das translações T−1=   1 0 −tx 0 1 −ty 0 0 1  

(29)

Rotação Inversa

Uma rotação inversa é obtida trocando o ângulo de rotação por seu negativo R−1=   cos θ sen θ 0 − sen θ cos θ 0 0 0 1  

Isso rotaciona no sentido horário R−1_{= R}T

(30)

Escala Inversa

O inverso da escala é obtido trocando os parâmetros por seus inversos S−1(sx, sy) =      1 sx 0 1 0 1 sy 1 0 0 1     

(31)

Sumário

(32)

Introdução

Usando representações matriciais homogêneas, uma sequencia de transformações pode ser representada como uma única matriz obtida a partir de multiplicações de matrizes de transformação

P0_h= M2· M1· Ph

= (M2· M1) · P

= M · Ph

(33)

Compondo Translações

Para se compor duas translações podemos fazer P0 h= T(t2x, t2y) · {T(t1x, t1y) · Ph} = {T(t2x, t2y) · T(t1x, t1y)} · Ph = T(t2x+ t1x, t2y + t1y) · Ph   1 0 t2x 0 1 t2y 0 0 1     1 0 t1x 0 1 t1y 0 0 1  =   1 0 t1x+ t2x 0 1 t1y+ t2y 0 0 1  

(34)

Compondo Rotações

Para se compor duas rotações podemos fazer P0 h= R(θ2) · {R(θ1) · Ph} = {R(θ2) · R(θ1)} · Ph = R(θ1+ θ2) · Ph   cos θ1 − sen θ1 0 sen θ1 cos θ1 0 0 0 1     cos θ2 − sen θ2 0 sen θ2 cos θ2 0 0 0 1  =   cos(θ1+ θ2) − sen(θ1+ θ2) 0 sen(θ1+ θ2) cos(θ1+ θ2) 0 0 0 1  

(35)

Compondo Escalas

Para se compor duas escalas podemos fazer P0 h= S(s2x, s2y) · {S(s1x, s1y) · Ph} = {S(s2x, s2y) · S(s1x, s1y)} · Ph = S(s1x· s2x, s1y · s2y) · Ph   s2x 0 0 0 s2y 0 0 0 1     s1x 0 0 0 s1y 0 0 0 1  =   s1x· s2x 0 0 0 s1y· s2y 0 0 0 1  

(36)

Rotação 2D com Ponto de Rotação

Rotação com ponto de rotação é feita combinando-se múltiplas transformações

Movo o ponto de rotação para a origem Executo a rotação

Movo o ponto de rotação para a posição inicial

R(xr, yr, θ) = T(xr, yr) · R(θ) · T−1(xr, yr)

(37)

Rotação 2D com Ponto de Rotação

  1 0 xr 0 1 yr 0 0 1     cos θ − sen θ 0 sen θ cos θ 0 0 0 1     1 0 −xr 0 1 −yr 0 0 1   =  

cos θ − sen θ xr− xrcos θ + yrsen θ

sen θ cos θ yr− yrcos θ − xrsen θ

0 0 1



(38)

(39)

Escala 2D com Ponto Fixo

Escala com ponto xo é feita combinando-se múltiplas transformações

Movo o ponto xo para a origem Executo a escala

Movo o ponto xo para sua posição original

S(xf, yf, sx, sy) = T(xf, yf) · S(sx, sy) · T−1(xf, yf)

(40)

Escala 2D com Ponto Fixo

  1 0 xf 0 1 yf 0 0 1     sx 0 0 0 sy 0 0 0 1     1 0 −xf 0 1 −yf 0 0 1   =   sx 0 xf(1 − sx) 0 sy yf(1 − sy) 0 0 1  

(41)

(42)

Escala 2D em Direções Gerais

Os parâmetros sx e sy realizam a escala nas direções de x e y

Para outras direções, rotaciona, escala e rotaciona de volta S(s1, s2, θ) = R−1(θ) · S(s1, s2) · R(θ)

(43)

Escala 2D em Direções Gerais

(44)

Propriedade da Concatenação de Matrizes

Multiplicação de matriz é associativa

M3· M2· M1= (M3· M2) · M1= M3· (M2· M1)

Multiplicação nos dois sentidos é possível, da esquerda para a direita e da direita para a esquerda

Pré-multiplicação: da esquerda para a direita as

transformação são especicadas na ordem em que são aplicadas (M1→ M2→ M3)

Pós-multiplicação: da direita para a esquerda as

transformação são especicadas na ordem inversa em que são aplicadas (M3→ M2→ M1)

(45)

Propriedade da Concatenação de Matrizes

Multiplicação de matrizes não é comutativa M2· M16= M1· M2

Figura:(a) primeiro o objeto é transladado depois rotacionado em 450 _(b)

(46)

Sumário

(47)

Reexão

Espelha-se as coordenadas de um objeto relativo a um eixo de reexão, rotacionando em um ângulo de 1800

Reexão em y = 0   1 0 0 0 −1 0 0 0 1  

(48)

Reexão

Reexão em x = 0   −1 0 0 0 1 0 0 0 1   Reexão em x = 0 e y = 0   −1 0 0 0 −1 0 0 0 1  

(49)

(50)

Cisalhamento

Distorce o formato do objeto na direção de x ou y Cisalhamento na direção de x   1 shx 0 0 1 0 0 0 1  

O que transforma as coordenadas como x0= x + shx· y

(51)

Cisalhamento

(52)

Sumário

(53)

Exemplo de Transformações OpenGL

1 //armazena os vértices de um objeto 2 public classVertice {

3

4 publicVertice(floatx, floaty) { 5 this.x = x; 6 this.y = y; 7 } 8 9 public floatx; 10 public floaty; 11 }

(54)

Exemplo de Transformações OpenGL

1 //armazena a descrição geométrica de um objeto 2 public abstract classObjeto {

3

4 publicObjeto() {

5 vertices =newArrayList<Vertice>();

6 }

7

8 public abstract voidcreate(); 9

10 public voiddraw(GL gl) { 11 gl.glBegin(GL.GL_POLYGON);

12 for (inti = 0; i < vertices.size(); i++) {

13 gl.glVertex2f(vertices.get(i).x, vertices.get(i).y);

14 }

15 gl.glEnd(); 16 }

17

18 publicVertice getFixedPoint() {

19 if (vertices !=null&& !vertices.isEmpty()) { 20 returnvertices.get(0);

21 }

22 return null; 23 }

(55)

Exemplo de Transformações OpenGL

1 public classCasa extendsObjeto { 2

3 public voidcreate() {

4 vertices.add(newVertice(110, 50)); 5 vertices.add(newVertice(110, 70)); 6 vertices.add(newVertice(100, 80)); 7 vertices.add(newVertice(90, 70));

8 vertices.add(newVertice(90, 50));

9 }

(56)

Exemplo de Transformações OpenGL

1 public classRenderer implementsGLEventListener { 2

3 publicRenderer() { 4 casa =new Casa(); 5 casa.create();

6 }

7

8 public voidinit(GLAutoDrawable drawable) {

9 GL gl = drawable.getGL();

10 gl.glClearColor(1.0f, 1.0f, 1.0f, 0.0f);//dene cor de fundo 11 gl.glMatrixMode(GL.GL_PROJECTION);//carrega a matriz de projeção 12 gl.glLoadIdentity();//lê a matriz identidade

13

14 GLU glu =newGLU();

15 glu.gluOrtho2D(0, 200, 0, 150);//dene projeção ortogonal 2D 16 }

17

18 public voidreshape(GLAutoDrawable drawable, intx, 19 inty,int width, intheight) { 20 }

21 22 ...

(57)

Exemplo de Transformações OpenGL

1 public classRenderer implementsGLEventListener { 2 ...

3

4 public voiddisplay(GLAutoDrawable drawable) { 5 GL gl = drawable.getGL();

6 gl.glClear(GL.GL_COLOR_BUFFER_BIT); //desenha o fundo (limpa a janela) 7 gl.glColor3f(1.0f, 0.0f, 0.0f);//altera o atributo de cor

8

9 gl.glMatrixMode(GL.GL_MODELVIEW);//carrega a matriz de modelo

10 casa.draw(gl); 11

12 gl.glFlush();//processa as rotinas OpenGL o mais rápido possível 13 }

14

15 public voiddisplayChanged(GLAutoDrawable drawable,

16 booleanmodeChanged,boolean deviceChanged) { 17 }

(58)

Exemplo de Transformações OpenGL

1 public static voidmain(String[] args) { 2 //acelera o rendering

3 GLCapabilities caps =newGLCapabilities(); 4 caps.setDoubleBuffered(true);

5 caps.setHardwareAccelerated(true); 6

7 //cria o painel e adiciona um ouvinte GLEventListener

8 GLCanvas canvas = newGLCanvas(caps);

9 canvas.addGLEventListener(newRenderer());

10

11 //cria uma janela e adiciona o painel

12 JFrame frame =newJFrame("Aplicação JOGL Simples"); 13 frame.getContentPane().add(canvas);

14 frame.setSize(400, 300);

15 frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); 16

17 //inicializa o sistema e chama display() a 60 fps 18 Animator animator =newFPSAnimator(canvas, 60); 19 frame.setLocationRelativeTo(null);

20 frame.setVisible(true); 21 animator.start(); 22 }

(59)

OpenGL Pós-Multiplicação

3

6 gl.glClear(GL.GL_COLOR_BUFFER_BIT); //desenha o fundo (limpa a janela) 7 gl.glColor3f(1.0f, 0.0f, 0.0f);//altera o atributo de cor

8

9 Vertice v = casa.getFixedPoint();//recuperando ponto xo

10

11 gl.glMatrixMode(GL.GL_MODELVIEW);//carrega a matriz de modelo

12 gl.glTranslatef(v.x, v.y, 0);//move o point xo para a posição original 13 gl.glScalef(2, 2, 0);//faz a escala

14 gl.glTranslatef(-v.x, -v.y, 0);//move o ponto xo para a origem 15

16 casa.draw(gl);//desenho o objeto 17

(60)

(61)

(62)

OpenGL Cumulativo

Solução

Carregar a matriz identidade (glLoadIdentity()) 1 public classRendererimplements GLEventListener { 2 ...

3

6 gl.glClear(GL.GL_COLOR_BUFFER_BIT);//desenha o fundo (limpa a janela) 7 gl.glColor3f(1.0f, 0.0f, 0.0f);//altera o atributo de cor

8

9 Vertice v = casa.getFixedPoint(); //recuperando ponto xo 10

11 gl.glMatrixMode(GL.GL_MODELVIEW); //carrega a matriz de modelo 12 gl.glLoadIdentity();//carrega a matrix identidade

13 gl.glTranslatef(v.x, v.y, 0);//move o point xo para a posição original 14 gl.glScalef(2, 2, 0);//faz a escala

15 gl.glTranslatef(-v.x, -v.y, 0);//move o ponto xo para a origem 16

(63)

OpenGL Ordem de Transformações

Alterando a Ordem das Transformações

Primeiro rotaciono, depois faço a translação

3

6 gl.glClear(GL.GL_COLOR_BUFFER_BIT);//desenha o fundo (limpa a janela) 7 gl.glColor3f(1.0f, 0.0f, 0.0f); //altera o atributo de cor

8

9 Vertice v = casa.getFixedPoint();//recuperando ponto xo 10

11 gl.glMatrixMode(GL.GL_MODELVIEW);//carrega a matriz de modelo 12 gl.glLoadIdentity();//carrega a matrix identidade

13 gl.glTranslatef(50, 0, 0);//faço a translação

14 gl.glTranslatef(v.x, v.y, 0);//move o point xo para a posição original 15 gl.glRotatef(90, 0, 0, 1);//rotaciono

(64)

OpenGL Ordem de Transformações

Alterando a Ordem das Transformações

Primeiro faço a translação, depois rotaciono

3

6 gl.glClear(GL.GL_COLOR_BUFFER_BIT);//desenha o fundo (limpa a janela) 7 gl.glColor3f(1.0f, 0.0f, 0.0f); //altera o atributo de cor

8

9 Vertice v = casa.getFixedPoint();//recuperando ponto xo 10

11 gl.glMatrixMode(GL.GL_MODELVIEW);//carrega a matriz de modelo 12 gl.glLoadIdentity();//carrega a matrix identidade

13 gl.glTranslatef(v.x, v.y, 0);//move o point xo para a posição original 14 gl.glRotatef(90, 0, 0, 1);//rotaciono

15 gl.glTranslatef(-v.x, -v.y, 0); //move o ponto xo para a origem 16 gl.glTranslatef(50, 0, 0);//faço a translação

17

(65)

Prof. Fernando V. Paulovich 12 de março de SCC Computação Gráca

Transformações Geométricas 2D

Sumário

Sumário

Introdução

Sumário

Translação

Rotação

Rotação

Rotação

Rotação

Rotação

Transformação de Corpo Rígido

Escala

Escala

Escala

Sumário

Coordenadas Homogêneas

Coordenadas Homogêneas

Coordenadas Homogêneas

Coordenadas Homogêneas  Translação 2D

Coordenadas Homogêneas  Translação 2D

Coordenadas Homogêneas  Translação 2D

Coordenadas Homogêneas  Rotação 2D

Coordenadas Homogêneas  Escala 2D

Transformando Vértices

Sumário

Translação Inversa

Rotação Inversa

Escala Inversa

Sumário

Introdução

Compondo Translações

Compondo Rotações

Compondo Escalas

Rotação 2D com Ponto de Rotação

Rotação 2D com Ponto de Rotação

Escala 2D com Ponto Fixo

Escala 2D com Ponto Fixo

Escala 2D em Direções Gerais

Escala 2D em Direções Gerais

Propriedade da Concatenação de Matrizes

Propriedade da Concatenação de Matrizes

Sumário

Reexão

Reexão

Cisalhamento

Cisalhamento

Sumário

Exemplo de Transformações OpenGL

Exemplo de Transformações OpenGL

Exemplo de Transformações OpenGL

Exemplo de Transformações OpenGL

Exemplo de Transformações OpenGL

Exemplo de Transformações OpenGL

OpenGL  Pós-Multiplicação

OpenGL  Cumulativo

OpenGL  Ordem de Transformações

OpenGL  Ordem de Transformações

OpenGL  Ordem de Transformações

Coordenadas Homogêneas Translação 2D

Coordenadas Homogêneas Translação 2D

Coordenadas Homogêneas Translação 2D

Coordenadas Homogêneas Rotação 2D

Coordenadas Homogêneas Escala 2D

Reexão

Reexão

OpenGL Pós-Multiplicação

OpenGL Cumulativo

OpenGL Ordem de Transformações

OpenGL Ordem de Transformações

OpenGL Ordem de Transformações