Visualização por Computador: Teoria, Prática e Aplicações

Transcrição

1 Visualização por Computador: Teoria, Prática e Aplicações Vértices, formas e transformações Claudio Esperança Programa de Engenharia de Sistemas e Computação COPPE / UFRJ Master of Information Management, 2008

2 Sumário 1 Formas com vértices 2 Transformações 3 Arquivos de formas

3 Vértices Processing suporta o desenho de formas a partir do padrão de programação: beginshape(modo); vertex(x,y);... vertex(x,y); endshape(close); Onde modo corresponde a um modo de desenho que pode ser vazio, POINTS, LINES, TRIANGLES, TRIANGLE_STRIP, TRIANGLE_FAN, QUADS e QUAD_STRIP x e y são coordenadas de pontos que definem a forma close pode ser vazio ou CLOSE indicando que a forma tem que ser fechada

4 Polígonos Quando beginshape() é chamada sem argumentos, os são tratados como vértices de um polígono Nesse caso, endshape(close) denota um polígono fechado, enquanto que endshape() omite a aresta final entre o primeiro e o último vértice As funções usuais stroke(), fill(), etc podem ser usadas para controlar a cor de contorno e de preenchimento do polígono As chamadas a vertex() podem ser intercaladas com outros comandos não gráficos

5 Polígonos - exemplo 1 size(200,200); beginshape(); vertex(40, 40); vertex(80, 40); vertex(80, 80); vertex(120, 80); vertex(120, 120); vertex(40, 120); endshape();

6 Polígonos - exemplo 2 size(200,200); beginshape(); vertex(40, 40); vertex(80, 40); vertex(80, 80); vertex(120, 80); vertex(120, 120); vertex(40, 120); endshape( CLOSE);

7 Polígonos - exemplo 3 size(200,200); beginshape(); strokeweight (5); strokecap( PROJECT); fill(255,255,100); for ( int i = 0; i < 12; i ++) { float ang = i * TWO_PI / 12; vertex (100+ cos( ang)*50, 100+ sin( ang)*50); vertex (100+ cos( ang)*75, 100+ sin( ang)*75); } endshape( CLOSE);

8 Outras formas Usando outras constantes para o parâmetro mode da função drawshape é possível obter outras formas: POINTS cada vértice é desenhado como um ponto LINES] cada 2 vértices é desenhado como um segmento de reta TRIANGLES cada 3 vértices é desenhado como um triângulo TRIANGLE_STRIP após os primeiros 2 vértices, para cada vértice adicional é desenhado um triângulo unindo este vértice aos dois anteriores TRIANGLE_FAN após os primeiros 2 vértices, para cada vértice adicional é desenhado um triângulo unindo este vértice ao anterior e ao primeiro QUADS cada 4 vértices é desenhado como um quadrilátero QUAD_STRIP após os primeiros 2 vértices, para cada 2 vértices é desenhado um quadrilátero com os 4 últimos vértices

9 Outras formas - ordem entre os vértices A ordem entre os vértices modifica o desenho

10 Curvas spline Polígonos com contornos curvos podem ser obtidos substituindo chamadas a vertex() por chamadas a curvevertex() Matematicamente, esses curvas são conhecidas como curvas spline de Catmull-Rom O primeiro e o último vertice não são considerados para traçado, mas servem somente para indicar a curvatura do segundo e penúltimo vértice Portanto, uma curva spline requer no mínimo 4 chamadas a curvevertex()

11 Curvas spline - exemplo 1 size(200,200); int x[] = { 50,100,150,150,100, 50}; int y[] = { 50, 50, 50,150,150,150}; int n = x.length; smooth(); beginshape(); for (int i = 0; i < n; i++) { curvevertex (x[i], y[i]); } endshape(); for (int i = 0; i < n; i++) { ellipse (x[i],y[i], 5, 5); }

12 Curvas spline - exemplo 2 size(200,200); int x[] = { 50,100,150,100, 50}; int y[] = {150, 50,100,150, 50}; int n = x.length; smooth(); beginshape(); for (int i = 0; i < n; i++) { curvevertex (x[i], y[i]); } endshape(); for (int i = 0; i < n; i++) { ellipse (x[i],y[i], 5, 5); }

13 Curvas spline - exemplo 3 size(200,200); int x[] = {100, 50,100,150,100, 50,100}; int y[] = {150,100, 50,100,150,100, 50}; int n = x.length; smooth(); beginshape(); for (int i = 0; i < n; i++) { curvevertex (x[i], y[i]); } endshape(); for (int i = 0; i < n; i++) { ellipse (x[i],y[i], 5, 5); }

14 Curvas Bézier emendadas A API de formas definidas por vértices também pode ser usada para traçar curvas Bézier cúbicas emendadas Para inserir um vértice de Bézier use a função beziervertex (x c1, y c1, x c2, y c2, x p, y p ) onde x c1, y c1 referem-se ao ponto de controle que define a direção da tangente ao vértice emitido anteriormente x c1, y c1 referem-se ao ponto de controle que define a direção da tangente deste vértice x p, y p referem-se à posição deste vértice Para iniciar o processo é preciso emitir um vértice comum usando a função vertex()

15 Curvas Bézier emendadas size(200,200); int x[] = { 40, 40, 80,120,160,160,120}; int y[] = { 40,100, 40, 40, 40,160,160}; int n = x.length; smooth(); beginshape(); vertex(x[0],y[0]); for (int i = 1; i < n; i+=3) { beziervertex (x[i],y[i],x[i+1],y[i+1], x[i+2],y[i+2]); } endshape(); for (int i = 0; i < n; i++) { if (i%3==0) fill(0); else fill(255); ellipse (x[i],y[i], 5, 5); }

16 Transformações O sistema de coordenadas default do Processing pode ser alterado através de transformações lineares afim As transformações são geradas por funções como translate(x t, y t ) translação pelo vetor [x t, y t ] scale (x s, y s ) escala o eixo x pelo fator x s e o eixo y pelo fator y s rotate (ang) roda ambos os eixos ang radianos no sentido Cada transformação modifica o sistema de referência corrente A ordem com que as transformações são processadas é importante

17 Transformações - exemplo 1 size(200,200); triangle (10,10,10,100,100,10); translate (100,100); fill(180); triangle (10,10,10,100,100,10); rotate( radians (45)); fill (120); triangle (10,10,10,100,100,10); scale(-0.5,0.5); fill(60); triangle (10,10,10,100,100,10);

18 Composição de transformações como ferramenta A composição de transformações é uma ferramenta poderosa na obtenção de efeitos gráficos Exemplo: size(200,200); background (0); smooth(); stroke(255, 120); translate( width/2, height/2); for ( int i = 0; i < 18; i++) { strokeweight(i); rotate(pi/12); line(0, 0, width/3, 0); }

19 Interpretação para composição de transformações A compreensão correta do processo de composição de transformações é indispensável para a disposição dos elementos gráficos na tela Há duas interpretações igualmente válidas para o processo Lendo o código de forma linear de cima para baixo, pode-se entender cada transformação como uma mudança de sistemas de coordenadas Lendo o código de baixo para cima, a partir do ponto onde a primitiva é desenhada, pode-se entender cada transformação como uma alteração da forma desenhada

20 Composição de transformações - exemplo 1 Composição como mudança de sistema de coordenadas translate(width/2, height /2); rotate(pi/8); rect(-25, -25, 50, 50);

21 Composição de transformações - exemplo 2 Composição como alteração da forma desenhada: translate(width/2, height /2); rotate(pi/8); rect(-25, -25, 50, 50);

22 A pilha de matrizes Transformações lineares afim são representadas internamente por matrizes Por default, a matriz de transformação é uma matriz identidade Processing mantém uma pilha de matrizes de transformação sendo que apenas a matriz do topo é empregada nas operações Para alterar a pilha, usa-se as funções pushmatrix() cria uma cópia da matriz do topo e a empilha popmatrix() descarta a matriz no topo da pilha

23 Pilha de Matrizes - exemplo size(200,200); background (255); translate(100, 100); pushmatrix(); ellipsemode(center); nostroke(); smooth(); fill(50,64); for (int i = 0; i < 10; i++) { for (int j = 0; j<10; j++) { ellipse(0,0,10,50); rotate(radians (20)); translate (0,15); } popmatrix(); // Volta ao centro // Guardar centro da tela rotate(two_pi /10); pushmatrix(); // Guardar centro } popmatrix(); // Desempilhar última matriz

24 Arquivos de formas Processing pode também usar formas armazenadas em arquivos do tipo SVG (Scalable Vector Graphics) Útil para importar formas modeladas com aplicativos de desenho vetorial tais como Adobe Illustrator (comercial) ou Inkscape (open source)

25 O formato SVG A classe PShape encapsula a funcionalidade para manipulação de formas SVG O W3C (WWW Consortium) padroniza o formato SVG em diversos níveis (SVG Basic, SVG Tiny, etc) Nem todas as facilidades do padrão SVG são suportadas por objetos PShape Ex.: Texto não é reconhecido, mas pode-se optar por conversão elementos de texto para polígonos antes de salvar o arquivo SVG

26 Desenhando PShapes Para desenhar uma forma armazenada num arquivo SVG 1 Copie o arquivo para o diretório data do seu sketch Menu Sketch > Add File... 2 Declare uma variável v do tipo PShape 3 Atribua à variável o conteúdo do arquivo usando a função loadshape(arquivo) 4 Use a função shape() para desenhar a forma

27 A função shape() shape(v) desenha a forma no canto superior esquerdo da tela shape(v,x,y) desenha a forma na posição x,y da tela shape(v,x,y,w,h) desenha a forma na posição x,y da tela escalada para ocupar largura w e altura h A função shapemode(modo) altera a interpretação dos parâmetros da função shape() Ex: shapemode(center) faz com que os parâmetros x e y se refiram ao centro da tela

28 Arquivos de forma - exemplo 1 size(200,200); PShape s; s = loadshape(" gimp. svg"); smooth(); shapemode( CENTER); shape(s, width/2, height/2);

29 Desenhando PShapes com estilos do Processing A classe PShape possui diversos campos e métodos úteis como Os campos width e height contêm o tamanho original da forma em pixels O método disablestyles() inibe o uso dos estilos próprios do desenho (cor, largura da linha, etc) substituindo-os pelos definidos no sketch O método enablestyles() reabilita o uso dos estilos próprios

30 PShapes com estidos do Processing - exemplo size(200,200); PShape s; s = loadshape(" gimp. svg"); smooth(); shape(s); s. disablestyle (); stroke(100,0,0); strokeweight (3); fill(100,100,150); shape(s, 70, 70, width -80, height -80);