DESENVOLVIMENTO DE UM APLICATIVO COMPUTACIONAL ONLINE PARA O ENSINO DE GEOMETRIA DESCRITIVA

DESENVOLVIMENTO DE UM APLICATIVO COMPUTACIONAL ONLINE PARA O ENSINO DE GEOMETRIA DESCRITIVA Daniel de Carvalho Moreira Doris C. C. K. Kowaltowski Faculdade de Engenharia Civil, Arquitetura e Urbanismo, UNICAMP, Brasil damore@fec.unicamp.br; doris@fec.unicamp.br RESUMO Este artigo apresenta as propriedades de um aplicativo computacional para o ensino de Geometria Descritiva, desenvolvido através do programa Macromedia Flash MX 2004 (TM, versão 7.2, Copyright 1993-2004 Macromedia, Inc.). Tratase de um aplicativo de uso online para planificação e visualização de qualquer segmento de reta, definido pelo usuário, no sistema diédrico. O conjunto composto pelo segmento de reta e planos do diedro, é representado em uma perspectiva e no rebatimento em épura. Com este exemplo, pretende-se demonstrar alguns recursos do programa Flash e suas aplicações no desenho vetorial e na computação gráfica. Palavras-chave: Geometria Descritiva, computação gráfica, aplicativo online. ABSTRACT This paper presents the development of a computer tool to help the teaching of descriptive geometry. The computer tool described here was built within the Macromedia Flash MX 2004 (TM, version 7.2, Copyright 1993-2004 Macromedia, Inc.) and can be used online. This application shows, in the diedrical system, the projection and the perspective of one line segment defined by the user. The example presented here will demonstrate some vectorial drawing and computer graphics properties of the Macromedia Flash MX 2004 application. Keywords: descriptive geometry, computer graphics, online computer tool. 1 Introdução Este trabalho apresenta as características de um aplicativo computacional desenvolvido para ajudar o aluno da disciplina de Geometria Descritiva a compreender como um segmento de reta é planificado no rebatimento de sua projeção e dos planos do diedro. Para isso, apresenta na

tela do computador um modelo tridimensional do sistema diédrico, incluindo um segmento de reta descrito pelo usuário, que pode ser rotacionado. O segmento de reta é descrito através das coordenadas de abscissa, afastamento e cota de dois pontos. Também é representada a planificação, ou épura, deste conjunto, na mesma tela onde o modelo em perspectiva aparece. Além de oferecer estes recursos de interatividade e visualização do sistema diédrico, o aplicativo desenvolvido é um exemplo dos recursos gráficos do programa Macromedia Flash MX 2004 (TM, versão 7.2, Copyright 1993-2004 Macromedia, Inc.). O presente artigo apresenta algumas propriedades do programa e que podem ser úteis para os profissionais das áreas de desenho. Muitas vezes, o número de linguagens de programação disponível, e com recursos gráficos, confunde aqueles que procuram uma solução para desenvolver determinados aplicativos computacionais. Qual programa poderia ser utilizado se quisermos desenvolver um aplicativo que execute determinados cálculos e apresente uma ilustração dos resultados em uma situação específica, como a deformação de uma viga, ou o desenho de uma parede ou a perspectiva de um volume? No que implicaria o uso de determinada linguagem de programação? Seria possível usar o programa Macromedia Flash? Este artigo não responde a todas estas perguntas, mas oferece informações que permitem compreender que o aplicativo descrito acima pode ser desenvolvido em Flash, e quais as vantagens e dificuldades desta escolha. Profissionais das áreas gráficas que não desejam se aprofundar em muitas linguagens de programação, poderão considerar as possibilidades e problemas expostos neste artigo como uma referência para avaliação do programa. O Macromedia Flash é conhecido como um programa para desenvolvimento de animações e ambiente multimídia para a internet. Tem forte apelo gráfico por oferecer muitos recursos para trabalhar com imagens vetoriais, o que também reduz significativamente o tamanho dos arquivos criados por ele. Isso é possível porque estes arquivos são executados por um plugin: um programa que funciona junto com o navegador de internet (browser). Segundo a Macromedia, 98% dos computadores com acesso à internet possuem o plugin Flash Player (ver http://www.macromedia.com/software/player_census/flashplayer/). A versão atual do programa é chamada de MX 2004 e apresenta grandes mudanças em relação às versões anteriores. A principal delas é o aperfeiçoamento da linguagem de programação do software, chamada ActionScript, agora na versão 2.0. Outra inovação, presente desde a versão anterior (chamada MX ) é o Drawing API, ferramenta de programação para o desenho de vetores em ActionScript, e que motivou o uso desta linguagem no exemplo aqui descrito. 2 Desenvolvimento do Programa O aplicativo de Geometria Descritiva apresenta para o usuário uma única tela (figura 1). Esta interface permite entrar com as coordenadas dos pontos do segmento de reta (campos na área inferior direita da tela), aplicar estas coordenadas através do botão ok e ver a projeção do segmento em épura (área direita da tela) e em um modelo tridimensional do sistema diédrico (área esquerda da tela). O modelo tridimensional é apresentado inicialmente em uma perspectiva isométrica, que pode ser rotacionada através dos botões na parte inferior esquerda da tela ou através das setas do teclado. O botão rd (no centro e em cima da tela) permite

retornar à posição inicial da perspectiva, uma vez que, ao indicar as coordenadas de um novo segmento, este será representado na posição em que se encontra o modelo rotacionado. Figura 1: A interface do aplicativo. Para facilitar a visualização dos planos do diedro e o rebatimento dos pontos, o modelo do sistema apresenta cada um dos semi-planos com uma cor diferente. As cores evitam que o usuário perca a referência da orientação do diedro enquanto rotaciona o modelo. Os semiplanos possuem uma transparência para que os pontos sejam vistos sempre, mesmo quando atrás de um deles. Também foram incluídas as projeções dos pontos nos planos do diedro: as projeções dos pontos A e B no plano vertical do diedro são chamados, respectivamente, A1 e B1 e as projeções destes pontos no plano vertical são chamados A2 e B2. O programa não inclui um limite para as coordenadas dos pontos. O usuário pode representar o segmento de reta que quiser, com quaisquer dimensões, mesmo que implique numa confusão de linhas. As dimensões dos planos do diedro permanecem limitados entre -100 e 100 para todas as coordenadas (mesmo que as dimensões do segmento de reta ultrapassem estas medidas) e não estão disponíveis, por enquanto, recursos de aproximação (zoom). 2.1 Matrizes de Planificação Na representação em perspectiva, as três coordenadas de cada um dos pontos do segmento de reta e dos planos do diedro são multiplicados por matrizes de planificação, o que resulta em duas coordenadas para cada ponto dos objetos, representando-os em uma planificação bidimensional. O desenho deve ser bidimensional para que seja exibido na tela do computador. De nada adianta armazenar as coordenadas tridimensionais se elas não podem ser planificadas em duas dimensões para que sejam exibidas. As coordenadas tridimensionais de cada ponto, tanto das extremidades do segmento de reta como dos vértices dos semi-planos do diedro, são registradas em vetores que, em seguida, são multiplicados por uma seqüência de matrizes. Após uma multiplicação, o vetor que indicava a posição de um ponto no espaço tridimensional,

resulta em outro vetor, que descreve a mesma posição em uma planificação na tela do computador. O resultado pode ser tanto a perspectiva isométrica como o rebatimento dos objetos em épura, dependendo de quais matrizes são empregadas na multiplicação. A principal referência sobre transformações e projeções geométricas através de matrizes foi obtida em AZEVEDO e CONCI (2003). Existe um exemplo do uso de matrizes para a representação de objetos tridimensionais em Flash que também foi consultado (CORBIN, c. 2002). Apesar de apresentar uma matriz pré-definida, resultado de multiplicações de matrizes (e que não foi usado neste exemplo), esta última referência descreve alguns detalhes da programação em ActionScript para a multiplicação de vetores e matrizes, bem como apresenta a base para o código da montagem das partes do desenho. Vamos apresentar aqui uma seqüência de matrizes para cada desenho. Uma seqüência de matrizes pode ser simplificada em uma única matriz, resultado da multiplicação de todas elas. Uma versão simplificada do código do aplicativo poderia incluir apenas a matriz final para cada planificação, sem que as multiplicações fossem realizadas pelo programa, como apresentado aqui. Para desenhar a perspectiva isométrica dos objetos descritos, foram realizados os seguintes passos: a) foi estabelecido um sistema de coordenadas para o diedro, associando os eixos de afastamento, abscissas e cota aos eixos x, y e z respectivamente (figura 2a), de tal forma que valores positivos e negativos fossem correspondentes nos dois sistemas. b) foi definido um vetor para cada um dos pontos dos objetos, tanto extremidades de segmentos de reta quanto vértices dos planos, e que armazena as três coordenadas de cada um destes pontos assim: [ x, y, z ]; c) foi estabelecida, em ActionScript, a matriz de rotação no eixo X segundo um ângulo alfa, como descrita em AZEVEDO e CONCI (2003, p.58) na equação (1): [1 0 0 0 cos sin 0 sin cos ] 1 d) multiplicou-se o vetor de cada ponto pela matriz de rotação no eixo X com o ângulo alfa igual a 90 para adequar o sistema de coordenadas estabelecido às coordenadas (bidimensionais) da tela do Flash. A figura 2b apresenta as coordenadas dos planos do diedro planificado, enquanto que a figura 2c mostra o resultado da multiplicação da matriz de rotação em 90 no eixo X; e) foi estabelecida, em ActionScript, a matriz de rotação no eixo Y segundo um ângulo beta (AZEVEDO; CONCI, 2003, p.58), como na equação (2): [cos 0 sin ] 0 1 0 2 sin 0 cos f) para gerar a perspectiva isométrica, os vetores foram multiplicados pela matriz de rotação em Y com o ângulo beta igual a 45 e pela matriz de rotação em X com alfa igual a 35.26, resultando em uma perspectiva isométrica, como na figura 2f (AZEVEDO; CONCI, 2003, p.58 e 59).

O resultado da multiplicação de cada matriz é apresentado na figura 2, sendo que a ilustração 2d mostra o resultado da multiplicação dos pontos dos planos do diedro pela matriz de rotação de 90 em X (para ajuste dos sistemas de coordenadas) e, em seguida, pela matriz de rotação de 45 em Y. Já a ilustração 2e mostra os mesmos pontos multiplicados pelas matrizes de rotação de 90 em X e outra vez pela matriz de rotação em X, mas com 35.26. Para rodar a perspectiva do diedro, o usuário altera o ângulo de rotação em X ou Y das matrizes em mais ou menos 5. Os botões de rotação refazem as multiplicações com os novos valores dos ângulos, dependendo do sentido de rotação escolhido, e apresentam uma nova perspectiva a partir da isométrica original. O botão rd refaz as multiplicações com os ângulos de 45 e 35,26. a) Sistema de coordenadas estabelecido para o diedro b) Sistema de coordenadas no Macromedia Flash c) Resultado da rotação em 90 no eixo X d) Rotação de 45 em Y, após a rotação de 90 em X f) Perspectiva isométrica resultante da rotação de 90 em e) Rotação de 35.26 em X, após a rotação de 90 em X X, da rotação de 45 em Y e da rotação de 35.26 em X. Figura 2: Seqüência de planificação do sistema diédrico em uma perspectiva isométrica. 2.2 Desmontar a Reta O aplicativo desenha cada linha e cada semi-plano como uma parte distinta, chamada pelo Flash de MovieClip. Para organizar o desenho segundo o ponto de vista do observador, cada parte do desenho deve estar em um MovieClip, que pertence a uma camada (depth) única, de tal forma que objetos mais próximos do observador apareçam em camadas mais altas, sobre

os objetos mais distantes. Dois objetos não podem estar na mesma camada, pois apenas um apareceria no desenho. Ao mesmo tempo, dois objetos não podem pertencer ao mesmo MovieClip, ou não poderão ser re-empilhados conforme o usuário rotaciona o objeto. Para organizar a representação do diedro e do segmento de reta, cada semi-plano pertence a uma camada e, portanto, a um MovieClip diferente. Além disso, um segmento de reta que passa pelos semi-planos, e vai de uma parte do diedro até outra, tem que ser quebrado em novos segmentos de reta. O número de partes em que é dividido o segmento de reta original tem que ser igual ao número de áreas do diedro que ela atravessa, como ilustrado na figura 3. Figura 3: Divisão de um segmento de reta AB em três partes, segundo as partes do diedro. O programa considerou a divisão do sistema em quatro diedros diferentes: primeiro diedro (1D), segundo diedro (2D), terceiro diedro (3D) e quarto diedro (4D), como indicado na figura 3. Foi criada uma função que avalia o segmento de reta e reconhece as partes do diedro pelas quais ele passa. São verificadas as coordenadas dos pontos que determinam o segmento, o que identifica em que parte do diedro o ponto está, conforme descrito na tabela 1. Tabela 1: Coordenadas de um ponto e sua localização no diedro. abscissa afastamento cota diedro + ou - + + 1D + ou - - + 2D + ou - - - 3D + ou - + - 4D O próximo passo é determinar em quantas partes o segmento de reta será dividido. O programa adotou o seguinte procedimento: um ponto C é definido na intersecção do segmento de reta com o plano vertical do diedro e um ponto D é definido na intersecção do segmento de reta com o plano horizontal do diedro (figura 3). As coordenadas de abscissa, afastamento e cota dos pontos de intersecção com os planos do diedro são determinadas através da equação da reta a que pertence o segmento descrito pelo usuário. A coordenada de cota do ponto D será sempre igual a zero (0), assim como o afastamento do ponto C. Com as coordenadas dos pontos A e B são determinados os coeficientes angular e linear da reta a partir de uma função de 1 grau (equação 3). Sabendo-se os coeficientes angular e linear são estabelecidas as coordenadas dos pontos C (cota) e D (afastamento).

y=a.x b 3 onde: y = coordenada de cota de um ponto A do segmento de reta; a = coeficiente angular da reta a que pertence o segmento de reta; x = coordenada de afastamento de um ponto A do segmento de reta; b = coeficiente linear da reta a que pertence o segmento de reta. Uma vez que o programa é capaz de identificar em que partes do diedro estão as extremidades do segmento de reta descrito e como calcular as coordenadas dos pontos de intersecção do segmento com os planos do diedro, ele deverá ser instruído em como dividir o segmento em partes para cada porção do diedro. Por exemplo: se uma extremidade do segmento estiver no 1D e a outra no 3D, teremos uma divisão em três partes, a não ser que as coordenadas do ponto C sejam iguais as do ponto D, dividindo o segmento em duas partes. Outra circunstância que também deve ser avaliada é se a extremidade do segmento pertence ao plano vertical ou horizontal. Todas estas condições são verificadas através da análise das coordenadas dos pontos que determinam o segmento e sua intersecção com os planos do diedro, como apresentado na tabela 2. Tabela 2: Análise dos pontos do segmento de reta para dividi-la em partes. Ponto A Ponto B Ponto D Número de partes do segmento por partes do diedro afastam. cota afastam. cota afastam. 1D 2D 3D 4D + + - - - AC CD DB + + - - + AD CB DC + + - - 0 AC CB + - - + - DB CD AC + - - + + DC CB AD + - - + 0 CB AC + + ou 0 - + ou 0 AC CB + - ou 0 - - ou 0 AC CB + ou 0 + + ou 0 - AD DB - ou 0 + - ou 0 - AD DB + ou 0 + ou 0 + ou 0 + ou 0 AB - ou 0 + ou 0 - ou 0 + ou 0 AB - ou 0 - ou 0 - ou 0 - ou 0 AB + ou 0 - ou 0 + ou 0 - ou 0 AB Legenda da tabela 2: o sinal positivo (+) indica que a coordenada é maior que zero (0), o sinal negativo (-) indica que a coordenada é menor que zero (0) e o zero indica que a coordenada é igual a zero (0). A primeira linha da tabela 2 pode ser lida assim: se o afastamento e a cota do ponto A forem positivos e negativos para o ponto B, sabendo que o afastamento do ponto D é negativo (a partir da equação 3), o segmento AB será dividido em AC (1D), CD (2D) e DB (3D).

O processo de análise descrito acima (tabela 2) foi a base da função de divisão do segmento de reta. O resultado é a divisão do segmento de reta em pequenas partes, prontas para serem desenhadas pelo programa. 2.3 A Função de Desenho Como comentado anteriormente, cada parte do desenho é transformado em um objeto chamado MovieClip. Este objeto ocupa uma camada e estabelece o quê desenhar e em que posição da tela do computador. Portanto, precisamos informar o que deve ser desenhado, quais as suas coordenadas e em que camada. A camada de cada segmento de reta e de cada semi-plano do diedro será alterada conforme a posição do observador junto ao modelo completo. Já o elemento desenhado, poderá ser de dois tipos: uma linha ou um plano. Cada elemento de desenho possui ainda as coordenadas dos pontos que o define, da cor, da transparência e da espessura de suas linhas, bem como cor e transparência de superfícies. Enquanto um segmento de reta é uma linha definida por dois pontos, os semi-planos do diedro são superfícies definidas pelas coordenadas de quatro pontos. Para controlar as propriedades de todas estas variáveis, partiu-se de uma função de desenho para Flash MX descrita por CORBIN (c. 2002). A função original foi modificada em vários aspectos, sendo que a principal alteração incluiu a variável de camada para a correta disposição de cada parte do modelo tridimensional do sistema diédrico. Esta função vai definir o objeto tridimensional, para que ele possa ser multiplicado pela matriz de planificação e apresentado na tela. É assim que o programa se fecha: depois de dividir o desenho em partes, cada uma destas partes se transforma em um objeto MovieClip, através da função de desenho. Esta função, chamada de make3dobj, permite que as coordenadas dos elementos de desenho sejam alteradas através da multiplicação pelas matrizes de planificação. Um exemplo do uso da função make3dobj : make3dobj("surface", _root.spvi, [[[0, -100, 0], [0, -100, -100]], [[0, -100, -100], [0, 100, -100]], [[0, 100, -100], [0, 100, 0]], [[0, 100, 0], [0, -100, 0]]], 1, "0xffffff", 100, "0xFFCC66", 80); A função de desenho pode ser dividida nas seguintes partes: a) Identifica se o desenho será uma linha ou uma superfície (no exemplo acima, "surface"); b) Estabelece uma variável para a camada em que o desenho estará (_root.spvi). O valor desta variável será definido segundo a posição do observador diante do modelo tridimensional do objeto; c) Define um arranjo (array) das coordenadas dos pontos do elemento a ser desenhado, seja uma linha ou um plano ([[[0, -100, 0], [0, -100, -100]], [[0, -100, -100], [0, 100, -100]], [[0, 100, -100], [0, 100, 0]], [[0, 100, 0], [0, -100, 0]]]); d) Define uma espessura para a linha ou para o perímetro do plano a ser desenhado (1); e) Define a cor (hexadecimal) da linha ou do perímetro do plano ("0xffffff"); f) Define a transparência da linha ou do perímetro do plano em uma escala de 0 a 100, sendo o valor mais alto completamente opaco (100); g) Se for um plano, define a cor de preenchimento da superfície ("0xFFCC66"); h) Se for um plano, define a transparência da sua superfície (80).

Além de determinar as características do que vai ser desenhado, a função make3dobj enumera cada um dos elementos de desenho. Ao ser executada, a função reconhece todas as linhas e superfícies que deverão ser desenhadas, e denomina cada uma por um número, como, por exemplo, line1, line2, e assim por diante. A função que efetivamente desenha estes elementos na posição correta vai identificar todas as linhas e superfícies pelo número, até que todas sejam dispostas na tela. A sintaxe, em ActionScript, de uma parte desta função é a seguinte: while (i<=lines-1) { obj = Scene["line_"+i]; obj.clear(); obj.linestyle(obj.lineweight, obj.linecolour, obj.linealpha); point1 = MatrixMultiply(obj.pointarray[0], Transform); point2 = MatrixMultiply(obj.pointarray[1], Transform); obj.moveto(point1[0], point1[1]); obj.lineto(point2[0], point2[1]); i++; } Na função descrita acima, a variável i é um contador que será verificado enquanto (while) não concluir o total de linhas a ser desenhado. As partes do código que começam com o identificador de objeto (obj) são responsáveis pelas configurações da linha (espessura, cor e transparência) que será desenhada. A parte seguinte é onde tudo acontece: a linha será desenhada na tela e passará por dois pontos (point1 e point2), estabelecidos na multiplicação dos vetores que armazenam as coordenadas originais dos pontos no espaço (obj.pointarray [0] e obj.pointarray[1]) pela matriz final de transformação (Transform). Esta matriz de transformação é o resultado das multiplicações de matrizes descritas anteriormente (2.1 Matrizes de Planificação). O desenho da linha começa (obj.moveto) no ponto 1, indicado pelas coordenadas x (point1[0]) e y (point1[1]) e termina (obj.lineto) no ponto 2, também descrito pelas coordenadas x (point2[0]) e y (point2[1]). Concluída a operação para cada linha e cada superfície, são apresentadas na tela do computador a perspectiva isométrica e a épura do segmento de reta no diedro. 3 Conclusões O código ActionScript do programa descrito possui 600 linhas, sem contar o desenho de botões e campos de texto para inserção de dados, que são feitos em separado. Apesar deste artigo não entrar em detalhes sobre especificidades da linguagem de programação, ele apresenta uma série de recursos do Macromedia Flash MX 2004: O desenho vetorial através de variáveis; Definição das propriedades de cor, espessura e transparência para linhas e superfícies (pode-se desenhar curvas pelos mesmos procedimentos); Recursos para cálculos matemáticos. As especificidades destes cálculos não foram descritos aqui, mas é importante conhecê-los para saber se a linguagem ActionScript é indicada para determinados problemas de programação e desenho. Propriedades de programação que podem ser familiares para quem conhece alguma outra linguagem.

Outras características do programa final devem ser apontadas. A primeira delas é que, apesar das 600 linhas de código, o aplicativo final (arquivo Shockwave SWF) tem um tamanho de 13,4Kb (ou 13.774 bytes), pronto para ser executado online pelos navegadores com plugin Flash Player. Além disso, deve ser considerado que os cálculos para representar objetos tridimensionais podem exigir muito trabalho do processador, o que reduz o desempenho do aplicativo em equipamentos mais antigos. Para evitar estes problemas, a concepção do programa apresentado aqui procurou reduzir o número de variáveis e objetos desenhados. Aqueles que pretendem experimentar o programa Flash como exposto neste exemplo, devem evitar o desenho contínuo (sem parar) dos objetos, preferindo montar uma vista por vez, e executar a seqüência de cálculos a cada vez que a cena é desenhada. Finalmente, alguns detalhes devem ser revistos, como a disposição das camadas dos objetos para emular as distâncias em relação ao observador. No exemplo descrito, os objetos desenhados são identificados como pertencendo a uma determinada parte do diedro, assim como os semi-planos. Este procedimento é uma simplificação da situação, adequado para a representação de algumas linhas e planos. Ainda apresenta algumas limitações e não é indicado para desenhos com muitos objetos. No desenvolvimento futuro o programa poderá ser modificado e incluir um cálculo mais abrangente, adequado a outras situações. Ainda assim, este é um limite que, tradicionalmente e em outros exemplos de computação gráfica, requer muito do processador do computador (CORBIN, c. 2002). O programa Macromedia Flash apresenta várias possibilidades de desenho vetorial e representação, e não deve ser descartado como opção para a computação gráfica, principalmente em ambiente online. Isso representa recursos potenciais para o ensino à distância, simulações, programas de auxílio à arquitetura e engenharia e outras aplicações que exigem representações gráficas interativas. O aplicativo de Geometria Descritiva pode ser visto no endereço: <http://www.fec.unicamp.br/~damore/diedro/diedro.html>. Referências AZEVEDO, Eduardo; CONCI, Aura. Computação Gráfica: Teoria e prática. Rio de Janeiro: Elsevier, 2003. CORBIN, Chad. Creating real-time 3D objects with Macromedia Flash MX dynamic drawing tools. c. 2002. Disponível em: <http://www.macromedia.com/devnet/mx/flash/articles/flash_3d.html> Acesso em: 12 jun 2005