Implementacao Biblioteca Grafica
Implementacao Biblioteca Grafica
Implementacao Biblioteca Grafica
Uberlândia, Brasil
2018
UNIVERSIDADE FEDERAL DE UBERLÂNDIA
Uberlândia, Brasil
2018
William Johnson dos Santos Okano
Uberlândia, Brasil
2018
Agradecimentos
Gostaria de agradecer ao meu orientador, Prof. Dr. André Ricardo Backes pela
paciência em todos esses semestres.
“O sucesso é a soma de pequenos
esforços repetidos dia após dia.”
(Robert Collier)
Resumo
A diĄculdade de aprendizagem de programação pode ser causada por várias razões, como
a incapacidade de compreensão de algoritmos por este ser um conceito muito abstrato.
Várias são as formas utilizadas no ensino de algoritmos e estruturas de controle. Este
trabalho apresenta uma proposta de biblioteca para auxiliar o ensino de programação,
utilizando conceitos gráĄcos para facilitar o entendimento das estruturas de programa-
ção. A solução proposta tem como foco desenvolver uma biblioteca multiplataforma, com
um conjunto de funções simples para gerenciamento de elementos gráĄcos, bem como a
elaboração de um guia de utilização e sua respectiva documentação.
TI Tecnologia da Informação
Sumário
1 INTRODUÇÃO . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
1.1 Objetivos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
1.2 Funcionalidades previstas . . . . . . . . . . . . . . . . . . . . . . . . . 11
2 TRABALHOS CORRELATOS . . . . . . . . . . . . . . . . . . . . . 13
2.1 Borland Graphics Interface . . . . . . . . . . . . . . . . . . . . . . . . 13
2.2 GLUT e FreeGLUT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
2.3 SDL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
2.4 Ferramentas de técnica de visualização . . . . . . . . . . . . . . . . . 14
3 DESENVOLVIMENTO . . . . . . . . . . . . . . . . . . . . . . . . . 15
3.1 Tecnologias Empregadas . . . . . . . . . . . . . . . . . . . . . . . . . . 15
3.1.1 Linguagem de programação C . . . . . . . . . . . . . . . . . . . . . . . . 15
3.1.2 OpenGL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
3.1.3 GLFW . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
3.1.4 TinyCThread . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
3.2 Atividades Desenvolvidas . . . . . . . . . . . . . . . . . . . . . . . . . 18
3.2.1 A biblioteca gráfica . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
3.2.1.1 Iniciando a biblioteca . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
3.2.1.2 Limpando a tela . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
3.2.1.3 Desfazer último desenho . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
3.2.1.4 Refazer o último desenho . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
3.2.1.5 Alterar a cor de preenchimento de um objeto . . . . . . . . . . . . . . . . . . 22
3.2.1.6 Obter a cor de preenchimento do objeto . . . . . . . . . . . . . . . . . . . . 23
3.2.1.7 Definindo o tamanho de um objeto . . . . . . . . . . . . . . . . . . . . . . . 24
3.2.1.8 Obtendo o tamanho de um objeto . . . . . . . . . . . . . . . . . . . . . . . 24
3.2.1.9 Desenhando um polígono . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
3.2.1.10 Desenhando um ponto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
3.2.1.11 Desenhando um triângulo . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
3.2.1.12 Desenhando um retângulo . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
3.2.1.13 Desenhando um quadrado . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
3.2.1.14 Desenhando um polígono regular . . . . . . . . . . . . . . . . . . . . . . . . 28
3.2.1.15 Desenhando um círculo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
3.2.1.16 Desenhando um pentágono . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
3.2.1.17 Desenhando uma linha . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
3.3 Estado Atual do Desenvolvimento . . . . . . . . . . . . . . . . . . . . 31
4 CONSIDERAÇÕES FINAIS . . . . . . . . . . . . . . . . . . . . . . . 34
4.1 Trabalhos Futuros . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
4.2 DiĄculdades Encontradas . . . . . . . . . . . . . . . . . . . . . . . . . 34
Conclusão . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
REFERÊNCIAS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
10
1 Introdução
1.1 Objetivos
O objetivo geral deste trabalho é a implementação de uma biblioteca gráĄca, ba-
seada em OpenGL, que dê a possibilidade aos alunos de cursos introdutórios de progra-
mação compreender, de forma visual, os efeitos dos códigos ensinados em sala de aula. Os
objetivos especíĄcos do trabalho proposto são:
• Funções de gerenciamento
– Inicializar a biblioteca;
– Limpar a tela;
– Desfazer o último desenho;
– Refazer o último desenho.
• Funções de conĄguração
• Funções de desenho
Capítulo 1. Introdução 12
– Polígono;
– Ponto;
– Triângulo;
– Retângulo;
– Quadrado;
– Polígono regular;
– Círculo;
– Pentágono;
– Hexágono;
– Decágono;
– Dodecágono;
– Linha.
13
2 Trabalhos Correlatos
2.3 SDL
Simple DirectMedia Layer (2018) (SDL), é uma biblioteca de desenvolvimento
multiplataforma desenvolvida para prover acesso de baixo nível nos hardwares de áudio,
teclado, mouse e joystick por meio da OpenGL e Direct3D.
SDL possui código-aberto, sob a licença zlib (2017). Além disso, possui suporte
nativo oĄcial a Windows, Mac OS X, Linux, iOS e Android. Ela é escrita totalmente na
linguagem C e possui compatibilidade com C++, além de possuir versões para outras
linguagens de programação, como Java (1995), C# (2000) e Python (1989).
• Algoritmo Raft (2018), é um website que possui uma simulação interativa do fun-
cionamento do algoritmo de consensus Raft. O site permite várias conĄgurações e
ações, sendo possível derrubar um nó para observar o comportamento de eleição de
novo líder.
15
3 Desenvolvimento
3.1.2 OpenGL
O OpenGL (1992) é uma biblioteca gráĄca para desenvolvimento de aplicações
interativas. Desde sua introdução, no ano de 1992, a biblioteca OpenGL se tornou a in-
terface de programação de aplicação (API) mais utilizada com suporte a 2D e 3D pela
indústria. O OpenGL foi escolhido como biblioteca gráĄca por sua qualidade de ser al-
tamente portável estando presente em várias plataformas, tais como Windows, Linux,
Unix, MacOS, entre outras. Outro motivo foi o fato de possuir um bom desempenho, e de
poder ser utilizada em conjunto com várias linguagens de programação, dentre as quais
foi escolhida a linguagem de programação C (1972).
A biblioteca gráĄca OpenGL (1992) foi escolhida em detrimento de outras por
ser mais simples, porém versátil, e suas já citadas qualidades: performance, largamente
utilizada, interoperável entre plataformas e por ter fácil integração com a linguagem de
programação C. Outros fatores que inĆuenciaram a sua escolha foi a vasta documentação,
como websites, livros e cursos online. Alguns sites que promovem a documentação de
utilização do OpenGL são o próprio site do OpenGL <https://opengl.org/>, o website
Learn OpenGL (2018) e o livro OpenGL Programming Guide: The Oicial Guide to
Learning OpenGL, Version 1.2, do autor Woo et al. (1999).
Capítulo 3. Desenvolvimento 17
3.1.3 GLFW
De acordo com o site da GLFW (2018), GLFW é uma biblioteca gráĄca de código-
aberto, multiplataforma para desenvolvimento desktop, que utiliza OpenGL, OpenGL ES
e Vulkan. Ela é responsável por criar janelas de forma uniĄcada entre diferentes sistemas
operacionais, contextos OpenGL e receber entradas de dados e eventos.
A biblioteca GLFW foi escrita em C e possui suporte nativo para Windows, macOS
e vários sistemas Unix (Unix Webiste, 1971) que utilizam o sistema de janelas X Window
System (X Window System, 2018), como por exemplo Linux (Linux Website, 2018) e
FreeBSD (FreeBSD, 2018).
As motivações que levaram à escolha desta biblioteca foram a criação de janelas de
forma transparente entre diversos sistemas operacionais, suporte para OpenGL, suporte
à vários monitores e várias janelas simultâneas, suporte para mouse, teclado e joystick,
além de ser a biblioteca mais atualizada, tendo vasta documentação e grande comunidade
ativa. A documentação completa da biblioteca GLFW pode ser encontrada no website da
biblioteca pelo endereço <http://www.glfw.org/documentation.html>.
3.1.4 TinyCThread
A TinyCThread (2018) é uma biblioteca de código aberto escrita em C, multipla-
taforma capaz de criar e gerenciar threads de forma uniĄcada e transparente, em diversos
sistemas operacionais. Segundo Tanenbaum (2007), thread é uma forma de um processo
dividir as tarefas a serem executadas de modo que possam ser executadas concorrente-
mente. Um processo que possui apenas uma thread para execução é chamado de single
threading. Aplicações que possuem múltiplas threads são chamados de multi threading.
Threads podem ser executadas em paralelo, desde que o processador possua mais de um
núcleo, onde cada thread seria executada em um núcleo distinto.
O motivo da escolha da TinyCThread foi pois, apesar do padrão C11 implementar
suporte nativo para criação de threads da mesma forma entre diferentes sistemas opera-
cionais, os compiladores mais antigos, que ainda não implementam esse padrão, possuem
formas distintas de criar e gerenciar as threads. Com o uso da biblioteca essa criação
Capítulo 3. Desenvolvimento 18
Ąca padronizada, sendo possível compilar o mesmo código tanto para Linux quanto para
Windows. A biblioteca também provê funcionalidades para gerenciamento de concorrên-
cia, como locks exclusivos, por exemplo, o mutex, e outros.
As seções seguintes descrevem cada item da API bem como seus protótipos e o
signiĄcado de cada parâmetro de entrada.
#include <stdio.h>
#include <graphics.h>
int main() {
inicializarBiblioteca(800, 600);
getchar();
return 0;
}
Uma das funcionalidades propostas é que a janela seja limpa, removendo assim
todos os objetos renderizados e reiniciando a janela para seu estado inicial.
A função que limpa a janela já foi utilizada anteriormente e pode ser encontrada
no Exemplo 1.
Capítulo 3. Desenvolvimento 22
void desfazerUltimaForma();
Refazer o último desenho é uma opção da mesma forma que desfazer o último
desenho. Sendo assim, é possível se arrepender e desfazer a opção de desfazer. A cada vez
que a função for chamada, um desenho será restaurado. A ordem de restauração é baseada
na estrutura de dados pilha, portanto o último objeto removido será o primeiro objeto
restaurado. Essa função só pode ser executa caso invocada imediatamente após a função
de desfazer, pois caso seja inserida um novo objeto após ter desfeito o último desenho, a
pilha de ações será descartada.
A função que refaz o último desenho tem o seguinte protótipo:
void refazerUltimaForma();
A grande maioria, senão todas, as biblioteca citadas nos trabalhos correlatos per-
mitem a deĄnição de uma cor de preenchimento para o objeto a ser desenhado.
A função que permite alterar a cor de um objeto tem o seguinte protótipo:
int* obterCor();
O exemplo abaixo mostra como obter a cor atual de uma forma em uma aplicação
C:
#include <stdio.h>
#include <graphics.h>
int main() {
inicializarBiblioteca(800, 600);
definirCor(255, 0, 127);
retangulo(0, 0, 200, 100);
getchar();
return 0;
}
Capítulo 3. Desenvolvimento 24
Alguns objetos podem ter seu tamanho alterado. Para que tenha efeito, a função
definirTamanho deve ser invocada anteriormente a uma função de desenho de forma. Após
chamado o método, todos os objetos desenhados após a chamada serão desenhados com o
novo tamanho deĄnido. Atualmente apenas o objeto ponto pode ter seu tamanho alterado.
A função que deĄne o tamanho de uma forma tem o seguinte protótipo:
O exemplo abaixo mostra como deĄnir o tamanho de uma forma em uma aplicação
C:
#include <stdio.h>
#include <graphics.h>
int main() {
inicializarBiblioteca(800, 600);
definirTamanho(50);
ponto(100, 100);
getchar();
return 0;
}
int obterTamanho();
O exemplo abaixo mostra como obter o tamanho atual de uma forma em uma
aplicação C:
#include <stdio.h>
#include <graphics.h>
Capítulo 3. Desenvolvimento 25
int main() {
inicializarBiblioteca(800, 600);
definirTamanho(50);
ponto(100, 100);
getchar();
return 0;
}
#include <stdio.h>
#include <stdlib.h>
#include <graphics.h>
int main() {
inicializarBiblioteca(800, 600);
Capítulo 3. Desenvolvimento 26
GLfloat posicoes[] = {
320, 100,
400, 300,
800, 50,
520, 10,
340, 40
};
poligono(5, posicoes);
getchar();
return 0;
}
Triângulos são uma das formas mais básicas e utilizadas, pois todos os polígonos
convexos pode ser decompostos em vários triângulos. A função que desenha um triângulo
tem o seguinte protótipo:
void triangulo(
int posX1, int posY1,
int posX2, int posY2,
int posX3, int posY3
);
Retângulos são formas geométricas que possuem 4 ângulos retos. Por serem uma
das mais básicas formas, são bastante utilizados
A função que desenha um retângulo tem o seguinte protótipo:
Um polígono regular é um polígono convexo com n faces onde cada face possui
o mesmo tamanho e todos os ângulos internos são iguais. Alguns exemplos de polígonos
regulares são triângulos retângulos, quadrados, pentágonos, hexágonos, dentre outros.
Algumas dessas formas você pode ver na Figura 4.
• int posX - posição X onde do polígono regular. Representa o centro de onde será
desenhado o objeto.
• int posY - posição Y onde do polígono regular. Representa o centro de onde será
desenhado o objeto.
O exemplo abaixo mostra como desenhar um polígono regular azul em uma apli-
cação C:
#include <stdio.h>
#include <stdlib.h>
#include <graphics.h>
int main() {
inicializarBiblioteca(800, 600);
definirCor(0, 0, 255);
poligonoRegular(300, 300, 100, 7);
getchar();
return 0;
}
O exemplo abaixo mostra como desenhar uma linha que corta a janela de desenho
verticalmente em uma aplicação C:
#include <stdio.h>
#include <graphics.h>
int main() {
inicializarBiblioteca(1366, 768);
linha(
Capítulo 3. Desenvolvimento 31
0, 0,
1366, 768
);
getchar();
return 0;
}
4 Considerações Finais
A ideia inicial deste projeto era criar uma biblioteca que, além de ser simples,
não necessita-se de outras bibliotecas complementares para o gerenciamento de janelas e
contextos do OpenGL. Entretanto, mostrou-se muito difícil realizar essas implementações,
pois o sistema de janelas dos sistemas operacionais Windows e Linux são completamente
diferentes. No sistema operacional Windows, para o gerenciamento de janelas, é utilizado
a API do Windows, através da biblioteca win32.dll. Já no sistema operacional Linux, todo
o sistema de gerencimanto de janelas é realizado através da biblioteca X11. Essa gestão de
janelas é muito complexa, mesmo quando estamos desenvolvendo exclusivamente para um
sistema operacional, portanto foi utilizado a biblioteca GLFW para gerenciar as janelas
de forma portável e multiplataforma.
Mesmo utilizando a biblioteca GLFW, a compilação multiplataforma não foi di-
reta. No sistema operacional Windows a biblioteca GLFW é compilada antes da biblioteca
descrita neste trabalho, e logo após é realizado o link estático entre as duas bibliotecas. A
estratégia utilizada no sistema operacional Linux foi instalar a biblioteca GLFW através
de um gerenciador de pacotes e então realizar o link compartilhado no ato da compilação
da biblioteca deste projeto.
Outra diĄculdade encontrada foi a compilação da biblioteca TinyCThread no sis-
tema operacional Windows. Inicialmente o compilador utilizado era o mingw, um kit de
ferramentas para Windows contento o compilador GCC e algumas bibliotecas previamente
instalas. Este compilador foi instalado automaticamente junto com a IDE Code::Blocks
(2005). Entretanto a versão instalada com essa IDE não é suportada pela TinyCThread.
A versão recomendada do mingw para compilar a biblioteca TinyCThread no sistema
operacional Windows é a versão mingw64. Após instalar essa versão, o problema foi sa-
nado.
36
Conclusão
Este trabalho apresentou uma biblioteca para auxiliar o aluno a assimilar melhor
os códigos ensinados em cursos introdutórios de programação, utilizando técnicas de vi-
sualização. Os problemas causados pela falta de assimilação dos conceitos ensinados nos
cursos de programação pode levar o aluno a ter um atraso em outras disciplinas onde o
conhecimento de programação é requisito, como por exemplo, na disciplina de estrutura
de dados. Além do mais, alunos que não conseguem assimilar o conhecimento introdutório
de programação podem acabar se frustando e abandonando o curso, aumentando assim o
índice de evasão.
Para poder realizar este trabalho, foi necessário uma base teórica multidisciplinar,
onde a maioria do conhecimento foi obtido através de disciplinas oferecidas pelo curso
de Sistemas de Informação. As disciplinas de Modelagem de Software, Engenharia de
Software, Sistemas Operacionais e Estrutura de Dados foram primordiais para que fosse
desenvolvida uma arquitetura simples e eĄciente. Conceitos como multi threading, locks
de exclusão mútua, ensinados em Sistemas Operacionais, foram essenciais para o desen-
volvimento desta biblioteca. Os conhecimentos ensinados em Estrutura de Dados, como
listas e pilhas, também foram utilizados para o desenvolvimento da biblioteca, seja para
o armazenamento dos objetos em um buffer, que é uma lista, ou então a utilização de
uma pilha, para que pudesse ser implementado o conceito de desfazer e refazer uma ação.
Além do mais, os conhecimentos obtidos em Modelagem de Software e Engenharia de
Software foram de grande ajuda para que fosse possível entender o problema e modelar a
arquitetura para que fosse obtida uma API simples e de fácil utilização.
37
Referências
Bell Labs. Bell Labs. 1972. Disponível em: <https://www.bell-labs.com/>. Acesso em:
15/06/2018. Citado na página 15.
Borland Graphics Interface (BGI) for Windows. Borland Graphics Interface (BGI)
for Windows. 2004. Disponível em: <https://www.cs.colorado.edu/~main/bgi/doc/>.
Acesso em: 12/07/2018. Citado na página 13.
Freeware BGI Drivers. Freeware BGI Drivers. 2008. Disponível em: <https:
//www.von-bassewitz.de/uz/bgi.php>. Acesso em: 12/07/2018. Citado na página 13.
GLUT. GLUT - The OpenGL Utility Toolkit. 2000. Disponível em: <https:
//www.opengl.org/resources/libraries/glut/>. Acesso em: 12/07/2018. Citado na
página 13.
KIRBY, S.; TOLAND, B.; DEEGAN, C. Program visualization tool for teaching
programming in c. In: . [S.l.: s.n.], 2010. Citado na página 10.
Referências 38
TANENBAUM, A. S. Modern Operating Systems. 3rd. ed. Upper Saddle River, NJ,
USA: Prentice Hall Press, 2007. ISBN 9780136006633. Citado na página 17.
The Free Dictionary. Linguagem de propósito geral. 2018. Disponível em: <https:
//encyclopedia2.thefreedictionary.com/general-purpose+language>. Acesso em:
15/06/2018. Citado na página 15.
WOO, M. et al. OpenGL Programming Guide: The Official Guide to Learning OpenGL,
Version 1.2. 3rd. ed. Boston, MA, USA: Addison-Wesley Longman Publishing Co., Inc.,
1999. ISBN 0201604582. Citado na página 16.
Referências 39