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

Transcrição

1 Transformações Geométricas 2D SCC Computação Gráca Prof. Fernando V. Paulovich paulovic@icmc.usp.br Instituto de Ciências Matemáticas e de Computação (ICMC) Universidade de São Paulo (USP) 12 de março de / 65

2 Introdução 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 2 / 65

3 Introdução 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 / 65

4 Introdução 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 4 / 65

5 Transformações Básicas 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 5 / 65

6 Transformações Básicas Translação Translação A translação consiste em adicionar osets às coordenadas que denem um objeto x = x + t x y = y + t y Usando notação matricial, uma translação 2D pode ser descrita como P = P + T [ P x = y ] [ x, P = y ] [ tx, T = t y ] 6 / 65

7 Transformações Básicas Rotação 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 7 / 65

8 Transformações Básicas Rotação Parâmetros de rotação 2D são o ângulo θ de rotação e o ponto (x r, y r ) 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 8 / 65

9 Transformações Básicas 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 9 / 65

10 Transformações Básicas Rotação Sabendo que cos(φ + θ) = x r x = r cos(φ + θ) sen(φ + θ) = y r y = r sen(φ + θ) como cos(α + β) = cos α cos β sen α sen β sen(α + β) = cos α sen β + sen α cos β então x = r cos φ cos θ r sen φ sen θ y = r cos φ sen θ + r sen φ cos θ 10 / 65

11 Transformações Básicas Rotação P = (x, y) pode ser descrito por meio de coordenadas polares x = r cos φ, y = r sen φ Então por substituição x = x cos θ y sen θ y = x sen θ + y cos θ Escrevendo na forma matricial temos P = R P [ ] [ x cos θ sen θ y = sen θ cos θ ] [ x y ] 11 / 65

12 Transformações Básicas Transformação de Corpo Rígido 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 Mantém ângulos e distâncias entre as coordenadas do objeto 12 / 65

13 Transformações Básicas Escala 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 x = x s x, y = y s y Na forma matricial P = S P [ ] [ ] [ x sx 0 x y = 0 s y y ] 13 / 65

14 Transformações Básicas Escala Propriedades de s x e s y s x e s y devem ser maiores que zero Se s x > 1 e s y > 1 o objeto aumenta Se s x < 1 e s y < 1 o objeto diminui Se s x = s y a escala é uniforme Se s x s y a escala é diferencial 14 / 65

15 Transformações Básicas Escala Pela formulação denida, o objeto é escalado e movido Figura: Escala de uma linha usando s x = s y = / 65

16 Coordenadas Homogêneas 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 16 / 65

17 Coordenadas Homogêneas Coordenadas Homogêneas As três transformações básicas podem ser expressas por P = M 1 P + M 2 M 1 : matriz 2 2 com fatores multiplicativos M 2 : 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 17 / 65

18 Coordenadas Homogêneas 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 (x h, y h, h), onde h é o parâmetro homogêneo (h 0) As coordenadas cartesianas são recuperados projetando as coordenadas homogêneas no plano h = 1 18 / 65

19 Coordenadas Homogêneas Coordenadas Homogêneas 19 / 65

20 Coordenadas Homogêneas 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 = x h h, y = y h h Nas coordenadas homogêneas, h pode ser qualquer valor diferente de zero, mas escolhemos h = 1 para a transformação ser mais simples 20 / 65

21 Coordenadas Homogêneas 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 x h = 1 x h + 0 y h + t x h y h = 0 x h + 1 y h + t y h h = 0 x h + 0 y h + 1 h 21 / 65

22 Coordenadas Homogêneas Coordenadas Homogêneas Translação 2D Denindo na forma matricial temos x h y h = 1 0 t x 0 1 t y h x h y h h Voltando ao espaço Cartesiano x h/h = (1 x h + 0 y h + t x h)/h x = x + t x y h/h = (0 x h + 1 y h + t y h)/h y = y + t y h/h = (0 x h + 0 y h + 1 h)/h 1 = 1 22 / 65

23 Coordenadas Homogêneas Coordenadas Homogêneas Translação 2D Por conveniência, com h = 1, denimos a translação no espaço Cartesiano como P h = T(t x, t y ) P h x h y h 1 = 1 0 t x 0 1 t y x h y h 1 23 / 65

24 Coordenadas Homogêneas Coordenadas Homogêneas Rotação 2D Uma rotação pode ser denida usando coordenadas homogêneas da seguinte forma P h = R(θ) P h x h y h 1 = cos θ sen θ 0 sen θ cos θ x h y h 1 24 / 65

25 Coordenadas Homogêneas Coordenadas Homogêneas Escala 2D Uma escala pode ser denida usando coordenadas homegêneas da seguinte forma P h = S(s x, s y ) P h x h y h 1 = s x s y x h y h 1 25 / 65

26 Coordenadas Homogêneas Transformando Vértices Exemplo de utilização de uma matriz de transformação 1 #version in vec3 a_position; 4 5 void main(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 , 0.0, 1.0); //terceira coluna //multiplicando a matriz de transformacao pelo vetor 13 //em coordenadas homogeneas 14 vec3 pos = model * vec3(a_position[0], a_position[1], 1.0); //convertendo as coordenadas homogeneas para euclideanas 17 gl_position = vec4(pos[0]/pos[2], pos[1]/pos[2], 0.0, 1.0); 18 } 26 / 65

27 Transformações Inversas 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 27 / 65

28 Transformações Inversas Translação Inversa Para a translação, inverte-se o sinal das translações T 1 = 1 0 t x 0 1 t y / 65

29 Transformações Inversas Rotação Inversa Uma rotação inversa é obtida trocando o ângulo de rotação por seu negativo R 1 = Isso rotaciona no sentido horário R 1 = R T cos θ sen θ 0 sen θ cos θ / 65

30 Transformações Inversas Escala Inversa O inverso da escala é obtido trocando os parâmetros por seus inversos S 1 (s x, s y ) = s x s y / 65

31 Transformações 2D Compostas 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 31 / 65

32 Transformações 2D Compostas 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 P h = M 2 M 1 P h = (M 2 M 1 ) P = M P h A transformação é dada por M ao invés de M 1 e M 2 32 / 65

33 Transformações 2D Compostas Compondo Translações Para se compor duas translações podemos fazer 1 0 t 2 x 0 1 t 2y P h = T(t 2 x, t 2y ) {T(t 1x, t 1y ) P h } = {T(t 2x, t 2y ) T(t 1x, t 1y )} P h = T(t 2x + t 1x, t 2y + t 1y ) P h 1 0 t 1 x 0 1 t 1y = 1 0 t 1 x + t 2x 0 1 t 1y + t 2y / 65

34 Transformações 2D Compostas Compondo Rotações Para se compor duas rotações podemos fazer cos θ 1 sen θ 1 0 sen θ 1 cos θ P h = R(θ 2) {R(θ 1 ) P h } = {R(θ 2 ) R(θ 1 )} P h = R(θ 1 + θ 2 ) P h cos θ 2 sen θ 2 0 sen θ 2 cos θ cos(θ 1 + θ 2 ) sen(θ 1 + θ 2 ) 0 sen(θ 1 + θ 2 ) cos(θ 1 + θ 2 ) = 34 / 65

35 Transformações 2D Compostas Compondo Escalas Para se compor duas escalas podemos fazer s 2 x s 2y P h = S(s 2 x, s 2y ) {S(s 1x, s 1y ) P h } = {S(s 2x, s 2y ) S(s 1x, s 1y )} P h = S(s 1x s 2x, s 1y s 2y ) P h s 1 x s 1y = s 1 x s 2x s 1y s 2y / 65

36 Transformações 2D Compostas 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(x r, y r, θ) = T(x r, y r ) R(θ) T 1 (x r, y r ) R(x r, y r, θ) = T(x r, y r ) R(θ) T( x r, y r ) 36 / 65

37 Transformações 2D Compostas Rotação 2D com Ponto de Rotação 1 0 x r 0 1 y r = cos θ sen θ 0 sen θ cos θ x r 0 1 y r cos θ sen θ x r x r cos θ + y r sen θ sen θ cos θ y r y r cos θ x r sen θ / 65

38 Transformações 2D Compostas Rotação 2D com Ponto de Rotação 38 / 65

39 Transformações 2D Compostas 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(x f, y f, s x, s y ) = T(x f, y f ) S(s x, s y ) T 1 (x f, y f ) S(x f, y f, s x, s y ) = T(x f, y f ) S(s x, s y ) T( x f, y f ) 39 / 65

40 Transformações 2D Compostas Escala 2D com Ponto Fixo 1 0 x f 0 1 y f = s x s y s x 0 x f (1 s x ) 0 s y y f (1 s y ) x f 0 1 y f / 65

41 Transformações 2D Compostas Escala 2D com Ponto Fixo 41 / 65

42 Transformações 2D Compostas Escala 2D em Direções Gerais Os parâmetros s x e s y realizam a escala nas direções de x e y Para outras direções, rotaciona, escala e rotaciona de volta S(s 1, s 2, θ) = R 1 (θ) S(s 1, s 2 ) R(θ) 42 / 65

43 Transformações 2D Compostas Escala 2D em Direções Gerais Figura: Transformação com s 1 = 1, s 2 = 2 e θ = / 65

44 Transformações 2D Compostas Propriedade da Concatenação de Matrizes Multiplicação de matriz é associativa M 3 M 2 M 1 = (M 3 M 2 ) M 1 = M 3 (M 2 M 1 ) 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 (M 1 M 2 M 3) Pós-multiplicação: da direita para a esquerda as transformação são especicadas na ordem inversa em que são aplicadas (M 3 M 2 M 1) OpenGL usa pós-multiplicação 44 / 65

45 Transformações 2D Compostas Propriedade da Concatenação de Matrizes Multiplicação de matrizes não é comutativa M 2 M 1 M 1 M 2 Figura: (a) primeiro o objeto é transladado depois rotacionado em 45 0 (b) primeiro o objeto é rotacionado em 45 0, depois transladado. 45 / 65

46 Outras Transformações 2D 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 46 / 65

47 Outras Transformações 2D Reexão Espelha-se as coordenadas de um objeto relativo a um eixo de reexão, rotacionando em um ângulo de Reexão em y = / 65

48 Outras Transformações 2D Reexão Reexão em x = Reexão em x = 0 e y = / 65

49 Outras Transformações 2D Reexão 49 / 65

50 Outras Transformações 2D Cisalhamento Distorce o formato do objeto na direção de x ou y Cisalhamento na direção de x 1 sh x O que transforma as coordenadas como x = x + sh x y y = y 50 / 65

51 Outras Transformações 2D Cisalhamento Figura: Convertendo um quadrado em um paralelogramo usando sh x = / 65

52 Transformações 2D e OpenGL 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 52 / 65

53 Transformações 2D e OpenGL Exemplo de Transformações OpenGL 1 //armazena os vértices de um objeto 2 public class Vertice { 3 4 public Vertice(float x, float y) { 5 this.x = x; 6 this.y = y; 7 } 8 9 public float x; 10 public float y; 11 } 53 / 65

54 Transformações 2D e OpenGL Exemplo de Transformações OpenGL 1 //armazena a descrição geométrica de um objeto 2 public abstract class Objeto { 3 4 public Objeto() { 5 vertices = new ArrayList<Vertice>(); 6 } 7 8 public abstract void create(); 9 10 public void draw(gl gl) { 11 gl.glbegin(gl.gl_polygon); 12 for (int i = 0; i < vertices.size(); i++) { 13 gl.glvertex2f(vertices.get(i).x, vertices.get(i).y); 14 } 15 gl.glend(); 16 } public Vertice getfixedpoint() { 19 if (vertices!= null &&!vertices.isempty()) { 20 return vertices.get(0); 21 } 22 return null; 23 } protected ArrayList<Vertice> vertices; 26 } 54 / 65

55 Transformações 2D e OpenGL Exemplo de Transformações OpenGL 1 public class Casa extends Objeto { 2 3 public void create() { 4 vertices.add(new Vertice(110, 50)); 5 vertices.add(new Vertice(110, 70)); 6 vertices.add(new Vertice(100, 80)); 7 vertices.add(new Vertice(90, 70)); 8 vertices.add(new Vertice(90, 50)); 9 } 10 } 55 / 65

56 Transformações 2D e OpenGL Exemplo de Transformações OpenGL 1 public class Renderer implements GLEventListener { 2 3 public Renderer() { 4 casa = new Casa(); 5 casa.create(); 6 } 7 8 public void init(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 GLU glu = new GLU(); 15 glu.gluortho2d(0, 200, 0, 150); //dene projeção ortogonal 2D 16 } public void reshape(glautodrawable drawable, int x, 19 int y, int width, int height) { 20 } } 56 / 65

57 Transformações 2D e OpenGL Exemplo de Transformações OpenGL 1 public class Renderer implements GLEventListener { public void display(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); gl.glflush(); //processa as rotinas OpenGL o mais rápido possível 13 } public void displaychanged(glautodrawable drawable, 16 boolean modechanged, boolean devicechanged) { 17 } private Objeto casa; 20 } 57 / 65

58 Transformações 2D e OpenGL Exemplo de Transformações OpenGL 1 public static void main(string[] args) { 2 //acelera o rendering 3 GLCapabilities caps = new GLCapabilities(); 4 caps.setdoublebuffered(true); 5 caps.sethardwareaccelerated(true); 6 7 //cria o painel e adiciona um ouvinte GLEventListener 8 GLCanvas canvas = new GLCanvas(caps); 9 canvas.addgleventlistener(new Renderer()); //cria uma janela e adiciona o painel 12 JFrame frame = new JFrame("Aplicação JOGL Simples"); 13 frame.getcontentpane().add(canvas); 14 frame.setsize(400, 300); 15 frame.setdefaultcloseoperation(jframe.exit_on_close); //inicializa o sistema e chama display() a 60 fps 18 Animator animator = new FPSAnimator(canvas, 60); 19 frame.setlocationrelativeto(null); 20 frame.setvisible(true); 21 animator.start(); 22 } 58 / 65

59 Transformações 2D e OpenGL OpenGL Pós-Multiplicação 1 public class Renderer implements GLEventListener { public void display(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 Vertice v = casa.getfixedpoint(); //recuperando ponto xo 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 casa.draw(gl);//desenho o objeto gl.glflush(); //processa as rotinas OpenGL o mais rápido possível 19 } 20 } 59 / 65

60 Transformações 2D e OpenGL OpenGL Pós-Multiplicação 60 / 65

61 Transformações 2D e OpenGL OpenGL Cumulativo O método draw(...) é chamado mais de uma vez (modicação do tamanho da janela) o objeto é escalado duas vezes 61 / 65

62 Transformações 2D e OpenGL OpenGL Cumulativo Solução Carregar a matriz identidade (glloadidentity()) 1 public class Renderer implements GLEventListener { public void display(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 Vertice v = casa.getfixedpoint(); //recuperando ponto xo 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 casa.draw(gl);//desenho o objeto gl.glflush(); //processa as rotinas OpenGL o mais rápido possível 20 } 21 } 62 / 65

63 Transformações 2D e OpenGL OpenGL Ordem de Transformações Alterando a Ordem das Transformações Primeiro rotaciono, depois faço a translação 1 public class Renderer implements GLEventListener { public void display(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 Vertice v = casa.getfixedpoint(); //recuperando ponto xo 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 16 gl.gltranslatef(-v.x, -v.y, 0); //move o ponto xo para a origem casa.draw(gl);//desenho o objeto gl.glflush(); //processa as rotinas OpenGL o mais rápido possível 21 } 22 } 63 / 65

64 Transformações 2D e OpenGL OpenGL Ordem de Transformações Alterando a Ordem das Transformações Primeiro faço a translação, depois rotaciono 1 public class Renderer implements GLEventListener { public void display(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 Vertice v = casa.getfixedpoint(); //recuperando ponto xo 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 casa.draw(gl);//desenho o objeto gl.glflush(); //processa as rotinas OpenGL o mais rápido possível 21 } 22 } 64 / 65

65 Transformações 2D e OpenGL OpenGL Ordem de Transformações A ordem das transformações leva a resultados completamente diferentes 65 / 65