Biblioteca Opengl

UNIVERSIDADE REGIONAL DE BLUMENAU
CENTRO DE CINCIAS EXATAS E NATURAIS

CURSO DE CINCIA DA COMPUTAO BACHARELADO
ADUBOGL APLICAO DIDTICA USANDO A

BIBLIOTECA OPENGL
LUCIANA PEREIRA DE ARAJO
BLUMENAU
2012
2012/1-19

BIBLIOTECA OPEN GL
Trabalho de Concluso de Curso submetido

Universidade Regional de Blumenau para a
obteno dos crditos na disciplina Trabalho
de Concluso de Curso II do curso de Cincia
da Computao Bacharelado.
Prof. Dalton Solano dos Reis, Mestre - Orientador
BLUMENAU
2012
2012/1-19

BIBLIOTECA OPEN GL
Por
Trabalho aprovado para obteno dos crditos

na disciplina de Trabalho de Concluso de
Curso II, pela banca examinadora formada
por:
Presidente:
______________________________________________________
Prof. Dalton Solano dos Reis, Mestre Orientador, FURB
Membro:
______________________________________________________
Prof. Aurlio Faustino Hoppe, Mestre FURB
Membro:
______________________________________________________
Prof. Joyce Martins, Mestre FURB
Blumenau, 11 de julho de 2012
Dedico este trabalho a minha famlia que me

apoiou durante toda a minha graduao, ao
meu namorado, amigos, ao meu orientador e
aqueles que me ajudaram diretamente na
realizao deste.
AGRADECIMENTOS
A Deus, por iluminar-me durante toda a caminhada.

A minha famlia, pelo apoio, compreenso, cobrana e por estar ao meu lado.
Ao meu namorado, William, pelos auxlios e por estar sempre presente.
Aos meus amigos, por estarem juntos em quase toda a graduao.
Aos colegas de trabalho e ao secretrio do departamento, Vilmar, pelo incentivo.
Aos meus chefes, Mauro Marcelo Mattos e Antnio Carlos Tavares, por acreditarem
no meu potencial.
A todos os professores que estiveram presentes em minha graduao, principalmente
aqueles que me apoiaram, abriram chances para meu crescimento profissional e
compreenderem quando no pude ser prestativa durante o trabalho permitindo a realizao
deste e por estarem sempre dispostos a me aconselhar.
Ao Laboratrio de Desenvolvimento e Transferncia de Tecnologia (LDTT) e a FURB
por ajudarem a moldar minha carreira profissional.
Ao meu orientador, Dalton Solano dos Reis, pela orientao, dedicao e por acreditar
na realizao deste.
As oportunidades multiplicam-se medida que

so agarradas.
Sun Tzu
RESUMO
Este trabalho apresenta a implementao de uma aplicao voltada ao aprendizado da

computao grfica com foco nas transformaes geomtricas, denominada AduboGL. A
biblioteca OpenGL utilizada como ponto fundamental para montar o cenrio 2D da
aplicao e o resultado no espao 3D. Para sua construo foram tomados como base alguns
conceitos da informtica na educao, tornando o seu uso mais simplificado. Na aplicao
possvel realizar exerccios atravs de peas que se encaixam de acordo com as
transformaes geomtricas, empilhamento de transformaes e uma forma geomtrica
simples, o cubo. Essas peas so apresentadas em uma janela para serem montadas em um
plano 2D. Aps a montagem possvel salvar o exerccio e visualizar seu resultado em um
espao 3D na ordem em que as peas foram colocadas. Ainda na AduboGL possvel
visualizar o cdigo em C++ e OpenGL das peas que esto sendo colocadas, podendo assim
auxiliar o aluno a compreender a ordem lgica dos comandos utilizados para o
desenvolvimento da cena. Por fim, apresentada a anlise de desempenho e usabilidade da
aplicao.
Palavras-chave: Aplicao. Informtica na educao. OpenGL. Matriz de transformao.
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
its 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, its
possible to save the exercise and visualize its result in 3D space in the order in which pieces
were placed. Yet, in the AduboGL, its 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, its presented the performance and
usability analysis of the application.
Key-words: Application. Computer in education. OpenGL. Transformation matrix.
LISTA DE ILUSTRAES
Figura 1 Estrutura padro de um SE...................................................................................... 17

Quadro 1 Estrutura de nome para funo OpenGL ............................................................... 20
Quadro 2 Tipos de dados OpenGL ........................................................................................ 21
Quadro 3 Representao dos eixos no SRU .......................................................................... 21
Figura 2 Regra da mo direita ............................................................................................... 22
Quadro 4 Primitivas grficas ................................................................................................. 22
Figura 3 - Transformaes sobre objeto 3D ............................................................................. 23
Quadro 5 Frmula para translao......................................................................................... 23
Quadro 6 Frmula para rotao ............................................................................................. 24
Quadro 7 Frmula para escala ............................................................................................... 24
Quadro 8 Multiplicao das matrizes de translao com base na origem ............................. 24
Quadro 9 Multiplicao das matrizes de escala com base na origem ................................... 24
Quadro 10 Multiplicao das matrizes de rotao com base na origem para o eixo x .......... 25
Quadro 11 Especificaes 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
Figura 6 Diagrama de classes ................................................................................................ 38
Figura 7 Classe ObjetoGrafico com suas heranas ....................................................... 40
Figura 8 Classe ObjetoTransformacao com suas heranas ......................................... 40
Figura 9 Classe GravacaoDeArquivo ............................................................................ 41
Figura 10 Classe LeituraDeArquivo ............................................................................. 41
Figura 11 Classe Principal .............................................................................................. 42
Figura 12 Diagrama de estados ............................................................................................. 43

Figura 13 Peas glPushMatrix(), glPopMatrix() e cubo ................................... 45
Figura 14 Peas que representam as transformaes............................................................. 45
Quadro 21 Estrutura das peas na AduboGL ........................................................................ 46
Figura 15 Anlise do clique sobre uma pea ......................................................................... 46
Quadro 22 - Trecho de cdigo que retorna identificador da pea clicada ................................ 47
Quadro 23 Representao do vetor do exerccio com relao ao id da pea ....................... 48
Figura 16 Deslocamento da pea dentro da bandeja ............................................................. 48
Quadro 24 Trecho de cdigo correspondente ao reposicionamento da pea colocada ......... 49
Quadro 25 Insero de pea filha a uma pea do exerccio................................................... 49
Figura 17 Deslocamento de uma pea filha........................................................................... 50
Figura 18 Deslocamento das peas para mais de um filho .................................................... 51
Quadro 26 - Trecho da funo escreveCodigo() ............................................................. 52
Quadro 27 Funo adicionarTexto da classe arquivoTexto .................................. 53
Quadro 28 Cdigo para salvar as peas do exerccio ............................................................ 54
Quadro 29 Cdigo para salvar as particularidades de cada pea........................................... 54
Figura 19 Tela da AduboGL.................................................................................................. 55
Figura 20 Insero de um cubo na origem da cena ............................................................. 56
Figura 21 Insero de pea glPushMatrix() glPopMatrix() com uma translao
interna .................................................................................................................... 57
Figura 22 - Cdigo-fonte alterado da pea translao .............................................................. 57
Figura 23 Pea com duas sucessoras e visualizao de seu cdigo-fonte ............................. 58
Figura 24 Visualizao da resoluo do exerccio assim como o cdigo do ltimo cubo .... 59
Figura 25 Aplicao exemplo executando exerccio gerado ................................................. 60
Figura 26 Insero de pea translao ................................................................................... 60
Figura 27 Reposio da pea translao ................................................................................ 61
Figura 28 Cena 3D resultante do exerccio ........................................................................... 61
Quadro 30 Tempo para adicionar uma pea filho a uma pea pai ........................................ 62
Figura 29 - Grfico de mdia de tempos .................................................................................. 63
Quadro 31 - Formulrio de perguntas aos usurios da aplicao ............................................. 64
Quadro 32 Comparao entre trabalhos correlatos................................................................ 67
Quadro 33 - Exerccio a ser realizado na AduboGL ................................................................ 74
Figura 30 Rascunho das peas para a AduboGL ................................................................... 75
Figura 31 - Croqui das peas internas ...................................................................................... 75

Figura 32 - Desenho das peas iniciais da AduboGL............................................................... 76
Figura 33 - Peas encaixadas e modeladas no Corel Draw ...................................................... 76
LISTA DE SIGLAS
2D 2 Dimenses
3D 3 Dimenses
AduboGL Aplicao didtica 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 No Funcional
SA Software Aplicativo
SE Software Educativo
SRT Sistema de Referncia da Tela
SRU Sistema de Referncia do Universo
UC Use Case
UML Unified Modeling Language
V-ART Virtual Articulations for viRtual realiTy
XML eXtensible Markup Language
SUMRIO
1 INTRODUO .................................................................................................................. 14
1.1 OBJETIVOS DO TRABALHO ........................................................................................ 14
1.2 ESTRUTURA DO TRABALHO ...................................................................................... 15
2 FUNDAMENTAO TERICA .................................................................................... 16
2.1 INFORMTICA NA EDUCAO ................................................................................. 16
2.1.1 SOFTWARE EDUCATIVO ........................................................................................... 17
2.1.2 SOFTWARE APLICATIVO .......................................................................................... 18
2.1.3 SOFTWARES COM FOCO NA EDUCAO LDICA ............................................. 18
2.2 OPENGL 4.2 ..................................................................................................................... 19
2.2.1 PADRONIZAO DE NOMES E TIPOS DE DADOS ............................................... 20
2.2.2 ESPAO GRFICO ....................................................................................................... 21
2.2.3 PRIMITIVAS GRFICAS, TEXTO, CMERA SINTTICA, ILUMINAO E
PROJEO .................................................................................................................... 22
2.2.4 TRANSFORMAES GEOMTRICAS ...................................................................... 23
2.2.5 VISUALIZAO DE OBJETOS GRFICOS .............................................................. 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 ESPECIFICAO ............................................................................................................ 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 IMPLEMENTAO ........................................................................................................ 44
3.3.1.1 Controle das peas da AduboGL .................................................................................. 44
3.3.1.2 Visualizao do cdigo-fonte das peas ....................................................................... 51
3.3.1.3 Visualizao do cenrio 3D a partir das peas colocadas ............................................. 53
3.3.2 Operacionalidade da implementao .............................................................................. 55
3.3.2.1 Desenvolvendo um exerccio na AduboGL .................................................................. 56
3.4 RESULTADOS E DISCUSSO ...................................................................................... 61
3.4.1 Resultados obtidos na anlise de performance................................................................ 62

3.4.2 Resultados obtidos na anlise de usabilidade.................................................................. 63
3.4.3 Consideraes gerais ....................................................................................................... 65
3.4.4 Relao dos trabalhos correlatos com o presente trabalho.............................................. 67
4 CONCLUSES .................................................................................................................. 69
4.1 EXTENSES .................................................................................................................... 70
REFERNCIAS BIBLIOGRFICAS ................................................................................. 71
APNDICE A Exerccio de OpenGL ................................................................................ 74
APNDICE B Croqui das peas da AduboGL e suas imagens em PNG ....................... 75
14
1 INTRODUO
Com a crescente evoluo no mundo tecnolgico as tecnologias passaram a ser

utilizadas em diferentes reas e vrios sistemas passaram a ser informatizados, at mesmo a
rea da educao. Comeou-se a criar vrios aplicativos com intuito de ensinar aos alunos
diferentes reas do conhecimento.
O problema de empregar um software para a educao 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
educao dos alunos. Normalmente, um software educacional que seja de interesse tambm
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 Computao Grfica do curso de Cincia da Computao da
Universidade Regional de Blumenau (FURB) utilizada a biblioteca Open Graphics Library
(OpenGL) para ensinar os diferentes conceitos da computao grfica. Porm, os alunos
aprendem na teoria e depois devem tentar implementar os conceitos aprendidos em alguma
linguagem de programao, normalmente a linguagem C++ (REIS, 2011).
Levando em considerao os softwares educacionais existentes e no havendo um que
possa ser utilizado diretamente na disciplina de Computao Grfica do curso de Cincia da
Computao da FURB, prope-se desenvolver uma aplicao para o estudo da computao
grfica que utilize a biblioteca OpenGL. Esta aplicao deve possuir algumas funes prontas
da OpenGL para que sejam utilizadas na gerao do cdigo-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 funes grficas.
1.1
OBJETIVOS DO TRABALHO
O objetivo deste trabalho desenvolver uma aplicao para o estudo da disciplina de

Computao Grfica do curso de Cincia da Computao da FURB na linguagem C++ que
utilize os conceitos bsicos da OpenGL.
Os objetivos especficos do trabalho so:
15
a) desenvolver e disponibilizar a aplicao com conceitos definidos durante o
levantamento bibliogrfico;
b) permitir que o aluno da disciplina realize exerccios com a aplicao;
c) disponibilizar um ambiente para que o aluno visualize a cena 3D resultante do
exerccio realizado.
1.2
ESTRUTURA DO TRABALHO
Este trabalho est dividido em quatro captulos, sendo que o segundo apresenta a
fundamentao terica necessria para o entendimento deste.
O terceiro captulo apresenta o desenvolvimento da aplicao, iniciando pelos
principais requisitos e a especificao. A especificao composta pelos diagramas de casos
de uso, de classes e de estado. Tambm mostrado como o trabalho foi implementado a partir
das tcnicas e ferramentas utilizadas e dos principais trechos de cdigo. O captulo
finalizado com os resultados e discusses que aconteceram durante todo o processo de
desenvolvimento do trabalho.
Por fim, o quarto captulo refere-se s concluses deste trabalho, bem como sugestes
para extenses futuras.
16
2 FUNDAMENTAO TERICA
Na seo 2.1 apresentado como vista a informtica na educao, quais so as

melhores formas de aplic-la e que tipos de softwares educacionais existem. Na seo 2.2
descrito a OpenGL e suas caractersticas. Na seo 2.3 descrito um grafo de cena e suas
partes. Na seo 2.4 apresentado o framework V-ART e algumas de suas funcionalidades.
Por fim, na seo 2.5 so relacionados trs trabalhos correlatos ao trabalho proposto.
2.1
INFORMTICA NA EDUCAO
Com o passar do tempo os jovens adquiriram uma grande familiaridade com os

ambientes tecnolgicos, tendo uma boa vivncia fora do contexto escolar. Esta realidade vem
mostrando a importncia da incluso de tecnologias e softwares educativos no projeto
pedaggico para que os alunos adquiram com mais facilidade o conhecimento e que no
faam 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), no basta criticar a pedagogia dos brinquedos
e dos jogos eletrnicos se no houver um conhecimento profundo desses objetos e das
condies para utiliz-los corretamente. Para isso, definem-se alguns passos importantes
antes e durante a utilizao de ambientes educacionais ou ldicos, os quais so (ALMEIDA,
1994, p. 42-52):
a) o professor deve se preparar para utilizar o software educacional e receber uma
formao de como utiliz-lo;
b) o professor deve se organizar e planejar sua aula conforme a faixa etria dos
alunos e os objetivos gerais e especficos da matria;
c) os alunos envolvidos devem receber uma formao e preparao quanto ao uso da
tecnologia;
d) o professor deve executar as atividades ldicas com os alunos envolvidos;
e) o professor deve avaliar os resultados dos jogos pedaggicos.
17
Uma das ferramentas educacionais onde possvel conciliar a aprendizagem ao ldico
o software educacional. Um software educacional todo programa voltado educao que
envolve ensino e aprendizagem, onde o educador importante para ensinar um determinado
contedo 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 educao ldica. 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
intudo de favorecer o aluno a adquirir conhecimento relativo a um contedo didtico, ou seja,
o SE deve possuir um carter didtico. Alm disso, o SE deve facilitar a interao entre o
aluno/usurio e o programa, sempre mediada pelo professor e tambm deve ter uma boa
usabilidade (OLIVEIRA; COSTA; MOREIRA, 2001, p. 73).
O SE baseia-se na juno dos seguintes fatores: contedo; interao aluno-SEprofessor; programao e fundamentao pedaggica conforme pode ser observado na Figura
1.
Fonte: Oliveira, Costa e Moreira (2001, p. 75).
Figura 1 Estrutura padro de um SE
O software no precisa abranger todas as reas e nem apenas uma. Existem vrios tipos
de SE com foco em determinada rea. Os diferentes tipos de SEs so (OLIVEIRA; COSTA;
MOREIRA, 2001, p. 75-82):
a) SE com nfase na lgica do contedo;
18
b) SE que por possuir uma capacidade grande de novas informaes, pretende realizar
uma interao progressiva com o usurio. Um exemplo deste tipo de software so
os sistemas inteligentes;
c) SE que por possuir bastante interao com o usurio permite um melhor
aproveitamento pedaggico, como os tutoriais, aplicativos de simulao 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;
tcnicos e conhecedores da linguagem na qual o software desenvolvido; pessoas
especializadas em informtica na educao; designer para tela e componentes; alm de
docentes e alunos para experimentar e validar o material produzido.
2.1.2
SOFTWARE APLICATIVO
Os Softwares Aplicativos (SA) so 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 produo de SE, como os sistemas de autoria, sistemas de
hipertexto e ambientes para criao de tutoriais;
b) software de apoio ao trabalho administrativo, como banco de dados, ambientes de
programao, processadores de texto, planilhas eletrnicas, editores grficos e

programas de comunicao.
2.1.3
SOFTWARES COM FOCO NA EDUCAO LDICA
A educao ldica favorece a construo do conhecimento de forma sadia e com um

esprito de uma prtica democrtica. Sua prtica promove a interao social e tem em vista o
compromisso de transformar e modificar o meio (ALMEIDA, 1994, p. 41).
A educao ldica tem por objetivo promover o aprofundamento do conhecimento
cientfico e profissional de forma que o aluno tenha satisfao e prazer em adquirir
determinado conhecimento. Alm disso, ela permite a integrao do conhecimento com a vida
19
social e com as situaes do mundo, promovendo uma relao afetiva de vida (ALMEIDA,
1994, p. 15-24).
Podem ser considerados softwares ldicos os jogos que juntam o mundo real com
alguma diverso para o usurio. Existem jogos que buscam promover a educao, como o
jogo Sim City que ensina o jogador a construir e gerenciar cidades. Assim como jogos mais
simples que so utilizados por um professor de matemtica 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 grficos bidimensionais e tridimensionais para diferentes plataformas

(COHEN; MANSSOUR, 2006, p. 22; MACHADO; MORAES, 2005, p. 92). A OpenGL
tambm pode ser considerada um software para construo de interfaces grficas com
capacidade de modelar grficos 3D, com uma biblioteca rpida e porttil (WRIGHT JNIOR
et al., 2011, p. 33-34).
A OpenGL no considerada uma linguagem de programao 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 funes para trabalhar com objetos
geomtricos, porm muito primitivo e no possui recursos para trabalhar com telas, alm de
possuir um baixo nvel de abstrao (WRIGHT JNIOR et al., 2011, p. 34). A API pode ser
utilizada para diversas funes, desde Computer Aidded Design (CAD) de engenharia e
aplicaes arquitetnicas at para a criao de jogos e filmes (BORGES et al., 2004).
Para facilitar o desenvolvimento de aplicaes grficas foram criadas as bibliotecas
openGL Utility library (GLU) e openGL Utility Toolkit (GLUT) baseadas na OpenGL, mas
com uma abstrao maior (MACHADO; MORAES, 2005, p. 94).
A GLU contm uma srie de funes que encapsulam comandos OpenGL de mais
baixo nvel. Entre elas est a definio de matrizes para projeo e orientao da visualizao,
que permitem mapear as coordenadas entre o espao 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 portvel. Ela possui diversas
20
funes tanto de janelas quanto de controle de eventos. Com ela possvel criar janelas,
menus, pop-ups, desenhar textos e objetos da OpenGL como paraleleppedos, esferas e
cilindros. Alm disso, possvel 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 aplicaes (COHEN; MANSSOUR, 2006, p. 53; WRIGHT JNIOR et al., 2011, p.
43).
Nas prximas sees so abordados os temas: padronizao de nomes e tipos de dados;
espao grfico; primitivas grficas, texto, cmera sinttica, iluminao e projeo;
transformaes geomtricas e visualizao de objetos grficos.
2.2.1
PADRONIZAO DE NOMES E TIPOS DE DADOS
O nome das funes em OpenGL possui uma padronizao. O nome da funo

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 funo; a terceira parte um nmero 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 formatao de uma funo
OpenGL.
<PrefixoBiblioteca> <ComandoRaiz> <ContadorArgumentoOpcional> <TipoArgumentoOpcional>
EXEMPLO:
void glColor3f (GLfloat red, GLfloat green, GLfloat blue)
gl
Color
3
F
Prefixo: biblioteca gl.

Comando raiz que indica o objetivo da funo.
Indica que a funo possui trs argumentos.
Indica que os argumentos so valores de ponto flutuante.
Quadro 1 Estrutura de nome para funo OpenGL
Algumas funes no tem parmetros ou possuem sempre a mesma quantidade. Nestes

casos a nomenclatura da funo no tem a parte do contador ou do tipo de argumento. Como
exemplo, cita-se o caso da funo glTranslatef(), que sempre possui trs parmetros.
Assim como o nome das funes, tambm foram especificados tipos de dados prprios
da OpenGL. A maioria dos tipos primitivos comea com o prefixo GL seguido do tipo
primitivo determinado (POZZER, 2011, p. 8). Os tipos de dados so apresentados no Quadro
2.
21
Tipo de dado OpenGL
Representao interna
Tipo de dado C
Sufixo
GLbyte
GLshort
GLint, GLsizei
GLfloat, GLclampf
GLdouble, GLclampd
GLubyte, GLboolean
GLushort
GLuint, GLenum,
GLbitfield
inteiro de 8 bits
inteiro de 16 bits
inteiro de 32 bits
ponto flutuante de 32 bits
ponto flutuante de 64 bits
inteiro de 8 bits sem sinal
inteiro 16 bits sem sinal
inteiro de 32 bits sem sinal
signed char
short
int ou long
float
double
unsigned char
unsigned short
unsigned long/
unsigned int
b
s
i
f
d
ub
us
ui
Fonte: Cohen e Manssour (2006, p. 52).
Quadro 2 Tipos de dados OpenGL
2.2.2
ESPAO GRFICO
O universo de um espao grfico a regio do plano utilizada em uma aplicao.

Pode-se visualizar o espao grfico principalmente em duas formas diferentes: 2D e 3D
(MACHADO; MORAES, 2005, p. 94).
Como os espaos grficos utilizam coordenadas geomtricas, deve-se definir um
sistema de referncia que define uma origem em relao aos demais pontos descritos no
universo (COHEN; MANSSOUR, 2006, p. 72-77).
Para um plano 2D, o Sistema de Referncia do Universo (SRU) composto por dois
eixos (x e y) perpendiculares entre si. J para o espao 3D este sistema composto por trs
eixos (x, y e z) ortogonais entre si (WRIGHT JNIOR et al., 2011, p. 133). A representao
de cada um deles pode ser vista no Quadro 3.
Quadro 3 Representao dos eixos no SRU
Desta forma, uma coordenada em um plano 2D representada por dois pontos e em

um plano 3D por trs pontos e todos os modelos em OpenGL so definidos pelo SRU. O SRU
no representa exatamente os pontos do monitor do computador. O monitor utiliza o Sistema
de Referncia 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 converso ou um mapeamento (COHEN; MANSSOUR, 2006, p. 72).
22
Para localizar o eixo z em relao ao eixo x e y em um plano 3D pode-se utilizar a
regra da mo direita ou a regra da mo esquerda. A OpenGL trabalha com a primeira regra.
Para isso deve-se posicionar a mo direita de forma que o indicador fique apontado para o
eixo y (positivo), o polegar para o eixo x (positivo) e o dedo mdio apontado para a direo
positiva do eixo z. Na Figura 2 pode-se observar a utilizao desta regra (MANSSOUR;
COHEN, 2006, p.9).
Fonte: Manssour e Cohen (2006, p. 9).
Figura 2 Regra da mo direita
2.2.3
PRIMITIVAS GRFICAS, TEXTO, CMERA SINTTICA, ILUMINAO E

PROJEO
Com a OpenGL possvel desenhar elementos bsicos como pontos, segmentos de

reta, polgonos e crculos. Para realizar estes elementos em um plano 2D foram definidas
algumas primitivas grficas. Estas primitivas so definidas por um ou mais pares de vrtices.
O Quadro 4 representa as diferentes primitivas grficas disponveis na biblioteca (POZZER,
2011, p. 8; MACHADO; MORAES, 2005, p. 96).
Primitiva Grfica
GL_POINTS
GL_LINES
GL_LINE_STRIP
GL_LINE_LOOP
GL_POLYGON
GL_TRIANGLES
GL_TRIANGLE_STRIP
GL_TRIANGLE_FAN
GL_QUADS
GL_QUAD_STRIP
Funo
Desenhar ponto
Desenhar segmento de linha
Desenhar segmentos de linhas conectados
Desenhar segmentos de linhas conectados, unindo o primeiro com o ltimo
Desenhar polgono convexo
Desenhar tringulo
Desenhar tringulos conectados
Desenhar tringulos a partir de um ponto central
Desenhar quadrilteros
Desenhar quadrilteros conectados
Quadro 4 Primitivas grficas
Para escrever um texto na rea grfica 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 so imagens que representam caracteres. O primeiro tipo possui uma resoluo
maior e pode ser escalado e rotacionado, porm no to rpido quanto o segundo tipo de
fonte (COHEN; MANSSOUR, 2006, p. 105).
2.2.4
TRANSFORMAES GEOMTRICAS
As transformaes geomtricas nada mais so que clculos matemticos que

transformam as caractersticas dos elementos grficos. Estas transformaes alteram apenas o
aspecto do desenho e no sua estrutura (COHEN; MANSSOUR, 2006, p. 113) e so
calculadas sempre a partir da origem do objeto grfico (REIS, 2012). comum que essas
alteraes sejam feitas de forma interativa. Existem basicamente trs tipos de transformaes:
translao, rotao e escala (MACHADO; MORAES, 2005, p. 97), como pode ser observado
na Figura 3.
Fonte: Reis (2012).
Figura 3 - Transformaes sobre objeto 3D
A translao utilizada para colocar ou alterar de lugar o objeto em cena. A operao

matemtica aplicada translao a adio de constantes de deslocamento nas coordenadas
do elemento (WRIGHT JNIOR et al., 2011, p. 25-26). Sua frmula apresentada no Quadro
5.
x' = x + Tx
y' = y + Ty
z' = z + Tz, onde T a constante de deslocamento.
Quadro 5 Frmula para translao
A rotao 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 clculo
matemtico de seno e cosseno sobre os demais eixos do objeto (WRIGHT JNIOR 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 frmula descrita no Quadro 6.
24
x' = x * cos(a) + y * sin(a)
y' = -x * sin(a) + y * cos(a)
Quadro 6 Frmula para rotao
A escala utilizada para definir o tamanho do objeto no plano grfico. Com ela,
tambm possvel 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 grficas que
compem 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 Frmula para escala
Para que um objeto inteiro sofra a transformao aplicada necessrio realizar a

mesma sobre cada uma das coordenadas do objeto. Por isso, so utilizadas matrizes de
transformao com coordenadas homogneas. Conforme Cohen e Manssour (2006, p. 124),
para combinar as transformaes geomtricas multiplica-se todas as matrizes de
transformao que sero aplicadas, e cada vrtice multiplicado somente pela matriz
resultante, chamada de matriz de transformao corrente. Nos Quadro 8, Quadro 9 e Quadro
10 observam-se as trs transformaes com base nas matrizes de transformao. importante
que a matriz corrente da transformao seja iniciada com uma matriz identidade, para isso
utiliza-se o comando da OpenGL glLoadIdentity()(REIS, 2012; COHEN; MANSSOUR,
2006, p. 124).
Translao homognea 3D em relao a origem
Fonte: Reis (2012).
Quadro 8 Multiplicao das matrizes de translao com base na origem

Escala homognea 3D em relao a origem
Fonte: Reis (2012).
Quadro 9 Multiplicao das matrizes de escala com base na origem
25
Rotao homognea 3D em relao a origem, eixo x
Fonte: Reis (2012).
Quadro 10 Multiplicao das matrizes de rotao com base na origem para o eixo x
Para que um mesmo objeto sofra vrios tipos de transformao ao mesmo tempo, essas
transformaes devem ser concatenadas, ou seja, deve haver a multiplicao vrias vezes
sobre a mesma matriz conforme as transformaes a serem realizadas. Porm, se a cena tiver
mais de um objeto e for aplicada a transformao na cena, todos os objetos sofrero a
transformao. A OpenGL soluciona esse problema a partir da implementao de uma pilha
de matrizes de transformao. Nesse caso, para definir o escopo das transformaes utilizamse os comandos glPushMatrix() que empilha a matriz de transformao corrente e
glPopMatrix()
que desempilha a matriz de transformao corrente. Dessa forma, as
transformaes so concatenas e aplicadas ao objeto que apresentado na cena (REIS, 2012;

COHEN; MANSSOUR, 2006, p. 129).
Alm das transformaes sobre o objeto, possvel realizar transformaes sobre o
plano grfico ou janela da aplicao, 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 visualizao de forma que o usurio possa ver diferentes partes do
universo (CARNEIRO et al., 1997).
2.2.5
VISUALIZAO DE OBJETOS GRFICOS
Para visualizar um objeto no sistema de referncia existem basicamente duas formas

diferentes. A primeira forma a partir da matriz de projeo (projection) que utilizada para
determinar transformaes de recorte e projeo. A segunda pela matriz modelview que
utilizada para indicar transformaes aplicadas cmera ou aos modelos da cena (POZZER,
2011, p. 11-19).
Antes de entender cada um dos tipos de visualizao importante saber que em sua
maioria dependem de uma cmera sinttica que auxilia na visualizao do objeto. A cmera
26
sinttica semelhante a uma cmera comum. Ela possui uma localizao, que por padro fica
na origem, uma direo para onde est apontando e um vetor up que o vetor de direo em
relao ao topo da cmera.
Quando um objeto visualizado a partir da matriz de projeo, ele pode ser
visualizado de duas formas: em perspectiva ou ortogonal (WRIGHT JNIOR 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 viso a cmera deve estar apontada
para um ponto fixo; isso feito a partir do comando OpenGL gluLookAt(). Neste comando
deve-se definir a posio da cmera, para onde ela est olhando e por fim o vetor de direo
em relao ao topo dela (NEIDER, 1994; MACHADO; MORAES, 2005, p. 95-103).
Utilizando a matriz modelview para visualizar um objeto, tem-se as transformaes
geomtricas aplicadas a ele, assim como as coordenadas da cmera sinttica. Quando um
objeto sofre uma transformao, o ponto de visualizao alterado. Quem controla o ponto de
viso em relao ao objeto (viewpoint) a cmera sinttica. Estas informaes que
compem a matriz modelview (POZZER, 2011, p. 13-16; NEIDER, 1994). Essa tem uma
dimenso de quatro linhas por quatro colunas e representa as transformaes no sistema de
coordenadas sobre cada um dos objetos (WRIGHT JNIOR et al., 2011, p. 138).
Multiplicando as coordenadas dos objetos a serem transformados pela modelview, tem-se as
novas coordenadas de transformao.
2.3
GRAFO DE CENA
Um grafo de cena, tambm conhecido por scene graphs, uma estrutura de dados de
alto nvel, organizada normalmente atravs de classes. Ele implementa uma estrutura
hierrquica de objetos e atributos, que possuem informaes sobre sua aparncia 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 matemtica e armazena uma coleo de objetos de
forma organizada. Ele formado por ns, que so conectados por arcos. Um arco pode
conectar at dois ns. Os ns e suas ligaes 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
Arco
Arco Dirigido
Descrio
Conexo entre dois ns.
Arco que possui uma nica direo, sendo uma relao
unidirecional, como pai para filho.
Estrutura que representa um ou uma coleo de dados.
N que ponto de origem de um arco dirigido, ou seja, que
inicia uma relao.
N que o ponto de destino de um arco dirigido, ou seja,
o trmino da relao.
Se um n B filho de A, ento B dito descendente de A.
Todos os filhos de B, tambm so descendentes de A.
Se um n A pai B, ento A dito ancestral de B. Todos os
ancestrais de A so ancestrais de B.
N que no possui pai. o primeiro n do grafo.
N
N pai
N filho
N descendente
N ancestral
N raiz
/universo
N folha
N interior
Caminho
Travessia
Branch
Subgrafo ou
branch graph
Directed Acyclic
Graph (DAG)
rvore
N que no possui filho.

N que no raiz nem folha.
Sequncia de ns conectados por arco. Inicia em um n e
finaliza em outro.
Operao em que um caminho percorrido.
N que possui vrios filhos. Pode ser usado para agrupar
outros ns.
Representa o conjunto de um n qualquer e todos os seus
filhos e descendentes. Esse n qualquer um n branch.
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.
Caso especial de um DAG, onde todos os ns filhos possuem um
nico n pai.
Fonte: Valente (2004) e Nakamura e Tori (2004, p.108).
Quadro 11 Especificaes das partes de um grafo de cena
Com a estrutura do grafo de cena possvel aplicar uma transformao em um n pai e

esta propagada para todos os seus ns filhos. Dessa forma, as transformaes geomtricas
de uma folha do grafo so determinadas pela acumulao 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 grfica desenvolvido em C++ para facilitar a criao de ambientes em
3D, especialmente aqueles que possuem humanoides. O framework inteiramente orientado a
objetos, possui um sistema de suporte a animaes e permite a representao de articulaes
biologicamente corretas (FLIX, 2009; SCHNEIDER, 2009).
O V-ART um software livre sob licena GPLv2 e possui documentao em
DoxyGen para aqueles que desejam utilizar o framework. Tambm possui um manual com
dicas para criao de projetos com o Microsoft Visual Studio. O site do V-ART ainda
28
disponibiliza exemplos, cdigos-fontes, projetos no Microsoft Visual Studio e modelos 3D
que utilizam o prprio framework (SCHNEIDER, 2009).
2.5
TRABALHOS CORRELATOS
Existem vrias ferramentas disponveis no mercado que utilizam as tcnicas

educacionais aplicadas a algum conceito da computao, como o Greenfoot (HENRIKSEN;
KLLING, 2004) e o Furbot (VAHLDICK; MATTOS, 2008). Estas ferramentas tem por
objetivo ensinar a linguagem Java a crianas e alunos da computao. Alm delas, existe o
Edugraph que tem a inteno de ensinar a computao grfica (BATTAIOLA et al., 2002, p.
283). As trs ferramentas apresentadas ensinam de forma ldica 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, Austrlia, com intuito de ensinar a programao orientada a objetos a iniciantes,
29
principalmente crianas. 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 espao bidimensional dividido em linhas e colunas gerando assim
clulas. So nestas clulas que os objetos do tipo Actor so adicionados. Seu diferencial que
possvel criar com facilidade diferentes cenrios para que seja trabalhado. O framework
utiliza a linguagem Java como linguagem base (HENRIKSEN; KLLING, 2004).
Desenvolvido na FURB, o Furbot tambm um framework com o objetivo de ensinar
aos alunos os conceitos introdutrios da programao, misturando o Java com a linguagem
Portugol (SILVA, 2000, p. 13). Ele tambm possui um espao bidimensional com grades
(linhas e colunas) que configurado a partir de um arquivo eXtensible Markup Language
(XML) e cada clula 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 inteligncia 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 Computao Grfica a distncia.
A ferramenta utiliza os princpios dos jogos de computadores para ensinar principalmente
engenheiros e designers que no possuem o conhecimento em computao (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 nveis onde no
primeiro o aluno aprende a teoria que pode ser a partir de diferentes tipos de mdias, como
webcam, hipertexto e sons. Aps aprender a teoria, no segundo nvel o aluno exercita em um
plano 2D a partir de perguntas e respostas. Ao trmino desta fase ele passa para a terceira em
um plano 3D onde estuda este espao selecionando objetos e aplicando operaes a ele
(BATTAIOLLA et al., 2002, p. 287-289).
No Quadro 12 possvel visualizar uma comparao entre os trs trabalhos correlatos
expostos. Foram levantadas oito caractersticas e ento foram comparadas.
30
Caracterstica
Furbot
Greenfoot
Edugraph
Interao com o aluno a partir de objetos
Sim
Sim
Sim
grficos
Capacidade de resolver exerccios
Sim
Sim
Sim
Resoluo de exerccios via cdigo-fonte
Sim
Sim
No
Alterao de parmetros do cdigo em
No
No
Sim
tempo de execuo
Explcito uso da OpenGL
No
No
Sim
Permite alterao da posio da cmera
No
No
Sim
Tipo de cenrio
2D
2D
2D/3D
Tipo de integrao
Framework Framework Ferramenta
Quadro 12 - Tabela comparativa dos trabalhos correlatos
possvel visualizar que todos permitem a interao do aluno com objetos grficos a
partir da resoluo de exerccios. O que os diferencia, principalmente o Edugraph dos outros
dois trabalhos, que o Edugraph permite alterar os parmetros em tempo de execuo, porm
no permite a resoluo de exerccios via cdigo-fonte. J o Furbot e o Greenfoot permitem a
realizao de exerccio via cdigo-fonte, e no permitem a alterao de parmetros em tempo
real. O Edugraph trabalha nos dois tipos de cenrio, 2D e 3D, e os outros dois so limitados
em um espao 2D. Somente o Edugraph utiliza a OpenGL de forma explcita, assim como,
somente ele permite alterar o posicionamento da cmera dentro de uma cena.
31
3 DESENVOLVIMENTO
Este captulo detalha as etapas do desenvolvimento da aplicao. So apresentados os

principais requisitos, a especificao, a implementao e, por fim, os resultados e discusses.
3.1
REQUISITOS PRINCIPAIS DO PROBLEMA A SER TRABALHADO
A aplicao proposta deve:

a) possuir algumas funes que executem comandos e conceitos da OpenGL
(Requisito Funcional RF);
b) permitir que o usurio resolva exerccios de computao grfica que utilizem o
cubo e transformaes da OpenGL (RF);
c) disponibilizar peas para representar os comandos da OpenGL (RF);
d) permitir o encaixe das peas conforme os comandos que as representam (RF);
e) permitir o agrupamento de transformaes sobre um ou mais objetos grficos (RF);
f) permitir que o usurio altere a cor do cubo a ser desenhado em 3D (RF);
g) permitir que o usurio altere os valores x, y e z a serem passados para a matriz de
transformao (RF);
h) permitir que o usurio da aplicao visualize um cenrio 3D a partir das peas
colocadas (RF);
i) permitir a visualizao do cdigo gerado pelas peas do exerccio, ao clic-la (RF);
j) permitir que o usurio salve o exerccio realizado (RF);
k) permitir que o usurio carregue o exerccio salvo para continu-lo (RF);
l) ser implementado na linguagem C++ (Requisito No Funcional RNF);
m) utilizar a biblioteca OpenGL para realizar as funes referentes a computao
grfica (RNF);
n) utilizar classes da biblioteca V-ART (RNF);
o) ter uma padronizao nos nomes das funes (RNF);
p) ser de cdigo aberto (RNF);
q) ser documentado em Doxygen (RNF);
r) ser desenvolvida no Microsoft Visual C++ 2010 Express (RNF);
32
s) executar sobre o sistema operacional Windows e Mac OS (RNF).
3.2
ESPECIFICAO
A especificao 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 aplicao foram utilizados os diagramas de casos de uso, de
classes e de estado que so apresentados nas sees seguintes.
3.2.1
Diagrama de casos de uso
Nessa seo so descritos os principais casos de uso da AduboGL. Por se tratar de uma
aplicao voltado aprendizagem da matria de computao grfica a partir da biblioteca
OpenGL, encontrou-se apenas um ator que ser o prprio usurio do sistema, sendo ele o
aluno ou o professor da disciplina. A Figura 5 exibe o diagrama de casos de uso do referido
trabalho.
Figura 5 Diagrama de casos de uso
33
Para entender os casos de uso necessrio ter conhecimento das partes que formam a
aplicao. A AduboGL formada por cinco janelas, sendo elas: fbrica que o local onde
as peas so disponibilizadas para serem colocadas no exerccio; bandeja onde o exerccio
construdo; janela de cdigo-fonte da pea selecionada onde o usurio visualiza o
cdigo em C++ das peas conforme so selecionadas; a janela de visualizao do
exerccio 3D
cmera
onde o resultado do exerccio exibido; e por fim, visualizao 3D com
a visualizao da janela de resultado a partir de uma cmera, para visualizar o
exerccio em um ngulo diferente.

O UC01 mostra como o ator Usurio cria peas para interagir com o exerccio da
AduboGL. O Quadro 13 apresenta os detalhes do caso de uso.
UC01 Criar peas disponveis na fbrica para realizar um exerccio
Descrio
As peas do exerccio so aquelas que so colocadas no cenrio para gerar
posteriormente o cdigo-fonte. Cada pea representa um comando da OpenGL,
por exemplo, o desenho de um cubo ou o comando glPushMatrix()
glPopMatrix(), ou ainda as transformaes escala, rotao e translao (ver
seo 2.2.4).
A aplicao possui um espao para disponibilizar todas essas peas a serem
utilizadas pelo usurio, o espao chama-se fbrica. As peas disponveis nela
ficam armazenadas em uma lista da fbrica. A janela a esquerda dividida em
duas partes: fbrica (exibe peas para serem criadas) e bandeja (apresenta as
peas j criadas, colocadas e encaixadas). As partes so separadas por uma
linha horizontal;
Cenrio
1. O Usurio inicia a AduboGL;
Principal
2. O Usurio clica com o mouse em uma pea da fbrica e arrasta para
qualquer parte do exerccio mantendo o boto do mouse pressionado;
3. A aplicao ir criar uma pea idntica a clicada.
Ps-Condio A pea criada armazenada na aplicao em uma lista de peas da bandeja para
que o usurio possa realizar os demais movimentos com a mesma. O usurio
poder visualizar a pea conforme o cursor do mouse movimentado. A pea
deve acompanhar o cursor.
Quadro 13 Detalhamento do caso de uso UC01
J o UC02 mostra como o ator Usurio coloca uma das peas j criadas no ambiente
do exerccio. O Quadro 14 apresenta os detalhes do caso de uso.
34
UC02 Colocar a pea criada no ambiente do exerccio, sobre a bandeja
Descrio
Aps a criao da pea, ela deve ser colocada na bandeja para que o exerccio
possa ser iniciado, assim como a aprendizagem da OpenGL e a gerao do
cdigo-fonte.
A bandeja o local que armazena as peas j criadas que iro compor o
exerccio.
A pea que representa os comandos glPushMatrix() glPopMatrix() poder
receber peas internamente, chamadas de peas filhas. Essas peas filhas
representam os comandos que so circundados pelo comando
glPushMatrix()e glPopMatrix().
Pr-Condio UC01
Cenrio
1. O Usurio deve soltar o boto do mouse para soltar a pea criada em
Principal
qualquer local da bandeja;
2. A aplicao colocar a pea abaixo da ltima j posicionada, caso for a
primeira pea, colocar no topo da bandeja.
Cenrio
1. Se no passo 1 do cenrio principal o Usurio soltar a pea dentro da fbrica,
Alternativo 1
a pea ser removida da bandeja e da lista de peas da bandeja.
Cenrio
1. No passo 1 do cenrio principal o Usurio pode soltar a pea ao lado de
Alternativo 2
outra pea;
2. A aplicao verificar se a pea que est ao lado da nova permite ter peas
filhas;
3. Se permitir, ir adicionar a pea como filha dela em uma lista de peas filhas
e mostrar a mesma encaixada na pea solta;
4. Se a pea j tiver peas filhas, encaixar a nova pea a cima ou abaixo da
atual filha, conforme for posicionada na bandeja;
5. Se no permitir apagar a pea criada.
Ps-Condio O Usurio deve poder visualizar a pea criada no exerccio. Essa pea
corresponde a um dos comandos principais da OpenGL que formaro o cdigofonte posterior.
Ainda, o UC03 mostra como o ator Usurio pode alterar as propriedades dos
comandos da OpenGL. Esses comandos so os representados pelas peas j colocadas na
bandeja. O Quadro 15 apresenta os detalhes do caso de uso.
O UC04 mostra como o ator Usurio pode movimentar e alterar a posio das peas j
colocadas na bandeja. O Quadro 16 apresenta os detalhes do caso de uso.
35
UC03 Alterar propriedades dos comandos da OpenGL
Descrio
Alguns comandos da OpenGL possuem parmetros, como o cubo que possui
sua cor e as transformaes translao, escala e rotao que possuem os valores
de x, y e z a serem transformados. Ao colocar uma pea que representa esses
comandos, o Usurio pode alterar suas propriedades.
Pr-Condio UC02
Cenrio
1. Se colocar uma pea que representa o cubo, o Usurio pode alterar sua cor
Principal
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 Usurio colocar uma pea que represente as transformaes ele
poder alterar os valores de x, y e z utilizando as teclas numricas 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.
Cenrio
1. Se a pea j estiver colocada e o Usurio desejar alterar suas propriedades,
Alternativo
ele deve clicar sobre a pea e ento realizar os passos do cenrio principal.
Exceo
1. Se o Usurio desejar alterar as propriedades de uma pea filha j
posicionada no conseguir, pois no possvel selecionar a pea filha aps
ter clicado em outra.
Ps-Condio Quando for um cubo o Usurio visualizar sua nova cor sobre a prpria pea.
Quando for uma pea de transformao, o Usurio visualizar o valor alterado
na janela de cdigo-fonte, nas posies respectivas de x, y e z.
UC04 Mexer e alterar a posio das peas j criadas e colocadas na bandeja
Descrio
Depois de posicionar a pea no exerccio, o Usurio pode troc-la de posio,
colocando-a em cima, embaixo ou entre uma j colocada.
Pr-Condio UC02
Cenrio
1. O Usurio deve clicar e manter pressionado o boto do mouse sobre a pea
Principal
a ser alterada de lugar;
2. A pea ir se mover na tela conforme o cursor do mouse se movimentar;
3. Quando a pea estiver posicionada ao lado da pea que deseja ser encaixada,
o Usurio deve soltar o boto do mouse;
4. A aplicao realizar comparaes para verificar a posio em que a pea
ser encaixada, coloca-a no lugar, desloca as demais peas para baixo e
atualiza o ndice de todas.
Cenrio
1. Se no item 3 do cenrio principal o Usurio soltar a pea na rea da
Alternativo
fbrica, a pea ser removida e apagada do exerccio.
Exceo
1. Se o Usurio tentar mover uma pea filha no conseguir, pois no
permitido.
Ps-Condio O Usurio deve visualizar a pea movida em seu novo lugar e as demais peas
deslocadas para baixo.
O UC05 mostra como o ator Usurio pode visualizar o cdigo-fonte de uma pea
selecionada, sendo da fbrica ou da bandeja. O Quadro 17 apresenta os detalhes do caso de
uso.
36
UC05 Visualizar cdigo da pea conforme pea selecionada
Descrio
Ao clicar sobre uma pea o Usurio pode visualizar o cdigo-fonte em C++
com OpenGL resultante da montagem da mesma. O Usurio visualizar o
cdigo-fonte na janela cdigo-fonte da pea selecionada.
Pr-Condio Nenhuma
Cenrio
1. O Usurio deve clicar sobre uma pea, sendo da fbrica ou da bandeja;
Principal
2. A aplicao exibir na janela de cdigo-fonte da pea selecionada o
cdigo correspondente a pea (se for da fbrica a pea estar com suas
inicializaes zeradas, se for da bandeja ser exibido o cdigo conforme a
montagem e sua configurao no exerccio).
Cenrio
1. Se o Usurio clicar sobre uma pea que representa os comandos
alternativo
glPushMatrix() glPopMatrix() e dentro da pea tiver peas filhas, ser
exibido o cdigo com as configuraes de cada uma das peas filhas
empilhadas.
Ps-Condio O Usurio deve poder visualizar o cdigo-fonte a partir de um arquivo com
extenso cpp. A partir deste arquivo o Usurio pode entender como funciona
algumas diretivas e comandos do OpenGL e pode execut-lo em um novo
projeto.
O UC06 mostra como o ator Usurio pode salvar o exerccio conforme as peas
colocadas na bandeja. O Quadro 18 apresenta os detalhes do caso de uso.
UC06 Salvar o exerccio
Descrio
Aps disponibilizar as peas sobre a bandeja, o Usurio pode salvar o exerccio
montado para abri-lo posteriormente ou para visualiz-lo na cena em 3D.
Pr-Condio UC02
Cenrio
1. O Usurio deve clicar com o boto direito dentro da bandeja;
Principal
2. A aplicao mostrar um menu;
3. O Usurio deve clicar na opo Gravar exerccio;
4. A operao ir gerar um arquivo texto no diretrio do projeto com o nome
Exercicio.txt com todas as configuraes das peas colocadas na bandeja
e na mesma ordem. Caso o arquivo j exista, o mesmo sobreposto.
Ps-Condio O Usurio deve poder visualizar o arquivo gerado na pasta do projeto com o
nome de Exercicio.txt. E na janela Visualizao do exerccio 3D deve
aparecer a cena em 3D correspondente ao exerccio gravado.
O UC07 mostra como o ator Usurio pode abrir o exerccio j salvo em um arquivo
texto. O Quadro 19 apresenta os detalhes do caso de uso.
UC07 Abrir o exerccio salvo
Descrio
Aps salvar um arquivo com a disposio das peas o Usurio pode abri-lo
novamente, mesmo tendo fechado a aplicao.
Pr-Condio UC06
Cenrio
1. O Usurio deve clicar com o boto direito dentro da bandeja;
Principal
2. A aplicao mostrar um menu;
3. O Usurio deve clicar na opo Abrir exerccio;
4. A aplicao carregar as peas na bandeja na mesma ordem e com as
mesmas configuraes conforme foram gravadas no arquivo.
Ps-Condio O Usurio deve visualizar as peas carregadas na bandeja, conforme foram
salvas, assim como o exerccio em 3D. Deve tambm poder alterar o exerccio
como explicado nos casos de uso anteriores.
37
Por fim, o UC08 mostra como o ator Usurio pode visualizar a cena em 3D gerada
pelas peas do exerccio. O Quadro 20 apresenta os detalhes do caso de uso.
UC08 Visualizar cena 3D
Descrio
Aps salvar um arquivo com a disposio das peas o Usurio pode visualizlo na janela de visualizao do exerccio 3D.
Pr-Condio UC06
Cenrio
1. O Usurio deve abrir o arquivo exerccio, caso no esteja visualizando o
Principal
cenrio em 3D;
2. Na janela Visualizao 3D com cmera exibida a cena 3D
correspondente as peas montadas a partir de um frustum de viso.
Ps-Condio O Usurio deve visualizar o cenrio 3D conforme as peas gravadas no
arquivo. E na janela Visualizao do exerccio 3D aparece a cena vista de
frente.
3.2.2
Diagrama de classes
A Figura 6 representa as classes que compem a aplicao assim como seus

relacionamentos. Na representao, foram colocadas as classes criadas e as que so utilizadas
da biblioteca V-ART, omitindo-se as classes existentes na biblioteca, mas que no so
utilizadas pela aplicao. No diagrama as classes foram divididas em dois pacotes, dessa
forma sabem-se quais so da aplicao e quais so da biblioteca externa. A seguir as classes
so detalhadas, seguindo sua complexidade da menor para a maior. No detalhamento da
modelagem foram omitidos os construtores e funes assessoras (gets()e sets()).
38
Figura 6 Diagrama de classes
O diagrama apresenta cinco classes que pertencem biblioteca V-ART, que so

Point, Point4D, Transform, Color
e BoundingBox. A primeira, Point, possui basicamente
as funes assessoras para atribuir e retornar os trs pontos de um ponto no espao (x, y e z) e
utilizada apenas de modelo para a segunda classe, no podendo ser instanciada. A segunda,
Point4D,
permite ser instanciada e fornece funes 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 funes assessoras. A terceira classe, Transform, disponibiliza funes para realizar
transformaes de escala, rotao e translao sobre uma matriz quadrada 4x4, definida em
um vetor de 16 posies. Alm dessas funes est disponvel a funo para fazer a
identidade da matriz. A quarta classe, Color, basicamente composta por um vetor de quatro
39
dimenses, onde cada dimenso representa uma cor, seguindo o padro Red Green Blue Alpha
(RGBA), suas funes assessoras e construtores. Dessa classe foram utilizadas as cores RGB
para definir a cor das peas e objetos utilizados em toda a aplicao. E a quinta classe
utilizada para pegar os pontos mximo e mnimo em relao aos eixos de uma forma
geomtrica representando sua Bounding Box.
As demais classes presentes no diagrama foram construdas para que a aplicao
pudesse executar suas funcionalidades corretamente. A classe ObjetoGrafico constitui
funes responsveis por desenhar um objeto 2D. A partir dela pode ser definida a cor do
objeto, sua espessura de linha, sua matriz de transformao, seus vrtices, sua primitiva
grfica e seu tipo.
Na classe ObjetoGrafico tambm possvel adicionar peas filhas, nesse caso elas
so armazenados em um vetor de filhos. Para saber quantos filhos j existem no vetor utilizase a varivel de controle quantidade que incrementada a cada novo filho adicionado. Para
realizar esse controle foi utilizada a ideia do grafo de cena (ver seo 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 genrica para qualquer objeto 2D no possvel realizar o desenho
das peas. Dessa forma, definida uma funo do tipo virtual denominada Desenha() que
deve ser implementada por quem a herdar. A classe utilizada tambm na aplicao exemplo
que gera cena 3D, ento foi criada uma classe secundria que herda a ObjetoGrafico
denominada ObjetoGraficoExercicio que possui funes utilizadas somente na AduboGL.
A classe ObjetoGraficoExercicio define se o objeto 2D poder ser pai ou filho
de outra pea, assim como o id que a pea representa no exerccio e sua BoundingBox que
utilizada para saber se foi clicado dentro do objeto ou no. Dentro dela a BoundingBox
calculada conforme o objeto sofre uma transformao, tambm existe uma funo que retorna
a lista dos vrtices com sua transformao. Alm disso, existe a funo que verifica se um
ponto passado como parmetro pertence ao objeto, ou seja, se est dentro dele. Nessa classe a
funo Desenha(), herdada da classe ObjetoGrafico, implementada. Como essa classe
tambm serve para desenhar qualquer forma 2D foram criadas outras duas classes com que
herdam a ObjetoGraficoExercicio, so elas PushPop e Cubo. Essas apenas definem em
seu construtor as caractersticas que cada objeto possui. Na Figura 7 est a representao das
classes ObjetoGrafico e ObjetoGraficoExercicio com suas variveis e funes principais,
40
assim como as classes que a herdam.
Figura 7 Classe ObjetoGrafico com suas heranas
Como a aplicao possui trs peas que representam as transformaes e essas

dependem dos valores de x, y e z para realizar a transformao, foi criada a classe
ObjetoTransformacao
que herda a ObjetoGraficoExercicio e possui simplesmente as trs
variveis de controle. Para representar as trs peas foram criadas as trs classes Escala,
Rotao
e Translao que informam suas particularidades no construtor. Essa relao pode
ser analisada na Figura 8.
Figura 8 Classe ObjetoTransformacao com suas heranas
A classe GravacaoDeArquivo, representada na Figura 9, foi criada para facilitar a

gravao do arquivo que corresponde a modelagem das peas da aplicao. Ela possui as
funes para criar o arquivo; gravar ou adicionar em um arquivo j salvo um vetor de char,
um nico char, uma String ou um nmero; e tambm a funo para finalizar a gravao do
mesmo. Para trabalhar com o arquivo texto foi utilizado o tipo ofstream da linguagem C++.
41
Figura 9 Classe GravacaoDeArquivo
A classe LeituraDeArquivo utilizada para carregar um arquivo texto,

especificamente o arquivo salvo. Ela possui funes para carregar um arquivo texto passado
como parmetro em uma varivel da classe, ler e retornar o contedo lido do arquivo e
finalizar a leitura do mesmo. Sua representao est na Figura 10.
Figura 10 Classe LeituraDeArquivo
Por fim, Principal a classe central da aplicao. Nela so realizadas todas as

interaes da tela, como a criao de peas da fbrica, a colocao das peas na bandeja, a
gravao e leitura do exerccio e a visualizao do cdigo-fonte. A classe possui mtodos para
desenhar cada uma das telas que compem a aplicao, assim como para criar seus menus e
model-la. A Figura 11 representa essa classe, com seus atributos e mtodos principais.
42
Figura 11 Classe Principal
As variveis presentes na classe, em sua maioria, so utilizadas para controles internos.

Os principais exemplos so:
a) ao redimensionar a janela principal, redimensiona as janelas internas;
b) ao soltar um objeto na parte do exerccio, calcula sua altura e o posiciona abaixo da
ltima pea colocada;
c) ao criar uma pea, essa adicionada em um vetor de peas do exerccio aps a
ltima pea colocada;
d) ao trocar os objetos de local, o vetor de peas do exerccio atualizado conforme a
ordem das peas colocadas;
e) ao clicar na janela de peas verificado se foi clicado em uma pea e, se for, esta
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 pea exibido o cdigo-fonte na janela de cdigos
correspondente a pea e suas filhas, quando houver;
h) a cada nova pea seu identificador incrementado e quando a mesma removida o
identificador decrementado e os objetos da lista so atualizados.
3.2.3
Diagrama de estado
O diagrama de estados da Figura 12 mostra os possveis estados e transaes de uma

pea da aplicao.
Figura 12 Diagrama de estados
Como se pode observar, existem trs estados para a pea. O primeiro uma pea ser da
fbrica e a partir dela ser criada tornando-se pea da bandeja, ou ento ser adicionada a uma
pea j existente, tornando-se filha dela. O segundo a pea ser da bandeja e poder ser
excluda da mesma ou ento ser movida por ela. E o terceiro e ltimo estado a pea ser filha,
podendo ser encaixada na pea antecessora e movida conforme sua pea pai movida.
44
3.3
IMPLEMENTAO
Para a implementao da aplicao foi utilizada a linguagem de programao C++, a

biblioteca OpenGL 4.2 (ver seo 2.2) e a biblioteca V-ART (ver seo 2.4). O ambiente de
desenvolvimento escolhido foi o Microsoft Visual C++ 2010 Express. A seguir so mostradas
as tcnicas utilizadas e a operacionalidade da AduboGL. Tambm pode ser encontrado em
Arajo (2012) uma descrio da documentao dos fontes.
3.3.1.1
Controle das peas da AduboGL
A parte fundamental da AduboGL formada por peas que representam uma forma
grfica ou um comando importante da OpenGL para realizar uma interao no espao 3D que
ser gerado pela juno das peas.
Antes de iniciar a modelagem das peas a partir das primitivas grficas da OpenGL
foram feitos croquis de seu formato. Os formatos foram estudados para que pudesse ser
iniciado um trabalho com as formas mais simples de serem modeladas, mas tambm para que
pudessem ser alteradas posteriormente. As peas futuras foram modeladas no Corel Draw e
gravadas no formato PNG, porm no se obteve tempo para substituir as iniciais no presente
trabalho. Os croquis das peas, assim como o resultado das peas finais em PNG podem ser
vistos no Apndice B.
Primeiro trabalhou-se com dois tipos de peas. As peas podem ser observadas na
Figura 13 e so utilizadas para representar o desenho de um cubo e representar os comandos
glPushMatrix() glPopMatrix()(ver
seo 2.2.4), respectivamente. As peas foram
desenhadas para permitir seu encaixe, gerando assim peas filhas. Isso porque ao aplicar uma
transformao em um cubo e coloc-lo entre um comando glPushMatrix() glPopMatrix()
a transformao passa a ser unicamente das peas dentro do bloco. J se a pea a sofrer a
transformao estiver fora dos comandos, ao transform-la, transformar as demais peas fora
do bloco.
45
Figura 13 Peas glPushMatrix(), glPopMatrix() e cubo
Para as transformaes, foram criadas trs novas peas semelhantes pea

correspondente ao cubo, porm de outra cor para distingui-las. A pea correspondente a
translao foi desenhada na cor marrom, a correspondente a rotao em um tom verde musgo
e a escala em um tom de roxo. No foram escolhidas as cores bases do RGB, pois por ter a
mesma forma que o cubo, ao alterar a cor dele, essas peas seriam confundidas. Alm da cor,
apresentada a letra inicial da transformao ao lado da pea, para que o usurio possa
entender qual seu significado. As peas podem ser vistas na Figura 14.
Figura 14 Peas que representam as transformaes
As peas podem pertencer fbrica, bandeja do exerccio ou ainda, quando no for

do tipo glPushMatrix() glPopMatrix(), podem ser filha de uma pea do tipo
glPushMatrix() glPopMatrix()
que est na bandeja. A classe para a pea a mesma para
os cinco tipos, denominada objetoGraficoExercicio, o que as diferencia o local onde a

mesma est adicionada na classe Principal e suas caractersticas como cor e tipo.
Na classe Principal existem dois vetores. O primeiro armazena todas as peas
representadas na fbrica e o segundo possui aquelas peas que j foram colocadas na bandeja,
na ordem em que esto posicionadas na tela. Por sua vez, cada pea do exerccio tem um vetor
de objetos para armazenar os seus filhos. Os vetores presentes na AduboGL podem ser
observados no Quadro 21. Nota-se uma semelhana com o grafo de cena (ver seo 2.3), pois
uma estrutura onde acontece a relao entre pai e filho. Dessa forma, ao aplicar uma
transformao no objeto antecessor, essa repassada para todos os seus sucessores. Por outro
lado, se a transformao for aplicada no sucessor, no interferir na pea antecessora.
46
Quadro 21 Estrutura das peas na AduboGL
Para que a pea da fbrica possa ser levada para a bandeja e as peas da bandeja
possam ser arrastadas, desenvolveu-se uma rotina que retorna o identificador da pea clicada.
Sempre que clicada em uma parte da tela correspondente a fbrica ou a bandeja chamada
uma funo que percorre cada uma das trs listas da AduboGL. Ento verificado se foi
clicado dentro da pea a partir dos pontos de sua BoundingBox. Se com a anlise percebe-se
que foi clicado dentro da BoundingBox passado o algoritmo da ScanLine para verificar se o
ponto clicado est tambm dentro da pea (a anlise da BoundingBox e do algoritmo da
ScanLine pode ser observado na Figura 15).
Figura 15 Anlise do clique sobre uma pea
O algoritmo da ScanLine verifica se os segmentos de reta do objeto se interseccionam

com a reta da ScanLine. Para cada ponto de interseco somado 1 a uma varivel que foi
iniciada com 0. Se a soma for par porque foi clicado fora do objeto e se for mpar foi clicado
dentro. Isso necessrio porque existe a pea correspondente ao glPushMatrix()
47
glPopMatrix()
que uma pea cncava. Por fim retornado o id da pea selecionada ou -1
caso no tenha sido clicado em alguma pea. Sabe-se que uma pea da fbrica quando o id
retornado for menor do que 10, pois foi o nmero estipulado de elementos para ela, e, se for
maior, porque foi um objeto da bandeja, podendo ser filho de outra pea. O trecho de cdigo
que realiza a varredura das peas colocadas na bandeja e na fbrica e chama as funes para
verificar a BoundingBox e a ScanLine pode ser analisado no Quadro 22.
GLint getIdPecaClicada(int x, int y)
{
GLint indice = -1;
const Point4D mousePto(x,y,0);
for (int i = 1; i < MAX_GABARITO; i++) {
if(listaFabrica[i] != NULL) {
if (listaFabrica[i]->GetBoundingBox()->testPoint(mousePto)) {
//scanline:
const Point4D p = *new Point4D(x, y, 0);
bool s = listaFabrica[i]->PontoNoObjeto(p, listaFabrica[i]);
if (s) {
return listaFabrica[i]->GetId();
}
}
} else {
break;
}
}
for (int i = MAX_GABARITO; i < 255; i++) {
if(listaBandeja[i] != NULL) {
if (listaBandeja[i]->GetBoundingBox()->testPoint(mousePto)) {
//scanline:
bool s = listaBandeja[i]->PontoNoObjeto(mousePto, listaBandeja[i]);
if (s) {
return listaBandeja[i]->GetId();
}
for (int j = 0; j < listaBandeja[i]->GetQuantidade(); j++) {
ObjetoGraficoExercicio *filho =
static_cast<ObjetoGraficoExercicio*>(
listaBandeja[i]->GetFilho(j));
if (filho != NULL) {
if (filho->GetBoundingBox()->testPoint(mousePto)) {
//scanline:
s = filho->PontoNoObjeto(mousePto, filho);
if (s) {
return filho->GetId();
} // seno est fora da boudingbox
}
}
// ...cdigo...
return indice;
}
Quadro 22 - Trecho de cdigo que retorna identificador da pea clicada
Quando adicionada a primeira pea na bandeja, essa, por sua vez, adicionada no
vetor de peas da bandeja na posio correspondente ao seu ndice, lembrando que esse vetor
possui as primeiras posies reservadas, pois elas identificam os ndices das peas da fbrica.
48
Tem-se assim o id da pea correspondente ao ndice da posio em que ela est adicionada no
vetor. Desse modo, para capturar a pea clicada do exerccio, tambm trabalhado o
identificador em conjunto com a posio do vetor. No Quadro 23 podem-se notar as posies
que so ocupadas no vetor da bandeja e sua relao com o identificador da pea. possvel
alocar no mximo 255 peas no vetor, o valor correspondente a um byte, pois no se achou
necessria a criao de mais peas em um mesmo exerccio.
Quadro 23 Representao do vetor do exerccio com relao ao id da pea
Na classe principal, quando o boto do mouse solto validada a posio em que a

pea solta. De acordo com o estado da pea definido pela posio em que ela colocada
acontecer uma ao a ela (Figura 12). Se a pea for colocada dentro da fbrica a pea
apagada e removida do exerccio. Se for colocada abaixo de todas, esta reposicionada
abaixo da ltima pea j colocada na bandeja. Isso ocorre tanto para uma nova pea quanto
para uma j existente na bandeja. Esse processo pode ser analisado na Figura 16. Para realizar
o procedimento calculada a altura das peas j colocadas e ento a pea transladada com
base nos valores em y e x deslocados. O trecho de cdigo correspondente ao
reposicionamento da pea solta pode ser visto no Quadro 24.
Figura 16 Deslocamento da pea dentro da bandeja
49
void pecas2D_mouse(int button, int state, int x, int y)
{ //...cdigo...
if (xTrans > sub_largura || yTrans <= alturaLinha) { //dentro da fbrica
atualizaAlturaPecas();
} else if (yTrans > alturaY) {//abaixo das outras peas, coloca para cima
if (!pecaexercicio) { //pea nova veio da fbrica
GLfloat difX = xTrans - pontoAlto.GetX() + espacoBorda;
GLfloat difY = yTrans - alturaY;
transAux.MakeTranslation(Point4D(-difX, -difY, 0));
clicado->SetMatrizTransformacao(transAux *
clicado->GetMatrizTransformacao());
alturaY += (pontoBaixo.GetY() - pontoAlto.GetY());
} else {
// pea da bandeja que foi colocada para baixo, atualiza a posio de
//todas as demais, e adiciona ela ao fim de tudo!
ObjetoGraficoExercicio *objAlterado = clicado;
atualizaAlturaPecas();
objAlterado->SetId(idPecaExercicio);
GLfloat difX = xTrans - pontoAlto.GetX() + espacoBorda;
GLfloat difY = yTrans - alturaY;
transAux.MakeTranslation(Point4D(-difX, -difY, 0));
objAlterado->SetMatrizTransformacao(transAux *
objAlterado->GetMatrizTransformacao());
alturaY += (pontoBaixo.GetY() - pontoAlto.GetY());
listaBandeja[idPecaExercicio] = objAlterado;
idPecaExercicio++;
}
}
//...cdigo...
}
Quadro 24 Trecho de cdigo correspondente ao reposicionamento da pea colocada
Se a pea foi criada e colocada no exerccio ao lado das demais, ou seja, em uma linha
horizontal, feita a validao para ver se uma pea filha e ento removida da lista de
exerccio e adicionada na lista de filhas da pea. A adio do filho pode ser analisado no
Quadro 25.
void pecas2D_mouse(int button, int state, int x, int y)
{
//...cdigo...
if (idPecaFilho > idPecaExercicio) {
clicado->SetId(idPecaFilho);
idPecaFilho--;
}
if (!cima)
obj->AdicionaFilho(clicado);
else
obj->InserirPrimeiraPosicaoFilho(clicado);
//...cdigo...
}
Quadro 25 Insero de pea filha a uma pea do exerccio
Quando uma pea adicionada como filha de outra, realizado um clculo para
descobrir qual ser sua pea antecessora. Para isso a lista percorrida at ser encontrada a
pea que est ao lado da posicionada. Ao pegar a futura antecessora, calculada a altura da
pea e sua largura para ento realizar o encaixe. Esse clculo feito a partir dos pontos da
50
pea capturados da lista de pontos. Ento, a pea filha colocada no ponto de origem e em
seguida ela transladada conforme a largura da pea pai e sua altura em relao ao cenrio.
Esse processo pode ser verificado na Figura 17.
Se a pea antecessora j possuir peas filhas, ela tambm modificada. Nesse caso,
calculada tambm a altura da pea sucessora, para ser acrescentada na altura da pea pai. Essa
altura calculada acrescentada em cada y dos vrtices da parte inferior da pea pai. Assim a
pea fica maior e permite o encaixe do prximo filho. Para o prximo filho tambm
acrescida sua altura na translao em y. O filho pode ser inserido na primeira posio, se a
pea estiver no incio da antecessora, ou na ltima posio. Essa interao pode ser analisada
na Figura 18.
Figura 17 Deslocamento de uma pea filha
51
Figura 18 Deslocamento das peas para mais de um filho
Se uma pea que j est na bandeja for colocada ao lado de outra pea da bandeja, a
primeira inserida a cima ou abaixo da segunda pea conforme a posio colocada. Para
encontrar a pea horizontal feito o mesmo clculo realizado para encontrar a pea pai de
uma filha. Ao inserir uma pea acima de outra, a pea que est embaixo ser transladada em y
a altura da pea que foi adicionada a cima. Isso ocorrer para todas as peas abaixo da pea
transladada.
3.3.1.2
Visualizao do cdigo-fonte das peas
Como cada pea representa um comando da OpenGL ou um cdigo-fonte que alterar

a matriz de transformao, ao clicar sobre uma pea verificado o tipo dela e ento escrito o
cdigo-fonte com a funo desenhaTexto() na janela especfica. A janela de cdigo-fonte
redesenhada cada vez que for clicado em uma pea, ou quando for alterada as propriedades de
uma pea, como a cor ou as coordenadas x, y e z das transformaes.
Para fazer o agrupamento de cdigos, a funo escreveCodigo() chamada
52
recursivamente dentro de uma pea do tipo glPushMatrix() glPopMatrix() para cada um
de seus filhos. Assim o comando s finalizado no ltimo filho encontrado. Pode observar
um trecho da funo escreveCodigo() no Quadro 26.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
int escreveCodigo(ObjetoGraficoExercicio *obj, int x, int y)

{
switch (obj->getTipo()) {
case 'c': {
y += TAMANHO_LINHA;
desenhaTexto(x, y, (char *)"SetMatrizTransformacao
(GetMatrizTransformacao() * matrizAcumulada);");
y += TAMANHO_LINHA;
if (obj->GetCor()->GetR() == 255)
desenhaTexto(x, y, (char *)"glColor3f(255, 0, 0);");
//...cdigo...
desenhaTexto(x, y, (char*) "glLineWidth(GetEspessura());");
y+= TAMANHO_LINHA;
desenhaTexto(x, y, (char*)"glMultMatrixd(GetMatrizTransformacao().
GetData());");
y += TAMANHO_LINHA;
desenhaTexto(x, y, (char*) "glutSolidCube(1.0f);");
if (final)
y = TAMANHO_LINHA;
return y;
}
case 'e': {
char cx[16], cy[16] , cz[16];
ObjetoTransformacao *objTrans = static_cast<ObjetoTransformacao*> (obj);
//...cdigo...
desenhaTexto(x, y, (char*)"matrizAux.MakeScale(");
x += 125;
desenhaTexto(x, y, cx);
x += 25;
desenhaTexto(x, y, (char*)", ");
x+= 20;
//...cdigo...
desenhaTexto(x, y, (char*)"matrizAcumulada = matrizAcumulada *
matrizAux;");
if (final)
y = TAMANHO_LINHA;
return y;
}
case 't': //...cdigo...
case 'r': //...cdigo...
case 'p':
y += TAMANHO_LINHA;
desenhaTexto(x, y, (char*)"glPushMatrix();");
final = false;
for (int i = 0; i < obj->GetQuantidade(); i++) {
ObjetoGraficoExercicio *filho = static_cast<ObjetoGraficoExercicio*>
(obj->GetFilho(i));
y = escreveCodigo(filho, x, y);
}
y += TAMANHO_LINHA;
desenhaTexto(x, y, (char*)"glPopMatrix();");
final = true;
y = TAMANHO_LINHA;
return y;
}
}
Quadro 26 - Trecho da funo escreveCodigo()
53
Analisando o cdigo, conforme a linha 3 verificado o tipo da pea selecionada, ento
executada a parte do cdigo interna ao comando case conforme o tipo selecionado. Como
exemplo, a partir da linha 4 at a linha 21 realizado a construo do cdigo para a pea que
representa o cubo.
O texto do cdigo-fonte sempre alinhado nos eixos x e y, logo, a varivel y controla a
altura em que o texto est sendo escrito dentro da janela de cdigo-fonte e a varivel x a
distncia com relao a margem. A funo desenhaTexto()escreve nas posies x e y um
texto passado como parmetro dentro da janela de cdigo-fonte. Sempre aps escrever todo o
texto de cdigo, a varivel y volta a ser inicializada para que o prximo cdigo a ser escrito
inicie tambm na borda da janela.
Para desenvolver o cdigo do comando do empilhamento de matrizes, como visto na
linha 45, feito um lao de repetio para percorrer todas as peas filhas. Para cada pea filha
chamada recursivamente a funo escreveCodigo(). Assim, o cdigo de cada pea interna
escrita e somente por fim finalizado o comando do empilhamento com o comando
glPopMatrix()
3.3.1.3
presente na linha 51.
Visualizao do cenrio 3D a partir das peas colocadas
A colocao das peas do exerccio realizada em um plano 2D para ento gerar os

objetos grficos em um espao 3D conforme a ordem em que essas peas so colocadas (ver
seo 2.2.2). disponibilizado um cdigo de exemplo em C++ com OpenGL para que o
usurio possa analis-lo e estudar como construir um espao com objetos da OpenGL.
O cdigo exemplo necessita da configurao das peas colocadas na bandeja. Essa
configurao gravada em um arquivo texto a partir da classe gravarArquivoTexto que foi
desenvolvida utilizando o tipo ofstream do C++. A funo mais utilizada da classe foi a
gravarString
que tem como parmetro o texto a ser adicionado no arquivo (ver Quadro 27).
void GravacaoDeArquivo::gravarString(std::string texto)
{
*arquivo << texto << std::endl;
}
Quadro 27 Funo adicionarTexto da classe arquivoTexto
Essa funo e as funes criarArquivo e finalizar so chamadas na classe

Principal,
quando o usurio clica na opo gravar exerccio sobre a bandeja. O cdigo
gerado armazena apenas as configuraes das peas e suas propriedades na ordem em que
54
esto adicionadas no exerccio.
Para gravar as peas na bandeja e suas configuraes foram criadas duas funes, a
gravarObjetos()
que percorre a lista principal e grava os itens da pea a partir da segunda
funo gravarItens(). E em seguida percorre a lista de filhos, quando houver, tambm

chamando a funo gravarItens() para gravar suas particularidades. As duas funes
podem ser analisadas nos Quadros Quadro 28 e Quadro 29, respectivamente.
void gravarObjetos(GravacaoDeArquivo arquivo)
{
for (int i = MAX_GABARITO; i < 255; i++) { //percorre peas da fbrica
gravarItens(arquivo, listaBandeja[i]);
if (listaBandeja[i] != NULL) {
for (int j = 0; j < listaBandeja[i]->GetQuantidade(); j++) {
//percorre peas filhas quando h
gravarItens(arquivo, static_cast<ObjetoGraficoExercicio*>
(listaBandeja[i]->GetFilho(j)));
}
}
}
}
Quadro 28 Cdigo para salvar as peas do exerccio

void gravarItens(GravacaoDeArquivo arquivo, ObjetoGraficoExercicio *obj)
{
if (obj != NULL) {
arquivo.gravar(obj->getTipo()); //grava tipo
arquivo.gravarNumero(obj->GetListaPontos().at(0).GetY()); //grava ponto mais
//baixo
arquivo.gravarNumero(obj->GetListaPontos().at(1).GetY());//grava ponto mais
//alto
//grava cores:
arquivo.gravarNumero(obj->GetCor()->GetR());
arquivo.gravarNumero(obj->GetCor()->GetG());
arquivo.gravarNumero(obj->GetCor()->GetB());
arquivo.gravarNumero(obj->GetId());
//grava a translao em x e y:
Point4D *p = new Point4D();
obj->GetMatrizTransformacao().GetTranslation(p);
std::string str = para_string(p->GetX());
arquivo.gravarString(str);
str = para_strin(p->GetY());
str = para_string(obj->GetEspessura());
arquivo.gravarString(str); //grava espessura
str = para_string(obj->GetQuantidade());
arquivo.gravarString(str); //grava quantidade de filhos
//grava a transformao do objeto a partir dos pontos x, y e z:
ObjetoTransformacao *objTrans = static_cast<ObjetoTransformacao*> (obj);
str = para_string(objTrans->getX());
str = para_string(objTrans->getY());
str = para_string(objTrans->getZ());
}
}
Quadro 29 Cdigo para salvar as particularidades de cada pea
55
Ao executar a aplicao exemplo, essa l o arquivo com as configuraes das peas e
monta o cenrio 3D. Esse cenrio carrega as transformaes e peas conforme a realizao do
exerccio na AduboGL. A aplicao exemplo utiliza algumas das classes da AduboGL para
modelar os objetos criados, assim como para ler o arquivo.
3.3.2
Operacionalidade da implementao
A operacionalidade da aplicao apresentada a partir de imagens que mostram as

funcionalidades e os casos de uso. So exibidas imagens tanto da AduboGL quanto da
aplicao exemplo, que mostra o cenrio 3D executado a partir das peas encaixadas.
Ao iniciar a aplicao aberta a tela que pode ser vista na Figura 19 que dividida em
4 sub janelas. A primeira janela (esquerda), por sua vez, dividida em duas partes, onde a
primeira a fbrica e a segunda a bandeja. A parte da fbrica apresenta as possveis peas a
serem utilizadas no desenvolvimento do exerccio e a bandeja usada para a montagem do
exerccio. A segunda janela a de cdigo-fonte que corresponde ao cdigo da pea
selecionada, sendo da fbrica ou da bandeja. As outras duas telas so utilizadas para a
apresentao da cena em 3D, resultante do exerccio montado.
Figura 19 Tela da AduboGL
A interao que o usurio da aplicao far ser sobre a janela de fbrica e bandeja. As
demais janelas so apenas visuais, para que o mesmo possa ver o resultado de seu exerccio.
56
3.3.2.1
Desenvolvendo um exerccio na AduboGL
Nesta seo mostrado passo a passo como um exerccio pode ser resolvido usando da
AduboGL. O exerccio a ser resolvido est descrito no Apndice A e trata da gerao de uma
cena 3D com trs cubos transformados.
Como o primeiro cubo para estar na origem da cena e no sofre nenhuma
transformao, a primeira pea a ser colocada deve ser a que representa o cubo, conforme a
Figura 20. Para colocar o cubo na bandeja, deve-se clicar sobre a pea correspondente na
fbrica e arrast-la para a bandeja. Ao realizar isso possvel visualizar o cdigo
correspondente ao cubo 3D na janela de cdigo-fonte. Observa-se que a matriz de
transformao multiplicada pela matriz acumulada, para realizar as transformaes quando
houver alguma. Nesse caso, no h transformaes ainda, ento a matriz acumulada ser uma
matriz identidade. Pode-se notar tambm que a cor do cubo ser azul e o mesmo ser
desenhado com arestas de uma unidade.
Figura 20 Insero de um cubo na origem da cena
O segundo objeto a ser colocado na cena 3D um cubo transladado. Como a

translao ser somente do segundo cubo, deve-se colocar uma pea do tipo glPushMatrix()
glPopMatrix()
para encapsular a transformao a ser realizada. Para colocar a pea, a
mesma deve ser arrastada da fbrica at abaixo da ltima pea colocada na bandeja. Aps
colocar a pea amarela, que representa esse comando, deve-se colocar a pea correspondente
a translao na linha horizontal ao comando glPushMatrix() glPopMatrix(). Isso far com
que a translao seja encaixada tornando-se filha do primeiro comando colocado. O processo
pode ser acompanhado na Figura 21. Ao adicionar uma pea filha dentro de outra pea, essa
deve vir da fbrica. Caso venha da prpria bandeja, as peas apenas so alteradas de posio.
57
Figura 21 Insero de pea glPushMatrix() glPopMatrix() com uma translao interna
Observa-se no quadro de cdigo-fonte (Figura 21) da translao que os valores a serem

transladados em x, y e z esto zerados. Logo, os valores devem ser alterados a partir das
teclas numricas de 1 a 6. As teclas 1 e 2 aumentam e diminuem o valor do eixo x, as 3 e 4
aumentam e diminuem o valor do eixo y e a 5 e 6 aumentam e diminuem o valor do eixo z,
respectivamente. Deve-se clicar quatro vezes na tecla 2 e cinco vezes na tecla 4 para que a
prxima pea seja transladada 4 unidades em x e 5 em y, lembrando que antes deve ter sido
clicado na pea da translao. O cdigo-fonte da pea dever ficar como mostrado na Figura
22.
Figura 22 - Cdigo-fonte alterado da pea translao
Aps a alterao dos valores a serem transladados pode-se colocar a pea que
representa o cubo. Essa deve ser posicionada ao lado do comando glPushMatrix()
glPopMatrix(),
porm abaixo da pea (translao) que j filha. Assim a translao
aplicada ao cubo. As peas dentro de uma pea pai no podem ser trocadas de lugar, apenas as
peas antecessoras podem. Assim, caso tenha colocado a pea no local errado, deve-se
remover o pai de todas as peas e ento adicion-lo novamente. Para remover a pea pai,
deve-se clicar sobre ela e arrast-la at a rea da fbrica. Com o cubo encaixado e
selecionado, como ele deve ser na cor verde, deve ser pressionada a tecla G. Dessa forma, a
pea ser colorida na cor verde e o cdigo ser alterado. Ao clicar na pea pai da
transformao e do cubo visualizado o cdigo geral na janela de cdigo-fonte. A insero e
modificao da pea cubo assim como o cdigo da pea pai podem ser visto na Figura 23.
58
Figura 23 Pea com duas sucessoras e visualizao de seu cdigo-fonte
Nota-se que realizado o comando glPushMatrix() para encapsular as

transformaes e em seguida feito o comando makeTranslation da matriz de
transformao para ser colocada na matriz acumulada. Esse comando recebe os valores de x,
y e z aplicados na pea correspondente a translao colocada no exerccio. Aps, a matriz
acumulada multiplicada pela matriz corrente, que a matriz do cubo, setada a cor do cubo
que foi modificada para verde e ento o cubo desenhado. Por fim, utiliza-se o comando
glPoMatrix()
para desempilhar a matriz de transformao.
A ltima pea a ser colocada na cena 3D um cubo na cor vermelha com as trs
transformaes. Para isso deve ser colocada novamente uma pea do tipo glPushMatrix()
glPopMatrix().
A pea deve conter quatro filhos, sendo eles uma pea do tipo escala, outra
do tipo rotao, outra do tipo translao e por fim a pea do tipo cubo. As peas devem ser
colocadas uma por vez ao lado da pea glPushMatrix() glPopMatrix() e abaixo da pea
anterior, caso a mesma j tenha algum filho. Pode-se colocar todas as peas para depois fazer
a modificao de suas propriedades ou conforme cada pea colocada a propriedade pode ser
alterada. O importante ter sempre selecionada a pea antes de aplicar a alterao da
propriedade. Lembra-se que para realizar as modificaes nos eixos x, y e z deve-se utilizar as
teclas de 1 a 6 e para colorir o cubo de vermelho deve ser pressionada a tecla R. Aps a
construo pode ser clicada sobre a pea antecessora das quatro para visualizar o cdigo
completo do terceiro cubo. A Figura 24 exibe a formao das peas para a resoluo do
exerccio, assim como o cdigo correspondente ao ltimo cubo.
59
Figura 24 Visualizao da resoluo do exerccio assim como o cdigo do ltimo cubo
Na janela de cdigo-fonte pode ser visto que o comando glPushMatrix()

glPopMatrix()circundam
as transformaes realizadas sobre o cubo, assim como a funo
que o desenha. Assim, as transformaes sero aplicadas somente a essa pea. Tambm pode
ser notado que cada transformao aplicada sobre uma matriz auxiliar a partir dos valores
das coordenadas indicadas nas peas e ento multiplicada pela matriz acumulada. Sempre
que realizado um comando de transformao, a matriz recebe sua identidade e ento calcula
a transformao com base no ponto de origem. Logo, necessrio ter uma matriz auxiliar para
no perder as transformaes realizadas sobre o objeto. Depois de calculada a transformao
com base na origem, essa deve ser passada para uma matriz que acumula todas as
transformaes a serem aplicadas sobre o objeto. Isso feito a partir da multiplicao da
matriz auxiliar com a matriz acumulada. Assim, quando a matriz do cubo for multiplicada
pela matriz acumulada, ela ter todas as transformaes realizadas para aplicar na pea. E
assim a primeira parte do exerccio finalizada.
O cdigo-fonte apresentado na janela cdigo-fonte durante a realizao do exerccio
tambm utilizado para exibir a cena gerada em 3D. Logo, pode-se observar a cena em 3D para
a primeira parte do exerccio ao salv-lo (Figura 24). O exerccio gravado clicando-se com o
boto direito do mouse sobre a bandeja e em seguida no menu gravar exerccio. Um arquivo
Exercicio.txt gerado na pasta do projeto. A aplicao ler o arquivo e carregar a cena 3D
conforme apresentado na Figura 25. Essa cena carregada de duas formas, uma a partir da
viso de uma cmera e outra vista de frente, assim o usurio pode analisar o cenrio em
formas diferentes. Os trs cubos montados a partir do plano 2D na AduboGL visualizado em
um espao 3D com suas transformaes.
60
Figura 25 Aplicao exemplo executando exerccio gerado
Aps a visualizao da cena em 3D pode ser feita a segunda parte do exerccio. Nessa
parte a cena toda deve ser transladada em quatro unidades para x. Para isso, deve-se abrir
novamente o exerccio caso tenha fechado, clicando com o boto direito na bandeja e em
seguida no menu abrir exerccio.
Com o exerccio carregado, pode ser realizada a modificao sobre ele. Como toda a
cena dever ser transladada, deve ser colocada uma pea translao. Lembra-se que para ela
no ser removida do exerccio, a primeira vez ela deve ser posicionada abaixo de todas j
colocadas, como mostra a Figura 26.
Figura 26 Insero de pea translao
Aps a pea colocada, pode-se alterar o valor x a ser transladado pressionando a tecla
numrica 2 quatro vezes. Para que a translao seja sobre toda a cena, ela deve ser
posicionada por primeiro, sobre todas as demais peas. Deve-se clicar sobre a pea a ser
movida e arrast-la at o topo da bandeja para solt-la. Assim a pea ir ocupar a primeira
posio da bandeja. O resultado observado na Figura 27.
61
Figura 27 Reposio da pea translao
Feita a alterao no exerccio, pode-se salv-lo. A nova cena 3D ser a mesma da

anterior, porm deslocada no eixo x, conforme visto na Figura 28. Assim o exerccio
concludo.
Figura 28 Cena 3D resultante do exerccio
3.4
RESULTADOS E DISCUSSO
Para analisar a aplicao foram realizados os testes de performance e usabilidade. Os

resultados obtidos por cada um dos testes pode ser visto nas sees 3.4.1 e 3.4.2.
62
3.4.1
Resultados obtidos na anlise de performance
Para realizar o teste de performance a funo NOW() do framework V-ART foi

chamada em pontos estratgicos. Essa funo retorna a hora atual. Para calcular o tempo que
uma determinada tarefa levou para ser executada foram subtrados dois tempos. Um capturado
no incio da tarefa e outro capturado no trmino. A partir da subtrao dos dois tempos, podese obter o intervalo de tempo que a aplicao levou para apresentar um resultado grfico na
tela.
O primeiro tempo obtido refere-se ao deslocamento que uma pea faz aps ser
colocada na bandeja. O tempo retornado foi de 0,005 milissegundos.
O segundo tempo obtido foi da adio de filhos em uma pea. O tempo inicial para
calcular o intervalo foi determinado quando o algoritmo comeou a encontrar a pea pai e o
tempo final foi aps a adio da pea filho. Para obter vrios intervalos, foram colocadas
cinco peas sucessivas para uma mesma pea. E duas peas sucessoras em uma segunda pea.
Os valores em segundos podem ser observados no Quadro 30.
Pea
Pea
Pea
Pea
Pea
Pea
Pea
1
2
3
4
5
6
7
0,029
0,041
0,049
0,049
0,053
0,023
0,041
ms
ms
ms
ms
ms
ms
ms
Quadro 30 Tempo para adicionar uma pea filho a uma pea pai
Pode-se notar que o tempo aumenta conforme so adicionados os filhos na pea, pois a
cada novo filho sobre a mesma pea, realizado um clculo para verificar qual ser a posio
do filho. E ainda, se esse for adicionado como primeiro filho da pea, os demais so
deslocados para baixo.
O terceiro e ltimo tempo obtido foi ao alterar os valores de x, y e z em uma
transformao. O tempo inicial para calcular o intervalo foi no momento em que a tecla
pressionada e o tempo final aps a alterao do texto na janela de cdigo-fonte. Foram feitas
alteraes de vrios eixos e de transformaes diferentes, obtendo-se uma mdia de 0,010
milissegundos.
No grfico representado pela Figura 29 tem-se uma comparao entre as mdias de
tempos obtidas.
63
Figura 29 - Grfico de mdia de tempos
A partir dos tempos obtidos, pode-se notar que conforme aumenta a complexidade da
ao e a quantidade de peas a serem comparadas no cdigo, maior o consumo de tempo.
3.4.2
Resultados obtidos na anlise de usabilidade
Como no foi possvel aplicar em uma sala de aula, da maneira como um software
educativo deveria ser analisado, foram escolhidos alunos 10 alunos de diversos semestres dos
cursos de Cincia da Computao e Sistemas de Informao para realizar o teste. Seis alunos
j haviam cursado a disciplina de Computao Grfica, porm os outros quatro ainda no.
Logo, para avaliar a usabilidade da aplicao foi criado um exerccio (ver Apndice A)
e solicitado para esses alunos o realizarem. Como um SE possui relao direta entre professor,
aplicao, aluno, foi realizada uma explicao de como utilizar a AduboGL e como a mesma
funcionada, antes de o entrevistado iniciar o teste, sendo esse o papel do professor.
Para os que no cursaram a disciplina foi informado que para as transformaes serem
acumuladas a um objeto, essas devem estar dentro de um comando glPushMatrix()
glPopMatrix()
e que devem estar acima do objeto a ser transformado.
Aps a realizao do exerccio foi solicitado para os alunos responderem a um

questionrio de cinco perguntas. Essas perguntas tem por objetivo saber o que os mesmo
acharam sobre o uso da aplicao e se ela auxiliou ao entendimento das transformaes sobre
os objetos grfico. As perguntas podem ser vistas no Quadro 31.
64
1.
2.
3.
4.
5.
O que voc achou do layout do aplicativo? O tamanho das janelas est bom?
Qual foi a dificuldade encontrada para realizar o exerccio?
O cdigo-fonte visualizado na janela de cdigo legvel e fcil de compreender?
O aplicativo ajudou no entendimento de transformaes? Por qu?
Quais so suas sugestes de melhoria para o aplicativo?
Quadro 31 - Formulrio de perguntas aos usurios da aplicao
Quase todos os alunos entrevistados conseguiram realizar o exerccio, porm a partir

das respostas pode-se observar que aqueles que no cursaram a disciplina de Computao
Grfica ainda tiveram um pouco de dificuldade em entender a funcionalidade e a ordem em
que as peas devem ser colocadas.
Quanto ao layout do aplicativo, a maioria achou bom, intuitivo e ldico. E tambm
acharam adequado o tamanho das janelas. Alguns comentaram que seria melhor aumentar um
pouco a letra da janela de cdigo-fonte e um entrevistado comentou que a cada comando
deveria ter uma representao grfica diferente.
Com relao janela de cdigo-fonte, aqueles que j cursaram a disciplina informaram
que legvel, fcil de entender e permite ver o cdigo gerado a partir das peas empilhadas. J
aqueles que no cursaram a matria sugeriram criar um material explicando o significado das
variveis e tiveram um pouco de dificuldade para compreender, embora comentassem ter o
achado simples.
Os entrevistados indicaram que a aplicao ajuda no entendimento das transformaes
aplicadas sobre uma pea, pois podem ver os valores da matriz de transformao e como elas
esto sendo aplicadas. Tambm informaram que conseguem ver facilmente a ordem em que
os comandos so executados na pilha, pois est em uma forma didtica. Outro ponto citado foi
a simplificao do cdigo OpenGL que normalmente tende a ser complexo.
Como melhorias, foi apontado que deveria ter um tutorial ou manual ensinando a
utilizar a aplicao. Tambm foi registrado que poderia ter uma forma de visualizar o cenrio
3D em diferentes ngulos. A partir dessas melhorias apontadas, observou-se que a maioria
delas era um objetivo especfico ou um RF que foi alterado para as extenses do trabalho (ver
seo 4.1). Um entrevistado que no cursou a disciplina informou que devia ser trocado o
nome de translao para move. Porm, optou-se por manter o nome para que o aluno
associasse o nome matriz utilizada na transformao geomtrica e no s funcionalidades de
uma aplicao grfica.
65
3.4.3
Consideraes gerais
O presente trabalho teve como objetivo inicial o desenvolvimento de um framework,

porm a aplicao desenvolvida ainda no se enquadra nesse conceito, apesar desse trabalho
j disponibilizar alguns trechos de cdigo para o desenvolvedor. Resolveu-se ento identificala como aplicao.
Para que o aluno pudesse aprender os conceitos da Computao Grfica de forma mais
simplificada seria necessrio disponibilizar alm de um framework um ambiente onde o aluno
pudesse treinar e trabalhar as funes disponveis nele. Como no havia tempo hbil para o
desenvolvimento dos dois, o framework e a aplicao, foi decidido focar no desenvolvimento
da aplicao.
Logo, o segundo objetivo especfico que era a disponibilizao de um tutorial
utilizando o framework chegou mais perto do novo objetivo principal, pois este era
desenvolver uma aplicao que permitisse o estudo da computao grfica a partir da
biblioteca OpenGL e que utilizasse a linguagem C++ como base. E esse conceito foi utilizado
para o desenvolvimento da aplicao resultante, a qual permite que o aluno trabalhe com
diversos conceitos da biblioteca OpenGL com base na linguagem de programao C++.
Como o trabalho no seguiu a linha do framework algumas funcionalidades no
puderam ser implementadas, como permitir que o usurio do framework utilize as funes
definidas em seu programa e permitir que a partir das funes criadas sejam adicionadas
novas funes. Porm, pode-se afirmar que como a aplicao desenvolvida de cdigo
aberto, o usurio pode pegar funes prontas para reaproveitar em seu cdigo. Outro fator
que como existe a janela de cdigo-fonte, o cdigo apresentado por ela tambm pode ser
utilizado pelo usurio em suas aplicaes. Nesse caso, o usurio pode montar o exerccio na
aplicao, visualizar se a cena resultante era o esperado e analisar o cdigo-fonte gerado por
cada pea. Ento, ele pode adaptar o cdigo-fonte gerado e colocar em sua aplicao.
O trabalho realizado pode ser considerado um Software Educativo (ver seo 2.1.1),
pois tem por objetivo favorecer o processo de ensino-aprendizagem na rea da computao
grfica com foco nas transformaes geomtricas. A partir de exerccios propostos por um
professor, o aluno pode colocar em prtica o contedo aprendido em sala de aula e esclarecer
eventuais dvidas que venha a ter. O que mais o caracteriza como um SE a interao entre o
software, o aluno e o professor. Dessa forma, o trabalho produzido pode ser considerado um
SE com nfase em simulao de cenas 3D com a utilizao da lgica. Ainda, pode-se dizer
66
que se enquadra na classificao de ser interativo com o usurio permitindo assim um melhor
aproveitamento pedaggico. Ao mesmo tempo, a aplicao desenvolvida tem uma ideia
ldica, pois se baseia em peas, como as de um quebra-cabea do mundo real, para montar os
exerccios propostos.
Para a aplicao foram desenvolvidas rotinas para controlar a movimentao das peas
do exerccio. Inicialmente estava sendo utilizada a cor alpha do pixel para retornar a pea
selecionada. Assim, cada pea utilizava o padro RGB Alpha (RGBA) onde no campo alpha
era indicado o identificador da pea. Dessa forma, nenhuma pea possua o mesmo valor para
alpha. Ento, quando fosse clicado com o mouse na tela, as cores do pixel eram lidas e a partir
da cor alpha retornada sabia-se o identificador da pea selecionada. No incio funcionou
tranquilamente, mas aps certo tempo o procedimento passou a funcionar apenas no sistema
operacional MacOS, no funcionando no Windows. No foi descoberto o motivo do
problema, pois at mesmo os exemplos anteriores que utilizavam o alpha e funcionavam no
Windows, passaram a no funcionar mais. Ento a deciso tomada para resolver o problema
foi alterar a estratgia de seleo da pea. Todas as classes correspondentes s peas foram
modificadas para comportar uma boundingbox e foram feitas rotinas para selecionar a pea a
partir dela. Como havia uma pea cncava teve de ser analisado tambm se a pea foi
selecionada a partir do algoritmo da ScanLine. Dessa forma, o clique sobre as peas e sua
seleo voltou a funcionar.
Outro problema encontrado aps a modificao do cdigo para a seleo atravs da
boundingbox foi que as matrizes de transformao das peas filhas eram zeradas ao adicionla a um pai. Isso ocorre devido a multiplicao das matrizes de transformao. Assim, quando
a filha era selecionada pela boundingbox, o algoritmo criado no retornava que a pea
realmente estava selecionada, pois o algoritmo se baseou na matriz de transformao de cada
pea. Para resolver o problema da seleo de uma pea filha, foi subtrado do ponto clicado a
altura das peas anteriores. Dessa forma, era verificado o ponto dentro da boundingbox como
se este iniciasse do zero.
No decorrer do trabalho, foram criados controles para as aes das peas (ver Quadro
14). Porm, o cdigo no foi preparado para que as peas filhas sofressem o mesmo efeito.
Um dos motivos foi que as peas sucessoras e antecessoras pertencem a listas diferentes, e
uma trata o ndice da pea como seu prprio identificador, enquanto a outra trata o
identificador e o ndice sendo diferentes.
Foi decidido desenvolver o trabalho apenas com o cubo e trs transformaes possveis
sobre ele. Um nmero restrito de comandos, porm tendo essa base, fica mais fcil de o aluno
67
alterar o tipo da pea e criar funes novas. Foram escolhidas essas funcionalidades, pois a
maior dificuldade dos alunos de computao grfica entender e visualizar as matrizes de
transformao de um objeto, principalmente em um espao 3D. Com as peas de
transformaes o aluno pode realizar vrios testes na aplicao e ver seu efeito no espao
grfico, assim como pode analisar a matriz de transformao resultante, podendo aprimorar
seu conhecimento a partir da aplicao.
O resultado obtido foi satisfatrio, pois todos os requisitos elencados foram
alcanados, assim como todos os objetivos especficos apresentados na seo 1.1.
Para testar a aplicao foram realizadas algumas anlises com base nas etapas de
deslocamento da pea dentro da bandeja aps ser adicionada (Figura 16) de insero de peas
filha dentro de uma pea pai (Figura 18), de alterao do valor da coordenada x em uma
translao (Figura 22). Todas elas acompanhadas da apresentao de seu cdigo-fonte na
janela de cdigos. A seguir so apresentados os resultados obtidos na anlise de uso de
performance e de usabilidade, finalizando com o comparativo dos trabalhos correlatos com o
presente trabalho.
Em paralelo ao desenvolvido desse trabalho, ocorreu o trabalho de SCHRAMM (2012)
que teve a mesma ideia fundamental de criar uma aplicao educacional, porm como cenrio
o estudo de shaders dentro da disciplina de iOS na FURB. Foram padronizados os nomes do
cenrio da aplicao, para que os alunos que cursassem as duas matrias se familiarizassem
melhor aos ambientes.
3.4.4
Relao dos trabalhos correlatos com o presente trabalho
Uma vez construda e testada a AduboGL, pode-se fazer um comparativo com os

trabalhos correlatos apresentados, conforme apresentado no Quadro 32.
Caracterstica
Furbot
Greenfoot
Edugraph
Interao com o aluno a partir de objetos
Sim
Sim
Sim
Capacidade de resolver exerccios
Sim
Sim
Sim
Resoluo de exerccios via cdigo-fonte
Sim
Sim
No
Alterao de parmetros do cdigo em
No
No
Sim
tempo de execuo
Explcito uso da OpenGL
No
No
Sim
Permite alterao da posio da cmera
No
No
Sim
Tipo de cenrio
2D
2D
2D/3D
Tipo de integrao
Framework Framework Ferramenta
Quadro 32 Comparao entre trabalhos correlatos
AduboGL
Sim
Sim
No
Sim
Sim
No
2D/3D
Aplicao
68
Pode-se observar que a aplicao desenvolvida no se enquadra apenas em dois itens,
que so: resoluo de exerccios via cdigo-fonte e permite alterao da posio da cmera. O
primeiro item s atendido pelos frameworks e o segundo item apenas pelo Edugraph. Como
pontos positivos, observa-se que a aplicao utiliza os dois tipos de cenrio e atende os
demais itens.
69
4 CONCLUSES
Este trabalho apresentou uma aplicao com objetivo de ensinar transformaes

geomtricas e o empilhamento delas sobre um objeto grfico (um cubo), utilizando a
linguagem de programao C++ e a biblioteca grfica OpenGL de forma interativa e ldica.
Junto com o trabalho, foi entregue a documentao do cdigo-fonte feita no programa
Doxygen.
A partir do levantamento terico, viu-se que a aplicao um SE com foco na
interatividade. Ela um instrumento auxiliar para o professor da disciplina e para que os
alunos tenham uma forma prtica antes de iniciar a programao.
Os estudos apresentados da biblioteca OpenGL, framework V-ART e conceito de grafo
de cena foram importantes para o desenvolvimento da aplicao, pois com eles foi mais fcil
de entender o que utilizar para desenvolv-la e como funciona cada comando. A ideia do
grafo de cena pode ser facilmente aproveitada para a criao de peas filhas, dando um
aprimoramento aplicao.
A partir das anlises realizadas, foi possvel observar que quanto mais complexas as
funes e quanto mais peas do vetor so percorridas, maior o tempo gasto para executar.
Porm esse tempo aceitvel, no chegando a comprometer a aplicao. Quanto anlise de
usabilidade foi satisfatria, pois a maioria dos entrevistados gostou da AduboGL achando o
ambiente simples e fcil de trabalhar.
Depois de configurado o ambiente no Microsoft Visual C++ foi fcil de trabalhar.
Alguns problemas ocorreram durante o desenvolvimento, porm conseguiu-se alcanar todos
os objetivos e requisitos levantados.
A aplicao desenvolvida nesse trabalho apresentou funcionalidades semelhantes aos
trabalhos correlatos. Dentre elas pode-se destacar a ideia de tornar um ambiente interativo e
que ensine parte da computao grfica, como o Edugraph (BATTAIOLA et al., 2002) e de
trabalhar com objetos e seu cdigo-fonte como o Furbot (VAHLDICK; MATTOS, 2008) e o
Greenfoot (HENRIKSEN; KLLING, 2004).
A aplicao desenvolvida apresenta uma ideia inovadora dentro da computao
grfica, pois no foram encontrados aplicativos que interajam com o usurio com objetivo de
ensinar as transformaes geomtricas que um tema fundamental para a disciplina. Ainda
com ela, o professor pode disponibilizar exerccios para serem realizados, permitindo assim
que os alunos pratiquem e visualizem o cdigo e a cena em 3D com maior facilidade.
70
4.1
EXTENSES
Sugerem-se as seguintes extenses para a continuidade do trabalho:

a) implementar uma funo que ao clicar na pea ou no cdigo-fonte exiba sua matriz
de transformao a partir de um hint;
b) implementar um manual de instruo para a aplicao;
c) permitir que o usurio altere a cor do cubo a ser desenhado em 3D a partir de um
menu ou paleta de cores;
d) colocar as imagens PNG sobre as peas, para melhorar a aparncia da aplicao;
e) fazer uma janela onde o usurio possa visualizar o grafo de cena correspondente as
peas encaixadas;
f) criar peas para representar as coordenadas de transformao x, y e z;
g) permitir o encaixe de peas filhas dentro de uma pea que j possui pai, tendo
assim o conceito de peas netas, bisnetas, e assim por diante;
h) implementar a movimentao das peas filhas pela bandeja;
i) permitir a criao de peas do tipo glPushMatrix() glPopMatrix() dentro dela
mesma;
j) calcular o tamanho e a posio das peas em tempo de execuo, para que elas
fiquem alinhadas conforme o usurio aumentar a tela;
k) permitir que o usurio copie o cdigo-fonte a partir da janela de cdigo usando a
rea de transferncia do sistema operacional;
l) implementar janela com o ambiente 3D para exibir o resultado do encaixe das
peas em tempo real, no precisando salvar o exerccio;
m) permitir o usurio alterar a posio da cmera, para olhar a cena em diferentes
ngulos.
71
REFERNCIAS BIBLIOGRFICAS
ALMEIDA, Paulo N. de. Educao ldica: tcnicas e jogos pedaggicos. 7. ed. So Paulo:
Loyola, 1994.
ARAJO, Luciana P. AduboGL aplicao didtica usando a biblioteca openGL:
documentao. Blumenau. 2012. Disponvel
em: <http://www.inf.furb.br/gcg/gcg/download/TCC2012-1-19LucianaPAraujo_documentacao.zip>. Acesso em: 18 jun. 2012.
BATTAIOLA, Andr L. et al. Desenvolvimento de um software educacional com base em
conceitos de jogos de computador. In: SIMPSIO BRASILEIRO DE INFORMTICA NA
EDUCAO, 13., 2002, So Leopoldo. Anais... So Leopoldo: SBC, 2002. p. 282-290.
Disponvel em: <http://www.br-ie.org/pub/index.php/sbie/article/view/189/175>. Acesso em:
15 ago. 2011.
BORGES, Thiago T. et al. Ambiente grfico para a anlise de sistemas eltricos de potncia
utilizando OpenGL. In: CONGRESSO BRASILEIRO DE AUTOMTICA, 15., 2004,
Gramado. Anais... Porto Alegre: SBA, 2004. No paginado. Disponvel em:
<http://www.lti.pcs.usp.br/robotics/grva/publicacoes/outras/cba2004-cdrom/cba2004/pdf/694.pdf>. Acesso em: 10 set. 2011.
CARNEIRO, Marcelo M. et al. Interact: um modelo de interao para interfaces 2D por
manipulao direta. In: SIMPSIO BRASILEIRO DE COMPUTAO GRFICA E
PROCESSAMENTO DE IMAGENS, 10., 1997, Campos de Jordo. Anais... Campos de
Jordo: SBC, 1997. No paginado. Disponvel em:
<http://sibgrapi.sid.inpe.br/rep/dpi.inpe.br/ambro/1998/05.21.14.19?languagebutton=en&mirr
or=sid.inpe.br/banon/2001/03.30.15.38.24&searchsite=sibgrapi.sid.inpe.br:80&searchmirror=
sid.inpe.br/banon/2001/03.30.15.38.24&choice=brief>. Acesso em: 5 set. 2011.
CERQUEIRA, Rmulo G.; SILVA, Vnia C. Aprendendo conceitos de computao grfica
atravs de um ambiente multimdia e interativo com OpenGL. In: WORKSHOP SOBRE
INFORMTICA NA ESCOLA / CONGRESSO DA SOCIEDADE BRASILEIRA DE
COMPUTAO, 15., 2009, Bento Gonalves. Anais... Porto Alegre: SBC, p. 1733-1742.
Disponvel em:
<http://bibliotecadigital.sbc.org.br/?module=Public&action=PublicationObject&subject=0&p
ublicationobjectid=134>. Acesso em: 5 set. 2011.
COHEN, Marcelo; MANSSOUR, Isabel H. OpenGL: uma abordagem prtica e objetiva. So
Paulo: Novatec, 2006.
FLIX, Kao C. V-ART. Porto Alegre, fev. 2009. Disponvel em:
<http://vart.codeplex.com/>. Acesso em: 22 maio 2012.
72
HENRIKSEN, Poul; KLLING, Michael. Greenfoot: combining object visualisation with
interaction. In: CONFERENCE ON OBJECT ORIENTED PROGRAMMING SYSTEMS
LANGUAGES AND APPLICATIONS, 4., 2004, Vancouver. Procedings... New York: ACM
Digital Library, 2008. No paginado. Disponvel em:
<http://dl.acm.org/citation.cfm?doid=1028664.1028701>. Acesso em: 20 ago. 2011.
KHRONOS GROUP. GLUT and OpenGL utility libraries. [Califrnia], 2011. Disponvel
em: <http://www.opengl.org/resources/libraries/>. Acesso em: 03 set. 2011.
MACHADO, Liliane S.; MORAES, Ronei M. Cenrios 3D interativos com software livre.
Revista de Informtica Terica Aplicada, Porto Alegre, v. 12, n. 2, p. 91-112, maio/ago.
2005. Disponvel em: <http://www.de.ufpb.br/~labteve/publi/2005_rita.pdf>. Acesso em: 05
set. 2011.
NAKAMURA, Ricardo; TORI, Romero. Ambientes virtuais em Java. In: CARDOSO,
Alexandre; LAMOUNIER, Edgard. (Org.). Realidade virtual: uma abordagem prtica. So
Paulo: [s.n.], 2004. p. 104-122.
NEIDER, Jackie et al. OpenGL programming guide: the official guide to learning OpenGL,
release 1. 5th ed. [Califrnia]: Silicon Graphics, 1994. No paginado. Disponvel em:
<http://fly.cc.fer.hr/~unreal/theredbook/>. Acesso em: 10 set. 2011.
OLIVEIRA, Celina C.; COSTA, Jos W.; MOREIRA, Mercia. Ambientes informatizados
de aprendizagem: produo e avaliao de software educativo. Campinas: Papirus, 2001.
POZZER, Cesar T. Grafo de cena. Santa Maria, 2007. Disponvel em: <http://wwwusr.inf.ufsm.br/~pozzer/disciplinas/cga_2_grafo_cena.pdf>. Acesso em: 04 jun. 2012.
______. OpenGL: conceitos bsicos. Santa Maria, 2011. Disponvel em: <http://wwwusr.inf.ufsm.br/~pozzer/disciplinas/cg_9_opengl_basico.pdf>. Acesso em: 10 set. 2011.
REIS, Dalton S. Computao grfica. Blumenau, out. 2011. Disponvel em:
<http://www.inf.furb.br/gcg/disciplinas/cg/Material.html>. Acesso em: 26 out. 2011.
______. Disciplina computao grfica. Blumenau, abr. 2012. Disponvel em:
<http://www.inf.furb.br/gcg/disciplinas/cg/CG-Slides/CG-03.pdf>. Acesso em: 30 jun. 2012.
SCHNEIDER, Bruno. O framework V-ART. Lavras, set. 2009. Disponvel em:
<http://algol.dcc.ufla.br/~bruno/v-art/>. Acesso em: 12 mar. 2012.
SCHRAMM, Elizandro J. AduboGL ES 2.0: aplicao didtica usando a biblioteca OpenGL
ES no IOS. 2012. 78 f. Trabalho de concluso de curso (Bacharelado em Cincia da
Computao) Centro de Cincias Exatas e Naturais, Universidade Regional de Blumenau,
Blumenau.
73
SILVA, Djalma I. Visualizao cientfica de dados analticos filtrados por formulaes
matemticas. 2000. 130 f. Dissertao (Mestrado em Informtica) - Curso de Ps-graduao
em Informtica, Universidade Federal do Paran, Curitiba. Disponvel em:
<http://dspace.c3sl.ufpr.br:8080/dspace/bitstream/handle/1884/25115/D%20%20SILVA%2c%20DJALMA%20INACIO%20DA.pdf?sequence=1>. Acesso em: 09 mar.
2012.
VAHLDICK, Adilson; MATTOS, Mauro M. Relato de uma experincia no ensino de
algoritmos e programao utilizando um framework ldico. In: WORKSHOP DE
AMBIENTES DE APOIO APRENDIZAGEM DE ALGORITMOS E PROGRAMAO/
SIMPSIO BRASILEIRO DE INFORMTICA NA EDUCAO, 2., 2008, Fortaleza.
Anais... Fortaleza: SBC, 2008. No paginado. Disponvel em:
<http://sbie2008.virtual.ufc.br/CD_ROM_COMPLETO/workshops/workshop%202/Relato%2
0de%20uma%20Experi%EAncia%20no%20Ensino%20de%20Algoritmos%20e.pdf>. Acesso
em: 20 ago. 2011.
VALENTE, Luis. Representao de cenas tridimensionais: grafo de cenas. Rio de Janeiro,
2004. Disponvel em: <http://www.paiossin.com/wordpress/wp-content/plugins/downloadsmanager/upload/Arquivos%20Faculdade/TCC%201/LuisValente_SceneGraph.pdf>. Acesso
em: 04 jun. 2012.
WRIGHT JNIOR, Richard et al. OpenGL suberbible: comprehensive tutorial and
reference. 5th. Boston: Pearson Education, 2011.
74
APNDICE A Exerccio de OpenGL
O exerccio foi utilizado para testar a aplicao com usurios e tambm para mostrar
como resolv-lo dentro da AduboGL. O exerccio utiliza de transformaes sobre a forma
geomtrica cubo. No Quadro 33 tem-se o exerccio aplicado no teste de usabilidade.
Exerccio de computao grfica:
1) Faa uma cena 3D que contenha 3 cubos, com as caractersticas seguintes:
o primeiro cubo deve estar na origem e ser de cor azul;
o segundo cubo deve ser na cor verde e estar transladado em 4 unidades para x e 5
unidades para y;
o terceiro cubo deve ser na cor vermelha e deve estar escalado em 2 unidades em
todos os trs eixos, deve ser rotacionado 4 unidades em x e 2 em z e deve ser
transladado em 5 unidades no eixo z.
Para isso, utilize o aplicativo AduboGL.

Visualize a cena a partir do aplicativo exemplo, e depois altere o exerccio para que as
peas fiquem transladadas em 4 unidades no eixo x. Salve e visualize novamente a
cena.
Quadro 33 - Exerccio a ser realizado na AduboGL
75
APNDICE B Croqui das peas da AduboGL e suas imagens em PNG
As peas para a fbrica e bandeja da AduboGL foram inicialmente rascunhadas em um

papel. O modelo inicial para as peas est representado na Figura 30.
Figura 30 Rascunho das peas para a AduboGL
Aps o desenho delas, foi realizado um croqui das peas que representariam as
transformaes. Elas tem um detalhe na borda esquerda para se encaixar a um comando
glPushMatrix() glPopMatrix().
Tambm possuem um encaixe oval para adaptar uma na
outra e trs posies sendo elas um tringulo, um quadrado e um losango para representar os
eixos x, y e z respectivamente. Elas podem ser vistas na Figura 31.
Figura 31 - Croqui das peas internas
Depois do croqui das peas originais foi feito um mais simples para iniciar a
implementao. Foi decido ter apenas dois tipos de peas, uma em formato de uma letra C
quadrada para representar o comando glPushMatrix() glPopMatrix() e as demais em
forma de um quadrado alterando apenas sua cor. Foram calculadas as dimenses dessas peas
76
para que pudessem se encaixar. A Figura 32 representa a pea glPushMatrix()
glPopMatrix()
com uma pea interna e suas dimenses, assim como o ponto quente de
encaixe para ambas.
Figura 32 - Desenho das peas iniciais da AduboGL
As figuras iniciais tambm foram modelas do Corel Draw 2004 em formato PNG para
posteriormente substituir a modelagem da pea a partir das primitivas da OpenGL.
Figura 33 - Peas encaixadas e modeladas no Corel Draw
Na Figura 33 pode-se observar as peas glPushMatrix() glPopMatrix() com duas

peas filhas, sendo elas o cubo e uma transformao. Por sua vez a transformao possui trs
filhas para representar as coordenadas.

Biblioteca Opengl

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Biblioteca Opengl

Загружено:

Авторское право:

Доступные форматы

UNIVERSIDADE REGIONAL DE BLUMENAU

CENTRO DE CINCIAS EXATAS E NATURAIS

ADUBOGL APLICAO DIDTICA USANDO A

LUCIANA PEREIRA DE ARAJO

LUCIANA PEREIRA DE ARAJO

ADUBOGL APLICAO DIDTICA USANDO A

Trabalho de Concluso de Curso submetido

ADUBOGL APLICAO DIDTICA USANDO A

LUCIANA PEREIRA DE ARAJO

Trabalho aprovado para obteno dos crditos

Blumenau, 11 de julho de 2012

Dedico este trabalho a minha famlia que me

A Deus, por iluminar-me durante toda a caminhada.

As oportunidades multiplicam-se medida que

Este trabalho apresenta a implementao de uma aplicao voltada ao aprendizado da

Figura 1 Estrutura padro de um SE...................................................................................... 17

Figura 12 Diagrama de estados ............................................................................................. 43

Figura 31 - Croqui das peas internas ...................................................................................... 75

3.4.1 Resultados obtidos na anlise de performance................................................................ 62

Com a crescente evoluo no mundo tecnolgico as tecnologias passaram a ser

O objetivo deste trabalho desenvolver uma aplicao para o estudo da disciplina de

Na seo 2.1 apresentado como vista a informtica na educao, quais so as

Com o passar do tempo os jovens adquiriram uma grande familiaridade com os

Fonte: Oliveira, Costa e Moreira (2001, p. 75).

Figura 1 Estrutura padro de um SE

Os Softwares Aplicativos (SA) so utilizados em grande escala nas escolas, tanto no

programao, processadores de texto, planilhas eletrnicas, editores grficos e

SOFTWARES COM FOCO NA EDUCAO LDICA

A educao ldica favorece a construo do conhecimento de forma sadia e com um

A OpenGL uma sofisticada Application Programing Interface

desenvolver programas grficos bidimensionais e tridimensionais para diferentes plataformas

PADRONIZAO DE NOMES E TIPOS DE DADOS

O nome das funes em OpenGL possui uma padronizao. O nome da funo

Prefixo: biblioteca gl.

Quadro 1 Estrutura de nome para funo OpenGL

Algumas funes no tem parmetros ou possuem sempre a mesma quantidade. Nestes

Fonte: Cohen e Manssour (2006, p. 52).

Quadro 2 Tipos de dados OpenGL

O universo de um espao grfico a regio do plano utilizada em uma aplicao.

Quadro 3 Representao dos eixos no SRU

Desta forma, uma coordenada em um plano 2D representada por dois pontos e em

Fonte: Manssour e Cohen (2006, p. 9).

Figura 2 Regra da mo direita

PRIMITIVAS GRFICAS, TEXTO, CMERA SINTTICA, ILUMINAO E

Com a OpenGL possvel desenhar elementos bsicos como pontos, segmentos de

Quadro 4 Primitivas grficas

As transformaes geomtricas nada mais so que clculos matemticos que

Fonte: Reis (2012).

Figura 3 - Transformaes sobre objeto 3D

A translao utilizada para colocar ou alterar de lugar o objeto em cena. A operao

Quadro 5 Frmula para translao

A rotao utilizada para girar um objeto a partir de um ngulo. Quando se deseja

Quadro 6 Frmula para rotao

Quadro 7 Frmula para escala

Para que um objeto inteiro sofra a transformao aplicada necessrio realizar a

Fonte: Reis (2012).

Quadro 8 Multiplicao das matrizes de translao com base na origem

Fonte: Reis (2012).

Quadro 9 Multiplicao das matrizes de escala com base na origem

Fonte: Reis (2012).

que desempilha a matriz de transformao corrente. Dessa forma, as

transformaes so concatenas e aplicadas ao objeto que apresentado na cena (REIS, 2012;

VISUALIZAO DE OBJETOS GRFICOS

Para visualizar um objeto no sistema de referncia existem basicamente duas formas