UNIVERSIDADE REGIONAL DE BLUMENAU CENTRO DE CIÊNCIAS EXATAS E NATURAIS
CURSO DE CIÊNCIA DA COMPUTAÇÃO – BACHARELADO
ADUBOGL – APLICAÇÃO DIDÁTICA USANDO A
BIBLIOTECA OPENGL
LUCIANA PEREIRA DE ARAÚJO
BLUMENAU 2012
LUCIANA PEREIRA DE ARAÚJO
ADUBOGL – APLICAÇÃO DIDÁTICA USANDO A
BIBLIOTECA OPEN GL
Trabalho de Conclusão de Curso submetido à Universidade Regional de Blumenau para a obtenção dos créditos na disciplina Trabalho de Conclusão de Curso II do curso de Ciência da Computação — Bacharelado.
Prof. Dalton Solano dos Reis, Mestre - Orientador
BLUMENAU 2012
ADUBOGL – APLICAÇÃO DIDÁTICA USANDO A
BIBLIOTECA OPEN GL
Por
LUCIANA PEREIRA DE ARAÚJO
Trabalho aprovado para obtenção dos créditos na disciplina de Trabalho de Conclusão de Curso II, pela banca examinadora formada por:
______________________________________________________ Presidente: Prof. Dalton Solano dos Reis, Mestre – Orientador, FURB
______________________________________________________ Membro: Prof. Aurélio Faustino Hoppe, Mestre – FURB
______________________________________________________ Membro: Profª. Joyce Martins, Mestre – FURB
Dedico este trabalho a minha família que me apoiou durante toda a minha graduação, ao meu namorado, amigos, ao meu orientador e aqueles que me ajudaram diretamente na realização deste.
AGRADECIMENTOS
A Deus, por iluminar-me durante toda a caminhada.
A minha família, pelo apoio, compreensão, cobrança e por estar ao meu lado. Ao meu namorado, William, pelos auxílios e por estar sempre presente. Aos meus amigos, por estarem juntos em quase toda a graduação.
Aos colegas de trabalho e ao secretário do departamento, Vilmar, pelo incentivo. Aos meus chefes, Mauro Marcelo Mattos e Antônio Carlos Tavares, por acreditarem no meu potencial.
A todos os professores que estiveram presentes em minha graduação, principalmente aqueles que me apoiaram, abriram chances para meu crescimento profissional e compreenderem quando não pude ser prestativa durante o trabalho permitindo a realização deste e por estarem sempredispostos a me aconselhar.
Ao Laboratório de Desenvolvimento e Transferência de Tecnologia (LDTT) e a FURB por ajudarem a moldar minha carreira profissional.
Ao meu orientador, Dalton Solano dos Reis, pela orientação, dedicação e por acreditar na realização deste.
As oportunidades multiplicam-se à medida que são agarradas.
RESUMO
Este trabalho apresenta a implementação de uma aplicação voltada ao aprendizado da computação gráfica com foco nas transformações geométricas, denominada AduboGL. A biblioteca OpenGL é utilizada como ponto fundamental para montar o cenário 2D da aplicação e o resultado no espaço 3D. Para sua construção foram tomados como base alguns conceitos da informática na educação, tornando o seu uso mais simplificado. Na aplicação é possível realizar exercícios através de peças que se encaixam de acordo com as transformações geométricas, empilhamento de transformações e uma forma geométrica simples, o cubo. Essas peças são apresentadas em uma janela para serem montadas em um plano 2D. Após a montagem é possível salvar o exercício e visualizar seu resultado em um espaço 3D na ordem em que as peças foram colocadas. Ainda na AduboGL é possível visualizar o código em C++ e OpenGL das peças que estão sendo colocadas, podendo assim auxiliar o aluno a compreender a ordem lógica dos comandos utilizados para o desenvolvimento da cena. Por fim, é apresentada a análise de desempenho e usabilidade da aplicação.
ABSTRACT
This work presents a computer graph application oriented learning implementation focused on geometric transformations, called AduboGL. The OpenGL library is used as fundamental point for set up the scene in 2D application and the result in a space 3D. Its construction was based in concepts of computer education, resulting in a more simplified use. In the application it’s possible to realize exercises by means of pieces which fit together according with the geometrical transformations, stacking of transformations and a simple geometric shape, the cube. These pieces are viewed in a window to be organized in a 2D plan. After that, it’s possible to save the exercise and visualize its result in 3D space in the order in which pieces were placed. Yet, in the AduboGL, it’s possible visualize the source code of the pieces being placed in C++ and OpenGL, helping the students to understand the logical order of the commands used for the scene development. Lastly, it’s presented the performance and usability analysis of the application.
LISTA DE ILUSTRAÇÕES
Figura 1 – Estrutura padrão de um SE ... 17
Quadro 1 – Estrutura de nome para função OpenGL ... 20
Quadro 2 – Tipos de dados OpenGL ... 21
Quadro 3 – Representação dos eixos no SRU ... 21
Figura 2 – Regra da mão direita ... 22
Quadro 4 – Primitivas gráficas ... 22
Figura 3 - Transformações sobre objeto 3D ... 23
Quadro 5 – Fórmula para translação... 23
Quadro 6 – Fórmula para rotação ... 24
Quadro 7 – Fórmula para escala ... 24
Quadro 8 – Multiplicação das matrizes de translação com base na origem ... 24
Quadro 9 – Multiplicação das matrizes de escala com base na origem ... 24
Quadro 10 – Multiplicação das matrizes de rotação com base na origem para o eixo x ... 25
Quadro 11 – Especificações das partes de um grafo de cena ... 27
Figura 4 - Telas dos trabalhos correlatos ... 28
Quadro 12 - Tabela comparativa dos trabalhos correlatos ... 30
Figura 5 – Diagrama de casos de uso ... 32
Quadro 13 – Detalhamento do caso de uso UC01 ... 33
Quadro 14 – Detalhamento do caso de uso UC02 ... 34
Quadro 15 – Detalhamento do caso de uso UC03 ... 35
Quadro 16 – Detalhamento do caso de uso UC04 ... 35
Quadro 17 – Detalhamento do caso de uso UC05 ... 36
Quadro 18 – Detalhamento do caso de uso UC06 ... 36
Quadro 19 – Detalhamento do caso de uso UC07 ... 36
Quadro 20 – Detalhamento do caso de uso UC08 ... 37
Figura 6 – Diagrama de classes ... 38
Figura 7 – Classe ObjetoGrafico com suas heranças ... 40
Figura 8 – Classe ObjetoTransformacao com suas heranças ... 40
Figura 9 – Classe GravacaoDeArquivo ... 41
Figura 10 – Classe LeituraDeArquivo ... 41
Figura 12 – Diagrama de estados ... 43
Figura 13 – Peças glPushMatrix(), glPopMatrix() e cubo ... 45
Figura 14 – Peças que representam as transformações... 45
Quadro 21 – Estrutura das peças na AduboGL ... 46
Figura 15 – Análise do clique sobre uma peça ... 46
Quadro 22 - Trecho de código que retorna identificador da peça clicada ... 47
Quadro 23 – Representação do vetor do exercício com relação ao id da peça ... 48
Figura 16 – Deslocamento da peça dentro da bandeja ... 48
Quadro 24 – Trecho de código correspondente ao reposicionamento da peça colocada ... 49
Quadro 25 – Inserção de peça filha a uma peça do exercício ... 49
Figura 17 – Deslocamento de uma peça filha... 50
Figura 18 – Deslocamento das peças para mais de um filho ... 51
Quadro 26 - Trecho da função escreveCodigo() ... 52
Quadro 27 – Função adicionarTexto da classe arquivoTexto ... 53
Quadro 28 – Código para salvar as peças do exercício ... 54
Quadro 29 – Código para salvar as particularidades de cada peça ... 54
Figura 19 – Tela da AduboGL ... 55
Figura 20 – Inserção de um cubo na origem da cena ... 56
Figura 21 – Inserção de peça glPushMatrix() glPopMatrix() com uma translação interna ... 57
Figura 22 - Código-fonte alterado da peça translação ... 57
Figura 23 – Peça com duas sucessoras e visualização de seu código-fonte ... 58
Figura 24 – Visualização da resolução do exercício assim como o código do último cubo .... 59
Figura 25 – Aplicação exemplo executando exercício gerado ... 60
Figura 26 – Inserção de peça translação ... 60
Figura 27 – Reposição da peça translação ... 61
Figura 28 – Cena 3D resultante do exercício ... 61
Quadro 30 – Tempo para adicionar uma peça filho a uma peça pai ... 62
Figura 29 - Gráfico de média de tempos ... 63
Quadro 31 - Formulário de perguntas aos usuários da aplicação ... 64
Quadro 32 – Comparação entre trabalhos correlatos... 67
Quadro 33 - Exercício a ser realizado na AduboGL ... 74
Figura 31 - Croqui das peças internas ... 75 Figura 32 - Desenho das peças iniciais da AduboGL ... 76 Figura 33 - Peças encaixadas e modeladas no Corel Draw ... 76
LISTA DE SIGLAS
2D – 2 Dimensões 3D – 3 Dimensões
AduboGL – Aplicação didática usando a biblioteca openGL API – Application Programing Interface
CAD – Computer Aidded Design DAG – Directed Acyclic Graph
FURB – Universidade Regional de Blumenau GLU – openGL Utility library
GLUT – openGL Utility Toolkit
IDE – Integrated Development Environment JAR – Java ARchive
OpenGL – Open Graphics Library RF – Requisito Funcional
RGBA – Red Green Blue Alpha RNF – Requisito Não Funcional SA – Software Aplicativo SE – Software Educativo
SRT – Sistema de Referência da Tela SRU – Sistema de Referência do Universo UC – Use Case
UML – Unified Modeling Language
V-ART – Virtual Articulations for viRtual realiTy XML – eXtensible Markup Language
SUMÁRIO
1 INTRODUÇÃO ... 14 1.1 OBJETIVOS DO TRABALHO ... 14 1.2 ESTRUTURA DO TRABALHO ... 15 2 FUNDAMENTAÇÃO TEÓRICA ... 16 2.1 INFORMÁTICA NA EDUCAÇÃO ... 16 2.1.1 SOFTWARE EDUCATIVO ... 17 2.1.2 SOFTWARE APLICATIVO ... 182.1.3 SOFTWARES COM FOCO NA EDUCAÇÃO LÚDICA ... 18
2.2 OPENGL 4.2 ... 19
2.2.1 PADRONIZAÇÃO DE NOMES E TIPOS DE DADOS ... 20
2.2.2 ESPAÇO GRÁFICO ... 21
2.2.3 PRIMITIVAS GRÁFICAS, TEXTO, CÂMERA SINTÉTICA, ILUMINAÇÃO E PROJEÇÃO ... 22
2.2.4 TRANSFORMAÇÕES GEOMÉTRICAS ... 23
2.2.5 VISUALIZAÇÃO DE OBJETOS GRÁFICOS ... 25
2.3 GRAFO DE CENA ... 26
2.4 V-ART ... 27
2.5 TRABALHOS CORRELATOS ... 28
3 DESENVOLVIMENTO ... 31
3.1 REQUISITOS PRINCIPAIS DO PROBLEMA A SER TRABALHADO ... 31
3.2 ESPECIFICAÇÃO ... 32
3.2.1 Diagrama de casos de uso ... 32
3.2.2 Diagrama de classes ... 37
3.2.3 Diagrama de estado ... 43
3.3 IMPLEMENTAÇÃO ... 44
3.3.1.1Controle das peças da AduboGL ... 44
3.3.1.2Visualização do código-fonte das peças ... 51
3.3.1.3Visualização do cenário 3D a partir das peças colocadas ... 53
3.3.2 Operacionalidade da implementação ... 55
3.3.2.1Desenvolvendo um exercício na AduboGL ... 56
3.4.1 Resultados obtidos na análise de performance... 62
3.4.2 Resultados obtidos na análise de usabilidade... 63
3.4.3 Considerações gerais ... 65
3.4.4 Relação dos trabalhos correlatos com o presente trabalho... 67
4 CONCLUSÕES ... 69
4.1 EXTENSÕES ... 70
REFERÊNCIAS BIBLIOGRÁFICAS ... 71
APÊNDICE A – Exercício de OpenGL ... 74
14
1 INTRODUÇÃO
Com a crescente evolução no mundo tecnológico as tecnologias passaram a ser utilizadas em diferentes áreas e vários sistemas passaram a ser informatizados, até mesmo a área da educação. Começou-se a criar vários aplicativos com intuito de ensinar aos alunos diferentes áreas do conhecimento.
O problema de empregar um software para a educação em qualquer que seja a área é a forma com que esse é aplicado em uma sala de aula. O programa educacional deve ser praticado com seriedade pelos professores para que realmente tenha um efeito sobre a educação dos alunos. Normalmente, um software educacional que seja de interesse também dos alunos deve trabalhar em forma de jogo ou ter alguma similaridade com um (ALMEIDA, 1994, p. 25-42; OLIVEIRA; COSTA; MOREIRA, 2001, p. 64).
Na disciplina de Computação Gráfica do curso de Ciência da Computação da Universidade Regional de Blumenau (FURB) é utilizada a biblioteca Open Graphics Library (OpenGL) para ensinar os diferentes conceitos da computação gráfica. Porém, os alunos aprendem na teoria e depois devem tentar implementar os conceitos aprendidos em alguma linguagem de programação, normalmente a linguagem C++ (REIS, 2011).
Levando em consideração os softwares educacionais existentes e não havendo um que possa ser utilizado diretamente na disciplina de Computação Gráfica do curso de Ciência da Computação da FURB, propõe-se desenvolver uma aplicação para o estudo da computação gráfica que utilize a biblioteca OpenGL. Esta aplicação deve possuir algumas funções prontas da OpenGL para que sejam utilizadas na geração do código-fonte da atividade realizada, bem como para que o aluno possa utilizá-las em seu programa. Ela é desenvolvida de forma que permita ser estendida posteriormente com novas funções gráficas.
1.1 OBJETIVOS DO TRABALHO
O objetivo deste trabalho é desenvolver uma aplicação para o estudo da disciplina de Computação Gráfica do curso de Ciência da Computação da FURB na linguagem C++ que utilize os conceitos básicos da OpenGL.
15
a) desenvolver e disponibilizar a aplicação com conceitos definidos durante o levantamento bibliográfico;
b) permitir que o aluno da disciplina realize exercícios com a aplicação;
c) disponibilizar um ambiente para que o aluno visualize a cena 3D resultante do exercício realizado.
1.2 ESTRUTURA DO TRABALHO
Este trabalho está dividido em quatro capítulos, sendo que o segundo apresenta a fundamentação teórica necessária para o entendimento deste.
O terceiro capítulo apresenta o desenvolvimento da aplicação, iniciando pelos principais requisitos e a especificação. A especificação é composta pelos diagramas de casos de uso, de classes e de estado. Também é mostrado como o trabalho foi implementado a partir das técnicas e ferramentas utilizadas e dos principais trechos de código. O capítulo é finalizado com os resultados e discussões que aconteceram durante todo o processo de desenvolvimento do trabalho.
Por fim, o quarto capítulo refere-se às conclusões deste trabalho, bem como sugestões para extensões futuras.
16
2 FUNDAMENTAÇÃO TEÓRICA
Na seção 2.1 é apresentado como é vista a informática na educação, quais são as melhores formas de aplicá-la e que tipos de softwares educacionais existem. Na seção 2.2 é descrito a OpenGL e suas características. Na seção 2.3 é descrito um grafo de cena e suas partes. Na seção 2.4 é apresentado o framework V-ART e algumas de suas funcionalidades. Por fim, na seção 2.5 são relacionados três trabalhos correlatos ao trabalho proposto.
2.1 INFORMÁTICA NA EDUCAÇÃO
Com o passar do tempo os jovens adquiriram uma grande familiaridade com os ambientes tecnológicos, tendo uma boa vivência fora do contexto escolar. Esta realidade vem mostrando a importância da inclusão de tecnologias e softwares educativos no projeto pedagógico para que os alunos adquiram com mais facilidade o conhecimento e que não façam mau uso da tecnologia (OLIVEIRA; COSTA; MOREIRA, 2001, p. 61-64).
Neste novo contexto, o educador tem que se sentir preparado para utilizar as ferramentas educativas e só estará preparado se tiver um conhecimento profundo sobre o tema abordado (ALMEIDA, 1994, p. 42).
De acordo com Almeida (1994, p. 42), “não basta criticar a pedagogia dos brinquedos e dos jogos eletrônicos se não houver um conhecimento profundo desses objetos e das condições para utilizá-los corretamente”. Para isso, definem-se alguns passos importantes antes e durante a utilização de ambientes educacionais ou lúdicos, os quais são (ALMEIDA, 1994, p. 42-52):
a) o professor deve se preparar para utilizar o software educacional e receber uma formação de como utilizá-lo;
b) o professor deve se organizar e planejar sua aula conforme a faixa etária dos alunos e os objetivos gerais e específicos da matéria;
c) os alunos envolvidos devem receber uma formação e preparação quanto ao uso da tecnologia;
d) o professor deve executar as atividades lúdicas com os alunos envolvidos; e) o professor deve avaliar os resultados dos jogos pedagógicos.
17
Uma das ferramentas educacionais onde é possível conciliar a aprendizagem ao lúdico é o software educacional. Um software educacional é todo programa voltado à educação que envolve ensino e aprendizagem, onde o educador é importante para ensinar um determinado conteúdo e o aluno praticará o que foi ensinado para aprender (OLIVEIRA; COSTA; MOREIRA, 2001, p. 73).
Dentro deste contexto existem dois tipos de softwares: educativo e aplicativo. Os softwares ainda podem abordar a educação lúdica. Os itens 2.1.1, 2.1.2 e 2.1.3 abordam estes tipos de softwares.
2.1.1 SOFTWARE EDUCATIVO
Um Software Educativo (SE) é aquele que tem por objetivo favorecer o processo de ensino-aprendizagem. Para que um software seja um SE ele deve ser desenvolvido com intuído de favorecer o aluno a adquirir conhecimento relativo a um conteúdo didático, ou seja, o SE deve possuir um caráter didático. Além disso, o SE deve facilitar a interação entre o aluno/usuário e o programa, sempre mediada pelo professor e também deve ter uma boa usabilidade (OLIVEIRA; COSTA; MOREIRA, 2001, p. 73).
O SE baseia-se na junção dos seguintes fatores: conteúdo; interação aluno-SE-professor; programação e fundamentação pedagógica conforme pode ser observado na Figura 1.
Fonte: Oliveira, Costa e Moreira (2001, p. 75).
Figura 1 – Estrutura padrão de um SE
O software não precisa abranger todas as áreas e nem apenas uma. Existem vários tipos de SE com foco em determinada área. Os diferentes tipos de SEs são (OLIVEIRA; COSTA; MOREIRA, 2001, p. 75-82):
18
b) SE que por possuir uma capacidade grande de novas informações, pretende realizar uma interação progressiva com o usuário. Um exemplo deste tipo de software são os sistemas inteligentes;
c) SE que por possuir bastante interação com o usuário permite um melhor aproveitamento pedagógico, como os tutoriais, aplicativos de simulação e jogos educacionais.
Os SEs envolvem uma grande equipe para seu desenvolvimento. Por envolverem um grande campo de conhecimento, necessitam de professores especialistas na área abordada; técnicos e conhecedores da linguagem na qual o software é desenvolvido; pessoas especializadas em informática na educação; designer para tela e componentes; além de docentes e alunos para experimentar e validar o material produzido.
2.1.2 SOFTWARE APLICATIVO
Os Softwares Aplicativos (SA) são utilizados em grande escala nas escolas, tanto no ensino quanto na parte administrativa (OLIVEIRA; COSTA; MOREIRA, 2001, p. 81). Existem dois tipos de SA:
a) software de apoio a produção de SE, como os sistemas de autoria, sistemas de hipertexto e ambientes para criação de tutoriais;
b) software de apoio ao trabalho administrativo, como banco de dados, ambientes de programação, processadores de texto, planilhas eletrônicas, editores gráficos e programas de comunicação.
2.1.3 SOFTWARES COM FOCO NA EDUCAÇÃO LÚDICA
A educação lúdica favorece a construção do conhecimento de forma sadia e com um espírito de uma prática democrática. Sua prática promove a interação social e tem em vista o compromisso de transformar e modificar o meio (ALMEIDA, 1994, p. 41).
A educação lúdica tem por objetivo promover o aprofundamento do conhecimento científico e profissional de forma que o aluno tenha satisfação e prazer em adquirir determinado conhecimento. Além disso, ela permite a integração do conhecimento com a vida
19
social e com as situações do mundo, promovendo uma relação afetiva de vida (ALMEIDA, 1994, p. 15-24).
Podem ser considerados softwares lúdicos os jogos que juntam o mundo real com alguma diversão para o usuário. Existem jogos que buscam promover a educação, como o jogo Sim City que ensina o jogador a construir e gerenciar cidades. Assim como jogos mais simples que são utilizados por um professor de matemática para ensinar a tabuada a partir de imagens, por exemplo.
2.2 OPENGL 4.2
A OpenGL é uma sofisticada Application Programing Interface (API) para desenvolver programas gráficos bidimensionais e tridimensionais para diferentes plataformas (COHEN; MANSSOUR, 2006, p. 22; MACHADO; MORAES, 2005, p. 92). A OpenGL também pode ser considerada um software para construção de interfaces gráficas com capacidade de modelar gráficos 3D, com uma biblioteca rápida e portátil (WRIGHT JÚNIOR et al., 2011, p. 33-34).
A OpenGL não é considerada uma linguagem de programação como o C ou o C++, mas possui algumas funcionalidades pré-configuradas que devem ser utilizadas junto a uma linguagem. Ela possui um conjunto importante de funções para trabalhar com objetos geométricos, porém é muito primitivo e não possui recursos para trabalhar com telas, além de possuir um baixo nível de abstração (WRIGHT JÚNIOR et al., 2011, p. 34). A API pode ser utilizada para diversas funções, desde Computer Aidded Design (CAD) de engenharia e aplicações arquitetônicas até para a criação de jogos e filmes (BORGES et al., 2004).
Para facilitar o desenvolvimento de aplicações gráficas foram criadas as bibliotecas openGL Utility library (GLU) e openGL Utility Toolkit (GLUT) baseadas na OpenGL, mas com uma abstração maior (MACHADO; MORAES, 2005, p. 94).
A GLU contém uma série de funções que encapsulam comandos OpenGL de mais baixo nível. Entre elas está a definição de matrizes para projeção e orientação da visualização, que permitem mapear as coordenadas entre o espaço da tela e do objeto (KHRONOS GROUP, 2011).
A GLUT foi criada por Mark Kilgard para facilitar o desenvolvimento das interfaces sem se preocupar com a plataforma, sendo assim uma biblioteca portável. Ela possui diversas
20
funções tanto de janelas quanto de controle de eventos. Com ela é possível criar janelas, menus, pop-ups, desenhar textos e objetos da OpenGL como paralelepípedos, esferas e cilindros. Além disso, é possível gerenciar os eventos de mouse, teclado e joystick. Esta biblioteca é adequada para a aprendizagem da OpenGL e tem o objetivo de ocultar a complexidade de sistemas de janelas existentes hoje. É utilizada principalmente para pequenas aplicações (COHEN; MANSSOUR, 2006, p. 53; WRIGHT JÚNIOR et al., 2011, p. 43).
Nas próximas seções são abordados os temas: padronização de nomes e tipos de dados; espaço gráfico; primitivas gráficas, texto, câmera sintética, iluminação e projeção; transformações geométricas e visualização de objetos gráficos.
2.2.1 PADRONIZAÇÃO DE NOMES E TIPOS DE DADOS
O nome das funções em OpenGL possui uma padronização. O nome da função é normalmente dividido em quatro partes: a primeira corresponde a um prefixo que representa a biblioteca, podendo ser gl, glu ou glut; a segunda parte é a raiz que representa o comando
OpenGL correspondente à função; a terceira parte é um número e indica a quantidade de argumentos; por fim, a quarta parte representa o tipo dos argumentos (COHEN; MANSSOUR, 2006, p. 49). No Quadro 1 pode-se verificar a formatação de uma função OpenGL.
<PrefixoBiblioteca> <ComandoRaiz> <ContadorArgumentoOpcional> <TipoArgumentoOpcional> EXEMPLO:
void glColor3f (GLfloat red, GLfloat green, GLfloat blue) gl Prefixo: biblioteca gl.
Color Comando raiz que indica o objetivo da função. 3 Indica que a função possui três argumentos.
F Indica que os argumentos são valores de ponto flutuante.
Quadro 1 – Estrutura de nome para função OpenGL
Algumas funções não tem parâmetros ou possuem sempre a mesma quantidade. Nestes casos a nomenclatura da função não tem a parte do contador ou do tipo de argumento. Como exemplo, cita-se o caso da função glTranslatef(), que sempre possui três parâmetros.
Assim como o nome das funções, também foram especificados tipos de dados próprios da OpenGL. A maioria dos tipos primitivos começa com o prefixo GL seguido do tipo
primitivo determinado (POZZER, 2011, p. 8). Os tipos de dados são apresentados no Quadro 2.
21
Tipo de dado OpenGL Representação interna Tipo de dado C Sufixo
GLbyte inteiro de 8 bits signed char b
GLshort inteiro de 16 bits short s
GLint, GLsizei inteiro de 32 bits int ou long i
GLfloat, GLclampf ponto flutuante de 32 bits float f
GLdouble, GLclampd ponto flutuante de 64 bits double d
GLubyte, GLboolean inteiro de 8 bits sem sinal unsigned char ub
GLushort inteiro 16 bits sem sinal unsigned short us
GLuint, GLenum, GLbitfield
inteiro de 32 bits sem sinal unsigned long/ unsigned int
ui
Fonte: Cohen e Manssour (2006, p. 52).
Quadro 2 – Tipos de dados OpenGL
2.2.2 ESPAÇO GRÁFICO
O universo de um espaço gráfico é a região do plano utilizada em uma aplicação. Pode-se visualizar o espaço gráfico principalmente em duas formas diferentes: 2D e 3D (MACHADO; MORAES, 2005, p. 94).
Como os espaços gráficos utilizam coordenadas geométricas, deve-se definir um sistema de referência que define uma origem em relação aos demais pontos descritos no universo (COHEN; MANSSOUR, 2006, p. 72-77).
Para um plano 2D, o Sistema de Referência do Universo (SRU) é composto por dois eixos (x e y) perpendiculares entre si. Já para o espaço 3D este sistema é composto por três eixos (x, y e z) ortogonais entre si (WRIGHT JÚNIOR et al., 2011, p. 133). A representação de cada um deles pode ser vista no Quadro 3.
Quadro 3 – Representação dos eixos no SRU
Desta forma, uma coordenada em um plano 2D é representada por dois pontos e em um plano 3D por três pontos e todos os modelos em OpenGL são definidos pelo SRU. O SRU não representa exatamente os pontos do monitor do computador. O monitor utiliza o Sistema de Referência da Tela (SRT) onde a origem localiza-se no canto superior esquerdo do monitor. Para que os objetos sejam representados graficamente nos locais corretos deve ser realizada uma conversão ou um mapeamento (COHEN; MANSSOUR, 2006, p. 72).
22
Para localizar o eixo z em relação ao eixo x e y em um plano 3D pode-se utilizar a regra da mão direita ou a regra da mão esquerda. A OpenGL trabalha com a primeira regra. Para isso deve-se posicionar a mão direita de forma que o indicador fique apontado para o eixo y (positivo), o polegar para o eixo x (positivo) e o dedo médio apontado para a direção positiva do eixo z. Na Figura 2 pode-se observar a utilização desta regra (MANSSOUR; COHEN, 2006, p.9).
Fonte: Manssour e Cohen (2006, p. 9).
Figura 2 – Regra da mão direita
2.2.3 PRIMITIVAS GRÁFICAS, TEXTO, CÂMERA SINTÉTICA, ILUMINAÇÃO E PROJEÇÃO
Com a OpenGL é possível desenhar elementos básicos como pontos, segmentos de reta, polígonos e círculos. Para realizar estes elementos em um plano 2D foram definidas algumas primitivas gráficas. Estas primitivas são definidas por um ou mais pares de vértices. O Quadro 4 representa as diferentes primitivas gráficas disponíveis na biblioteca (POZZER, 2011, p. 8; MACHADO; MORAES, 2005, p. 96).
Primitiva Gráfica Função
GL_POINTS Desenhar ponto
GL_LINES Desenhar segmento de linha
GL_LINE_STRIP Desenhar segmentos de linhas conectados
GL_LINE_LOOP Desenhar segmentos de linhas conectados, unindo o primeiro com o último
GL_POLYGON Desenhar polígono convexo
GL_TRIANGLES Desenhar triângulo
GL_TRIANGLE_STRIP Desenhar triângulos conectados
GL_TRIANGLE_FAN Desenhar triângulos a partir de um ponto central
GL_QUADS Desenhar quadriláteros
GL_QUAD_STRIP Desenhar quadriláteros conectados
Quadro 4 – Primitivas gráficas
Para escrever um texto na área gráfica deve-se utilizar a biblioteca GLUT. Ela possui dois tipos de fontes que podem ser utilizadas: stroke que é formada por segmentos de retas e
23
bitmap que são imagens que representam caracteres. O primeiro tipo possui uma resolução maior e pode ser escalado e rotacionado, porém não é tão rápido quanto o segundo tipo de fonte (COHEN; MANSSOUR, 2006, p. 105).
2.2.4 TRANSFORMAÇÕES GEOMÉTRICAS
As transformações geométricas nada mais são que cálculos matemáticos que transformam as características dos elementos gráficos. Estas transformações alteram apenas o aspecto do desenho e não sua estrutura (COHEN; MANSSOUR, 2006, p. 113) e são calculadas sempre a partir da origem do objeto gráfico (REIS, 2012). É comum que essas alterações sejam feitas de forma interativa. Existem basicamente três tipos de transformações: translação, rotação e escala (MACHADO; MORAES, 2005, p. 97), como pode ser observado na Figura 3.
Fonte: Reis (2012).
Figura 3 - Transformações sobre objeto 3D
A translação é utilizada para colocar ou alterar de lugar o objeto em cena. A operação matemática aplicada à translação é a adição de constantes de deslocamento nas coordenadas do elemento (WRIGHT JÚNIOR et al., 2011, p. 25-26). Sua fórmula é apresentada no Quadro 5.
x' = x + Tx y' = y + Ty
z' = z + Tz, onde T é a constante de deslocamento.
Quadro 5 – Fórmula para translação
A rotação é utilizada para girar um objeto a partir de um ângulo. Quando se deseja rotacionar um elemento em torno de um determinado eixo, deve-se aplicar um cálculo matemático de seno e cosseno sobre os demais eixos do objeto (WRIGHT JÚNIOR et al., 2011, p. 27-28; COHEN; MANSSOUR, 2006, p. 120-122). Por exemplo, para rotacionar um objeto em torno do eixo z utiliza-se a fórmula descrita no Quadro 6.
24
x' = x * cos(a) + y * sin(a) y' = -x * sin(a) + y * cos(a)
Quadro 6 – Fórmula para rotação
A escala é utilizada para definir o tamanho do objeto no plano gráfico. Com ela, também é possível ampliar ou diminuir o elemento. Para realizar a escala sobre um objeto deve-se multiplicar um valor de escala por todas as coordenadas das primitivas gráficas que compõem o objeto a ser escalado (POZZER, 2011, p. 15), conforme é apresentado no Quadro 7.
x' = x * Ex y' = y * Ey
z' = z * Ez, onde E é o fator de escala a ser aplicado.
Quadro 7 – Fórmula para escala
Para que um objeto inteiro sofra a transformação aplicada é necessário realizar a mesma sobre cada uma das coordenadas do objeto. Por isso, são utilizadas matrizes de transformação com coordenadas homogêneas. Conforme Cohen e Manssour (2006, p. 124), “para combinar as transformações geométricas multiplica-se todas as matrizes de transformação que serão aplicadas, e cada vértice é multiplicado somente pela matriz resultante, chamada de matriz de transformação corrente”. Nos Quadro 8, Quadro 9 e Quadro 10 observam-se as três transformações com base nas matrizes de transformação. É importante que a matriz corrente da transformação seja iniciada com uma matriz identidade, para isso utiliza-se o comando da OpenGL glLoadIdentity()(REIS, 2012; COHEN; MANSSOUR,
2006, p. 124).
Translação homogênea 3D – em relação a origem
Fonte: Reis (2012).
Quadro 8 – Multiplicação das matrizes de translação com base na origem Escala homogênea 3D – em relação a origem
Fonte: Reis (2012).
25
Rotação homogênea 3D – em relação a origem, eixo x
Fonte: Reis (2012).
Quadro 10 – Multiplicação das matrizes de rotação com base na origem para o eixo x
Para que um mesmo objeto sofra vários tipos de transformação ao mesmo tempo, essas transformações devem ser concatenadas, ou seja, deve haver a multiplicação várias vezes sobre a mesma matriz conforme as transformações a serem realizadas. Porém, se a cena tiver mais de um objeto e for aplicada a transformação na cena, todos os objetos sofrerão a transformação. A OpenGL soluciona esse problema a partir da implementação de uma pilha de matrizes de transformação. Nesse caso, para definir o escopo das transformações utilizam-se os comandos glPushMatrix() que empilha a matriz de transformação corrente e
glPopMatrix() que desempilha a matriz de transformação corrente. Dessa forma, as
transformações são concatenas e aplicadas ao objeto que é apresentado na cena (REIS, 2012; COHEN; MANSSOUR, 2006, p. 129).
Além das transformações sobre o objeto, é possível realizar transformações sobre o plano gráfico ou janela da aplicação, como o zoom e o pan. O zoom é utilizado para visualizar um ou mais objetos aproximados (zoom in) ou distantes (zoom out) da tela. O pan é utilizado para deslocar a tela de visualização de forma que o usuário possa ver diferentes partes do universo (CARNEIRO et al., 1997).
2.2.5 VISUALIZAÇÃO DE OBJETOS GRÁFICOS
Para visualizar um objeto no sistema de referência existem basicamente duas formas diferentes. A primeira forma é a partir da matriz de projeção (projection) que é utilizada para determinar transformações de recorte e projeção. A segunda pela matriz modelview que é utilizada para indicar transformações aplicadas à câmera ou aos modelos da cena (POZZER, 2011, p. 11-19).
Antes de entender cada um dos tipos de visualização é importante saber que em sua maioria dependem de uma câmera sintética que auxilia na visualização do objeto. A câmera
26
sintética é semelhante a uma câmera comum. Ela possui uma localização, que por padrão fica na origem, uma direção para onde está apontando e um vetor up que é o vetor de direção em relação ao topo da câmera.
Quando um objeto é visualizado a partir da matriz de projeção, ele pode ser visualizado de duas formas: em perspectiva ou ortogonal (WRIGHT JÚNIOR et al., 2011, p. 136-137). Para visualizá-lo em perspectiva deve-se utilizar o comando da OpenGL
glFrustrum() ou gluPerspective(). Com este tipo de visão a câmera deve estar apontada para um ponto fixo; isso é feito a partir do comando OpenGL gluLookAt(). Neste comando
deve-se definir a posição da câmera, para onde ela está olhando e por fim o vetor de direção em relação ao topo dela (NEIDER, 1994; MACHADO; MORAES, 2005, p. 95-103).
Utilizando a matriz modelview para visualizar um objeto, tem-se as transformações geométricas aplicadas a ele, assim como as coordenadas da câmera sintética. Quando um objeto sofre uma transformação, o ponto de visualização é alterado. Quem controla o ponto de visão em relação ao objeto (viewpoint) é a câmera sintética. Estas informações é que compõem a matriz modelview (POZZER, 2011, p. 13-16; NEIDER, 1994). Essa tem uma dimensão de quatro linhas por quatro colunas e representa as transformações no sistema de coordenadas sobre cada um dos objetos (WRIGHT JÚNIOR et al., 2011, p. 138). Multiplicando as coordenadas dos objetos a serem transformados pela modelview, tem-se as novas coordenadas de transformação.
2.3 GRAFO DE CENA
Um grafo de cena, também conhecido por scene graphs, é uma estrutura de dados de alto nível, organizada normalmente através de classes. Ele implementa uma estrutura hierárquica de objetos e atributos, que possuem informações sobre sua aparência e demais fatores, podendo-se especificar cenas complexas com maior facilidade (VALENTE, 2004; POZZER, 2007; NAKAMURA; TORI, 2004, p. 108).
A estrutura de um grafo de cena é matemática e armazena uma coleção de objetos de forma organizada. Ele é formado por nós, que são conectados por arcos. Um arco pode conectar até dois nós. Os nós e suas ligações podem receber nomes de acordo com o posicionamento dentro do grafo (VALENTE, 2004; NAKAMURA; TORI, 2004, p. 108). No Quadro 11 podem-se visualizar suas especificidades.
27
Tipo Descrição
Arco Conexão entre dois nós.
Arco Dirigido Arco que possui uma única direção, sendo uma relação
unidirecional, como pai para filho.
Nó Estrutura que representa um ou uma coleção de dados.
Nó pai Nó que é ponto de origem de um arco dirigido, ou seja, que
inicia uma relação.
Nó filho Nó que é o ponto de destino de um arco dirigido, ou seja, é
o término da relação.
Nó descendente Se um nó B é filho de A, então B é dito descendente de A.
Todos os filhos de B, também são descendentes de A.
Nó ancestral Se um nó A é pai B, então A é dito ancestral de B. Todos os
ancestrais de A são ancestrais de B. Nó raiz
/universo
Nó que não possui pai. É o primeiro nó do grafo.
Nó folha Nó que não possui filho.
Nó interior Nó que não é raiz nem folha.
Caminho Sequência de nós conectados por arco. Inicia em um nó e
finaliza em outro.
Travessia Operação em que um caminho é percorrido.
Branch Nó que possui vários filhos. Pode ser usado para agrupar
outros nós. Subgrafo ou
branch graph
Representa o conjunto de um nó qualquer e todos os seus filhos e descendentes. Esse nó qualquer é um nó branch. Directed Acyclic
Graph (DAG)
Grafo que possui arcos dirigidos, sendo que nenhum caminho forma um ciclo. Assim, nenhum nó pode ser ao mesmo tempo filho e pai de um ancestral.
Árvore Caso especial de um DAG, onde todos os nós filhos possuem um
único nó pai.
Fonte: Valente (2004) e Nakamura e Tori (2004, p.108).
Quadro 11 – Especificações das partes de um grafo de cena
Com a estrutura do grafo de cena é possível aplicar uma transformação em um nó pai e esta é propagada para todos os seus nós filhos. Dessa forma, as transformações geométricas de uma folha do grafo são determinadas pela acumulação recursiva dos estados dos seus pais, até o nó raiz (NAKAMURA; TORI, 2004, p.108).
2.4 V-ART
Virtual Articulations for viRtual realiTy (V-ART) é um framework multiplataforma e independente de API gráfica desenvolvido em C++ para facilitar a criação de ambientes em 3D, especialmente aqueles que possuem humanoides. O framework é inteiramente orientado a objetos, possui um sistema de suporte a animações e permite a representação de articulações biologicamente corretas (FÉLIX, 2009; SCHNEIDER, 2009).
O V-ART é um software livre sob licença GPLv2 e possui documentação em DoxyGen para aqueles que desejam utilizar o framework. Também possui um manual com dicas para criação de projetos com o Microsoft Visual Studio. O site do V-ART ainda
28
disponibiliza exemplos, códigos-fontes, projetos no Microsoft Visual Studio e modelos 3D que utilizam o próprio framework (SCHNEIDER, 2009).
2.5 TRABALHOS CORRELATOS
Existem várias ferramentas disponíveis no mercado que utilizam as técnicas educacionais aplicadas a algum conceito da computação, como o Greenfoot (HENRIKSEN; KÖLLING, 2004) e o Furbot (VAHLDICK; MATTOS, 2008). Estas ferramentas tem por objetivo ensinar a linguagem Java a crianças e alunos da computação. Além delas, existe o Edugraph que tem a intenção de ensinar a computação gráfica (BATTAIOLA et al., 2002, p. 283). As três ferramentas apresentadas ensinam de forma lúdica a partir de jogos e algumas de suas telas podem ser vistas na Figura 4.
Figura 4 - Telas dos trabalhos correlatos
O Greenfoot é um framework e foi desenvolvido nas Universidades de Kent, Inglaterra e Deakin, Austrália, com intuito de ensinar a programação orientada a objetos a iniciantes,
29
principalmente crianças. O framework é uma mistura de micro mundos com o BlueJ: é como se o micro mundo fosse o framework Java e o BlueJ o ambiente de desenvolvimento. O Greenfoot possui duas classes principais: Actor e Word que devem ser implementadas pelos programadores. Cada classe Actor gera um objeto que pode ser adicionado na classe World (mundo). O mundo é um espaço bidimensional dividido em linhas e colunas gerando assim células. São nestas células que os objetos do tipo Actor são adicionados. Seu diferencial é que é possível criar com facilidade diferentes cenários para que seja trabalhado. O framework utiliza a linguagem Java como linguagem base (HENRIKSEN; KÖLLING, 2004).
Desenvolvido na FURB, o Furbot também é um framework com o objetivo de ensinar aos alunos os conceitos introdutórios da programação, misturando o Java com a linguagem Portugol (SILVA, 2000, p. 13). Ele também possui um espaço bidimensional com grades (linhas e colunas) que é configurado a partir de um arquivo eXtensible Markup Language (XML) e cada célula pode conter um objeto predefinido. O objeto principal do mundo é um robô e junto a ele podem ser adicionados outros elementos. Cada um destes objetos é uma classe que herda outra classe para que o aluno possa programar a inteligência de cada um deles. O Furbot é um arquivo Java ARchive (JAR) que é facilmente importado como um projeto em uma Integrated Development Environment (IDE), como o Eclipse, por exemplo (VAHLDICK; MATTOS, 2008).
O Edugraph é uma ferramenta de apoio ao ensino da Computação Gráfica a distância. A ferramenta utiliza os princípios dos jogos de computadores para ensinar principalmente engenheiros e designers que não possuem o conhecimento em computação (CERQUEIRA; SILVA, 2009, p. 1735). A ferramenta foi desenvolvida na linguagem C++ utilizando a OpenGL e componentes do pacote DirectX da Microsoft. Ela é dividida em níveis onde no primeiro o aluno aprende a teoria que pode ser a partir de diferentes tipos de mídias, como webcam, hipertexto e sons. Após aprender a teoria, no segundo nível o aluno exercita em um plano 2D a partir de perguntas e respostas. Ao término desta fase ele passa para a terceira em um plano 3D onde estuda este espaço selecionando objetos e aplicando operações a ele (BATTAIOLLA et al., 2002, p. 287-289).
No Quadro 12 é possível visualizar uma comparação entre os três trabalhos correlatos expostos. Foram levantadas oito características e então foram comparadas.
30
Característica Furbot Greenfoot Edugraph
Interação com o aluno a partir de objetos gráficos
Sim Sim Sim
Capacidade de resolver exercícios Sim Sim Sim
Resolução de exercícios via código-fonte Sim Sim Não Alteração de parâmetros do código em
tempo de execução
Não Não Sim
Explícito uso da OpenGL Não Não Sim
Permite alteração da posição da câmera Não Não Sim
Tipo de cenário 2D 2D 2D/3D
Tipo de integração Framework Framework Ferramenta
Quadro 12 - Tabela comparativa dos trabalhos correlatos
É possível visualizar que todos permitem a interação do aluno com objetos gráficos a partir da resolução de exercícios. O que os diferencia, principalmente o Edugraph dos outros dois trabalhos, é que o Edugraph permite alterar os parâmetros em tempo de execução, porém não permite a resolução de exercícios via código-fonte. Já o Furbot e o Greenfoot permitem a realização de exercício via código-fonte, e não permitem a alteração de parâmetros em tempo real. O Edugraph trabalha nos dois tipos de cenário, 2D e 3D, e os outros dois são limitados em um espaço 2D. Somente o Edugraph utiliza a OpenGL de forma explícita, assim como, somente ele permite alterar o posicionamento da câmera dentro de uma cena.
31
3 DESENVOLVIMENTO
Este capítulo detalha as etapas do desenvolvimento da aplicação. São apresentados os principais requisitos, a especificação, a implementação e, por fim, os resultados e discussões.
3.1 REQUISITOS PRINCIPAIS DO PROBLEMA A SER TRABALHADO
A aplicação proposta deve:
a) possuir algumas funções que executem comandos e conceitos da OpenGL (Requisito Funcional – RF);
b) permitir que o usuário resolva exercícios de computação gráfica que utilizem o cubo e transformações da OpenGL (RF);
c) disponibilizar peças para representar os comandos da OpenGL (RF);
d) permitir o encaixe das peças conforme os comandos que as representam (RF); e) permitir o agrupamento de transformações sobre um ou mais objetos gráficos (RF); f) permitir que o usuário altere a cor do cubo a ser desenhado em 3D (RF);
g) permitir que o usuário altere os valores x, y e z a serem passados para a matriz de transformação (RF);
h) permitir que o usuário da aplicação visualize um cenário 3D a partir das peças colocadas (RF);
i) permitir a visualização do código gerado pelas peças do exercício, ao clicá-la (RF); j) permitir que o usuário salve o exercício realizado (RF);
k) permitir que o usuário carregue o exercício salvo para continuá-lo (RF); l) ser implementado na linguagem C++ (Requisito Não Funcional – RNF);
m) utilizar a biblioteca OpenGL para realizar as funções referentes a computação gráfica (RNF);
n) utilizar classes da biblioteca V-ART (RNF);
o) ter uma padronização nos nomes das funções (RNF); p) ser de código aberto (RNF);
q) ser documentado em Doxygen (RNF);
32
s) executar sobre o sistema operacional Windows e Mac OS (RNF).
3.2 ESPECIFICAÇÃO
A especificação do presente trabalho foi desenvolvida com base nos diagramas da Unified Modeling Language (UML) em conjunto com a ferramenta Enterprise Architect 9.3.932. Para a modelagem da aplicação foram utilizados os diagramas de casos de uso, de classes e de estado que são apresentados nas seções seguintes.
3.2.1 Diagrama de casos de uso
Nessa seção são descritos os principais casos de uso da AduboGL. Por se tratar de uma aplicação voltado à aprendizagem da matéria de computação gráfica a partir da biblioteca OpenGL, encontrou-se apenas um ator que será o próprio usuário do sistema, sendo ele o aluno ou o professor da disciplina. A Figura 5 exibe o diagrama de casos de uso do referido trabalho.
33
Para entender os casos de uso é necessário ter conhecimento das partes que formam a aplicação. A AduboGL é formada por cinco janelas, sendo elas: fábrica que é o local onde
as peças são disponibilizadas para serem colocadas no exercício; bandeja é onde o exercício
é construído; janela de código-fonte da peça selecionada é onde o usuário visualiza o código em C++ das peças conforme são selecionadas; a janela de visualização do exercício 3D é onde o resultado do exercício é exibido; e por fim, visualização 3D com câmera é a visualização da janela de resultado a partir de uma câmera, para visualizar o
exercício em um ângulo diferente.
O UC01 mostra como o ator Usuário cria peças para interagir com o exercício da
AduboGL. O Quadro 13 apresenta os detalhes do caso de uso.
UC01 – Criar peças disponíveis na fábrica para realizar um exercício
Descrição As peças do exercício são aquelas que são colocadas no cenário para gerar posteriormente o código-fonte. Cada peça representa um comando da OpenGL, por exemplo, o desenho de um cubo ou o comando glPushMatrix() glPopMatrix(), ou ainda as transformações escala, rotação e translação (ver seção 2.2.4).
A aplicação possui um espaço para disponibilizar todas essas peças a serem utilizadas pelo usuário, o espaço chama-se fábrica. As peças disponíveis nela ficam armazenadas em uma lista da fábrica. A janela a esquerda é dividida em duas partes: fábrica (exibe peças para serem criadas) e bandeja (apresenta as peças já criadas, colocadas e encaixadas). As partes são separadas por uma linha horizontal;
Cenário Principal
1.O Usuário inicia a AduboGL;
2.O Usuário clica com o mouse em uma peça da fábrica e arrasta para qualquer parte do exercício mantendo o botão do mouse pressionado;
3.A aplicação irá criar uma peça idêntica a clicada.
Pós-Condição A peça criada é armazenada na aplicação em uma lista de peças da bandeja para que o usuário possa realizar os demais movimentos com a mesma. O usuário poderá visualizar a peça conforme o cursor do mouse é movimentado. A peça deve acompanhar o cursor.
Quadro 13 – Detalhamento do caso de uso UC01
Já o UC02 mostra como o ator Usuário coloca uma das peças já criadas no ambiente do exercício. O Quadro 14 apresenta os detalhes do caso de uso.
34
UC02 – Colocar a peça criada no ambiente do exercício, sobre a bandeja
Descrição Após a criação da peça, ela deve ser colocada na bandeja para que o exercício possa ser iniciado, assim como a aprendizagem da OpenGL e a geração do código-fonte.
A bandeja é o local que armazena as peças já criadas que irão compor o exercício.
A peça que representa os comandos glPushMatrix() glPopMatrix() poderá receber peças internamente, chamadas de peças filhas. Essas peças filhas representam os comandos que são circundados pelo comando glPushMatrix()e glPopMatrix().
Pré-Condição UC01 Cenário
Principal
1. O Usuário deve soltar o botão do mouse para soltar a peça criada em qualquer local da bandeja;
2. A aplicação colocará a peça abaixo da última já posicionada, caso for a primeira peça, colocará no topo da bandeja.
Cenário Alternativo 1
1. Se no passo 1 do cenário principal o Usuário soltar a peça dentro da fábrica, a peça será removida da bandeja e da lista de peças da bandeja.
Cenário Alternativo 2
1. No passo 1 do cenário principal o Usuário pode soltar a peça ao lado de outra peça;
2. A aplicação verificará se a peça que está ao lado da nova permite ter peças filhas;
3. Se permitir, irá adicionar a peça como filha dela em uma lista de peças filhas e mostrará a mesma encaixada na peça solta;
4. Se a peça já tiver peças filhas, encaixará a nova peça a cima ou abaixo da atual filha, conforme for posicionada na bandeja;
5. Se não permitir apagará a peça criada.
Pós-Condição O Usuário deve poder visualizar a peça criada no exercício. Essa peça corresponde a um dos comandos principais da OpenGL que formarão o código-fonte posterior.
Quadro 14 – Detalhamento do caso de uso UC02
Ainda, o UC03 mostra como o ator Usuário pode alterar as propriedades dos
comandos da OpenGL. Esses comandos são os representados pelas peças já colocadas na bandeja. O Quadro 15 apresenta os detalhes do caso de uso.
O UC04 mostra como o ator Usuário pode movimentar e alterar a posição das peças já
35
UC03 – Alterar propriedades dos comandos da OpenGL
Descrição Alguns comandos da OpenGL possuem parâmetros, como o cubo que possui sua cor e as transformações translação, escala e rotação que possuem os valores de x, y e z a serem transformados. Ao colocar uma peça que representa esses comandos, o Usuário pode alterar suas propriedades.
Pré-Condição UC02 Cenário
Principal
1. Se colocar uma peça que representa o cubo, o Usuário pode alterar sua cor pressionando a tecla “R” para colori-lo de vermelho, “G” para colori-lo de verde ou “B” para colori-lo de azul;
2. Se o Usuário colocar uma peça que represente as transformações ele poderá alterar os valores de x, y e z utilizando as teclas numéricas 1 e 2 para diminuir e aumentar o valor de x, ou 3 e 4 para diminuir e aumentar o valor de y, ou ainda 5 e 6 para diminuir e aumentar o valor de z.
Cenário Alternativo
1. Se a peça já estiver colocada e o Usuário desejar alterar suas propriedades, ele deve clicar sobre a peça e então realizar os passos do cenário principal. Exceção 1. Se o Usuário desejar alterar as propriedades de uma peça filha já
posicionada não conseguirá, pois não é possível selecionar a peça filha após ter clicado em outra.
Pós-Condição Quando for um cubo o Usuário visualizará sua nova cor sobre a própria peça. Quando for uma peça de transformação, o Usuário visualizará o valor alterado na janela de código-fonte, nas posições respectivas de x, y e z.
Quadro 15 – Detalhamento do caso de uso UC03 UC04 – Mexer e alterar a posição das peças já criadas e colocadas na bandeja
Descrição Depois de posicionar a peça no exercício, o Usuáriopode trocá-la de posição, colocando-a em cima, embaixo ou entre uma já colocada.
Pré-Condição UC02 Cenário
Principal
1. O Usuáriodeve clicar e manter pressionado o botão do mouse sobre a peça a ser alterada de lugar;
2. A peça irá se mover na tela conforme o cursor do mouse se movimentar; 3. Quando a peça estiver posicionada ao lado da peça que deseja ser encaixada,
o Usuáriodeve soltar o botão do mouse;
4. A aplicação realizará comparações para verificar a posição em que a peça será encaixada, coloca-a no lugar, desloca as demais peças para baixo e atualiza o índice de todas.
Cenário Alternativo
1. Se no item 3 do cenário principal o Usuário soltar a peça na área da fábrica, a peça será removida e apagada do exercício.
Exceção 1. Se o Usuário tentar mover uma peça filha não conseguirá, pois não é permitido.
Pós-Condição O Usuáriodeve visualizar a peça movida em seu novo lugar e as demais peças deslocadas para baixo.
Quadro 16 – Detalhamento do caso de uso UC04
O UC05 mostra como o ator Usuário pode visualizar o código-fonte de uma peça
selecionada, sendo da fábrica ou da bandeja. O Quadro 17 apresenta os detalhes do caso de uso.
36
UC05 – Visualizar código da peça conforme peça selecionada
Descrição Ao clicar sobre uma peça o Usuário pode visualizar o código-fonte em C++
com OpenGL resultante da montagem da mesma. O Usuário visualizará o código-fonte na janela código-fonte da peça selecionada.
Pré-Condição Nenhuma Cenário
Principal
1. O Usuáriodeve clicar sobre uma peça, sendo da fábrica ou da bandeja; 2. A aplicação exibirá na janela de código-fonte da peça selecionada o
código correspondente a peça (se for da fábrica a peça estará com suas inicializações zeradas, se for da bandeja será exibido o código conforme a montagem e sua configuração no exercício).
Cenário alternativo
1. Se o Usuário clicar sobre uma peça que representa os comandos glPushMatrix() glPopMatrix() e dentro da peça tiver peças filhas, será exibido o código com as configurações de cada uma das peças filhas empilhadas.
Pós-Condição O Usuário deve poder visualizar o código-fonte a partir de um arquivo com extensão cpp. A partir deste arquivo o Usuário pode entender como funciona algumas diretivas e comandos do OpenGL e pode executá-lo em um novo projeto.
Quadro 17 – Detalhamento do caso de uso UC05
O UC06 mostra como o ator Usuário pode salvar o exercício conforme as peças
colocadas na bandeja. O Quadro 18 apresenta os detalhes do caso de uso.
UC06 – Salvar o exercício
Descrição Após disponibilizar as peças sobre a bandeja, o Usuário pode salvar o exercício montado para abri-lo posteriormente ou para visualizá-lo na cena em 3D. Pré-Condição UC02
Cenário Principal
1. O Usuário deve clicar com o botão direito dentro da bandeja; 2. A aplicação mostrará um menu;
3. O Usuário deve clicar na opção “Gravar exercício”;
4. A operação irá gerar um arquivo texto no diretório do projeto com o nome “Exercicio.txt” com todas as configurações das peças colocadas na bandeja e na mesma ordem. Caso o arquivo já exista, o mesmo é sobreposto.
Pós-Condição O Usuário deve poder visualizar o arquivo gerado na pasta do projeto com o nome de “Exercicio.txt”. E na janela Visualização do exercício 3D deve aparecer a cena em 3D correspondente ao exercício gravado.
Quadro 18 – Detalhamento do caso de uso UC06
O UC07 mostra como o ator Usuário pode abrir o exercício já salvo em um arquivo
texto. O Quadro 19 apresenta os detalhes do caso de uso.
UC07 – Abrir o exercício salvo
Descrição Após salvar um arquivo com a disposição das peças o Usuário pode abri-lo novamente, mesmo tendo fechado a aplicação.
Pré-Condição UC06 Cenário
Principal
1. O Usuáriodeve clicar com o botão direito dentro da bandeja; 2. A aplicação mostrará um menu;
3. O Usuáriodeve clicar na opção “Abrir exercício”;
4. A aplicação carregará as peças na bandeja na mesma ordem e com as mesmas configurações conforme foram gravadas no arquivo.
Pós-Condição O Usuário deve visualizar as peças carregadas na bandeja, conforme foram salvas, assim como o exercício em 3D. Deve também poder alterar o exercício como é explicado nos casos de uso anteriores.
37
Por fim, o UC08 mostra como o ator Usuário pode visualizar a cena em 3D gerada
pelas peças do exercício. O Quadro 20 apresenta os detalhes do caso de uso.
UC08 – Visualizar cena 3D
Descrição Após salvar um arquivo com a disposição das peças o Usuáriopode visualizá-lo na janela de visualização do exercício 3D.
Pré-Condição UC06 Cenário
Principal
1. O Usuário deve abrir o arquivo exercício, caso não esteja visualizando o cenário em 3D;
2. Na janela Visualização 3D com câmera é exibida a cena 3D correspondente as peças montadas a partir de um frustum de visão.
Pós-Condição O Usuário deve visualizar o cenário 3D conforme as peças gravadas no arquivo. E na janela Visualização do exercício 3D aparece a cena vista de frente.
Quadro 20 – Detalhamento do caso de uso UC08
3.2.2 Diagrama de classes
A Figura 6 representa as classes que compõem a aplicação assim como seus relacionamentos. Na representação, foram colocadas as classes criadas e as que são utilizadas da biblioteca V-ART, omitindo-se as classes existentes na biblioteca, mas que não são utilizadas pela aplicação. No diagrama as classes foram divididas em dois pacotes, dessa forma sabem-se quais são da aplicação e quais são da biblioteca externa. A seguir as classes são detalhadas, seguindo sua complexidade da menor para a maior. No detalhamento da modelagem foram omitidos os construtores e funções assessoras (gets()e sets()).
38
Figura 6 – Diagrama de classes
O diagrama apresenta cinco classes que pertencem à biblioteca V-ART, que são
Point, Point4D, Transform, Color e BoundingBox. A primeira, Point, possui basicamente
as funções assessoras para atribuir e retornar os três pontos de um ponto no espaço (x, y e z) e
é utilizada apenas de modelo para a segunda classe, não podendo ser instanciada. A segunda,
Point4D, permite ser instanciada e fornece funções para se trabalhar com o ponto. O que foi
utilizado dessa classe no trabalho proposto foi o construtor com valores apenas nos pontos x e y e as funções assessoras. A terceira classe, Transform, disponibiliza funções para realizar
transformações de escala, rotação e translação sobre uma matriz quadrada 4x4, definida em um vetor de 16 posições. Além dessas funções está disponível a função para fazer a identidade da matriz. A quarta classe, Color, é basicamente composta por um vetor de quatro
39
dimensões, onde cada dimensão representa uma cor, seguindo o padrão Red Green Blue Alpha (RGBA), suas funções assessoras e construtores. Dessa classe foram utilizadas as cores RGB para definir a cor das peças e objetos utilizados em toda a aplicação. E a quinta classe é utilizada para pegar os pontos máximo e mínimo em relação aos eixos de uma forma geométrica representando sua Bounding Box.
As demais classes presentes no diagrama foram construídas para que a aplicação pudesse executar suas funcionalidades corretamente. A classe ObjetoGrafico constitui
funções responsáveis por desenhar um objeto 2D. A partir dela pode ser definida a cor do objeto, sua espessura de linha, sua matriz de transformação, seus vértices, sua primitiva gráfica e seu tipo.
Na classe ObjetoGrafico também é possível adicionar peças filhas, nesse caso elas
são armazenados em um vetor de filhos. Para saber quantos filhos já existem no vetor utiliza-se a variável de controle quantidade que é incrementada a cada novo filho adicionado. Para
realizar esse controle foi utilizada a ideia do grafo de cena (ver seção 2.3), onde a estrutura que representa os pais é o vetor listaBandeja da classe Principal (ver Figura 11). E a
estrutura que representa os filhos é o vetor listaFilhos da classe ObjetoGrafico. Assim
cada pai tem uma lista de filhos.
Como a classe é genérica para qualquer objeto 2D não é possível realizar o desenho das peças. Dessa forma, é definida uma função do tipo virtual denominada Desenha() que
deve ser implementada por quem a herdar. A classe é utilizada também na aplicação exemplo que gera cena 3D, então foi criada uma classe secundária que herda a ObjetoGrafico
denominada ObjetoGraficoExercicio que possui funções utilizadas somente na AduboGL.
A classe ObjetoGraficoExercicio define se o objeto 2D poderá ser “pai” ou “filho”
de outra peça, assim como o id que a peça representa no exercício e sua BoundingBox que é
utilizada para saber se foi clicado dentro do objeto ou não. Dentro dela a BoundingBox é
calculada conforme o objeto sofre uma transformação, também existe uma função que retorna a lista dos vértices com sua transformação. Além disso, existe a função que verifica se um ponto passado como parâmetro pertence ao objeto, ou seja, se está dentro dele. Nessa classe a função Desenha(), herdada da classe ObjetoGrafico, é implementada. Como essa classe
também serve para desenhar qualquer forma 2D foram criadas outras duas classes com que herdam a ObjetoGraficoExercicio, são elas PushPop e Cubo. Essas apenas definem em
seu construtor as características que cada objeto possui. Na Figura 7 está a representação das classes ObjetoGrafico e ObjetoGraficoExercicio com suas variáveis e funções principais,
40
assim como as classes que a herdam.
Figura 7 – Classe ObjetoGrafico com suas heranças
Como a aplicação possui três peças que representam as transformações e essas dependem dos valores de x, y e z para realizar a transformação, foi criada a classe ObjetoTransformacao que herda a ObjetoGraficoExercicio e possui simplesmente as três
variáveis de controle. Para representar as três peças foram criadas as três classes Escala, Rotação e Translação que informam suas particularidades no construtor. Essa relação pode
ser analisada na Figura 8.
Figura 8 – Classe ObjetoTransformacao com suas heranças
A classe GravacaoDeArquivo, representada na Figura 9, foi criada para facilitar a
gravação do arquivo que corresponde a modelagem das peças da aplicação. Ela possui as funções para criar o arquivo; gravar ou adicionar em um arquivo já salvo um vetor de char,
um único char, uma String ou um número; e também a função para finalizar a gravação do
41
Figura 9 – Classe GravacaoDeArquivo
A classe LeituraDeArquivo é utilizada para carregar um arquivo texto,
especificamente o arquivo salvo. Ela possui funções para carregar um arquivo texto passado como parâmetro em uma variável da classe, ler e retornar o conteúdo lido do arquivo e finalizar a leitura do mesmo. Sua representação está na Figura 10.
Figura 10 – Classe LeituraDeArquivo
Por fim, Principal é a classe central da aplicação. Nela são realizadas todas as
interações da tela, como a criação de peças da fábrica, a colocação das peças na bandeja, a gravação e leitura do exercício e a visualização do código-fonte. A classe possui métodos para desenhar cada uma das telas que compõem a aplicação, assim como para criar seus menus e modelá-la. A Figura 11 representa essa classe, com seus atributos e métodos principais.
42
Figura 11 – Classe Principal
As variáveis presentes na classe, em sua maioria, são utilizadas para controles internos. Os principais exemplos são:
a) ao redimensionar a janela principal, redimensiona as janelas internas;
b) ao soltar um objeto na parte do exercício, calcula sua altura e o posiciona abaixo da última peça colocada;
c) ao criar uma peça, essa é adicionada em um vetor de peças do exercício após a última peça colocada;
d) ao trocar os objetos de local, o vetor de peças do exercício é atualizado conforme a ordem das peças colocadas;
43
armazenada;
f) ao passar com o mouse sobre as janelas é exibido um contorno em amarelo para identificar onde está o foco do mouse;
g) ao selecionar uma peça é exibido o código-fonte na janela de códigos correspondente a peça e suas filhas, quando houver;
h) a cada nova peça seu identificador é incrementado e quando a mesma é removida o identificador é decrementado e os objetos da lista são atualizados.
3.2.3 Diagrama de estado
O diagrama de estados da Figura 12 mostra os possíveis estados e transações de uma peça da aplicação.
Figura 12 – Diagrama de estados
Como se pode observar, existem três estados para a peça. O primeiro é uma peça ser da fábrica e a partir dela ser criada tornando-se peça da bandeja, ou então ser adicionada a uma peça já existente, tornando-se filha dela. O segundo é a peça ser da bandeja e poder ser excluída da mesma ou então ser movida por ela. E o terceiro e último estado é a peça ser filha, podendo ser encaixada na peça antecessora e movida conforme sua peça “pai” é movida.
