Computação Gráfica - Interações
Profa. Mercedes Gonzales
Márquez
Tópicos


Sistemas de Informação Gráfica
Dispositivos Físicos
–
–


Entrada
Saída
Sistemas de Janelas
Programação Orientada a Eventos
Conceito




Um dos aspectos mais fascinantes dos atuais sistemas
de informação gráfica é a sua interatividade.
Os programas tradicionais seguem um fluxo de
controle pré-estabelecido.
Nos sistemas de informação gráfica, o usuário pode
interferir no controle de fluxo do programa,
compartilhando com o computador a responsabilidade
na execução de uma tarefa. como ilustra o ciclo de
interação.
Conceito



Através dos dispositivos de saída, o sistema
computacional exibe para o usuário o estado dos
dados.
O usuário vê/lê a informação apresentada, interpreta,
avalia e intervém no fluxo de controle através dos
dispositivos de entrada.
Os sinais de dispositivos de entrada são processados
como eventos pelo processador que dispara um
tratador apropriado para modificar o estado dos dados
armazenados em memória.
Conceito
Sistemas de Janelas
uma “camada de software” que gerencia o uso
compartilhado dos dispositivos de entrada e de saída
entre vários aplicativos, de forma similar a um sistema
operacional que gerencia os recursos computacionais
entre vários processos.
É
Cada
aplicativo tem uma sub-área própria, como se a
tela do monitor estivesse dividida em várias sub-áreas
totalmente independentes. Estas sub-áreas são as
janelas.
Sistemas de Janelas
Sistemas de Janelas
Um
ciclo de interação envolve o disparo de um evento
de interação, o despacho deste evento à janela correta
e a execução de um trecho de código condizente com a
ação esperada (tratador de eventos registrados como
callbacks)
Programa orientado a eventos
Possui
sempre um programa inicial contendo
instruções de inicialização e um laço principal
de eventos cuja tarefa é simplesmente retirar
os eventos da fila e despachá-los.
As funções de inicialização são as instruções
comuns a todos os aplicativos.
O comportamento real de um aplicativo é
definido pelos tratadores de evento registrados
com callback.
Funções Callback GLUT


GLUT usa o mecanismo de Callbacks.
São rotinas que são chamadas quando algo como o
seguinte acontece (evento)
–
–


Redimensionamento ou redesenho da janela
Entrada do usuário (mouse, teclado, etc).
Callbacks definem quais ações são suportadas e
automaticamente manejam os eventos.
Registro de callbacks com GLUT
glutDisplayFunc( display )
glutIdleFunc( idle );
glutKeyboardFunc( keyboard );
1
0
Funções Callback GLUT

Outras
•
•
•
•
•
•
1
1
glutReshapeFunc() – chamada quando a janela muda de
tamanho
glutKeyboardFunc() – chamada quando uma tecla é
pressionada no teclado
glutMouseFunc() – chamada quando o usuário pressiona um
botão do mouse
glutMotionFunc() – chamada quando o usuário movimenta o
mouse enquanto um botão do mesmo está pressionado.
glutPassiveMouseFunc() – chamada quando o mouse é
movimentado sem considerar o estado dos botões.
glutIdleFunc() – chamada quando nada está sendo realizado.
É muito útil para animações.
Callback de renderização (display)

O desenho que será apresentado na tela é feito
aqui.
glutDisplayFunc( display );
1
2
void display( void )
{
glClear( GL_COLOR_BUFFER_BIT );
glBegin( GL_TRIANGLE_STRIP );
glVertex3fv( v[0] );
glVertex3fv( v[1] );
glVertex3fv( v[2] );
glVertex3fv( v[3] );
glEnd();
glutSwapBuffers();
}
Callback idle (ocioso)

Usado para animação e atualização contínua
glutIdleFunc( idle );
void idle( void )
{
t += dt;
glutPostRedisplay();
}
1
3
Callbacks de entradas

Processa uma entrada do usuário, pode ser por
teclado, mouse.
glutKeyboardFunc( keyboard );
1
4
void keyboard( char key, int x, int y )
{
switch( key ) {
case ‘q’ : case ‘Q’ :
exit( EXIT_SUCCESS );
break;
case ‘r’ : case ‘R’ :
rotate = GL_TRUE;
break;
}
}
OpenGL

OpenGL é uma biblioteca de rotinas gráficas
para criar aplicações interativas que
renderizam imagens de alta qualidade
compostas de objetos tridimensionais e
imagens..

OpenGL é independente do sistema
operacional e do sistema de janelas.
OpenGL como renderizador
Basicamente, há duas operações que OpenGL faz :
- Desenhar algo através de primitivas geométricas e de imagens.
- Mudar o estado de como OpenGL desenha.

Primitivas Geometricas
–

Primitivas de Imagens
–
–

1
6
Pontos, linhas e polígonos
imagens e bitmaps (os pixels que podemos extrair de uma
imagem JPEG depois de lida)
Adicionalmente, OpenGL pode linkar imagens e primitavas
geométricas através de um mapeamento de textura.
OpenGL funciona como uma máquina de estados. A
renderização depende do estado
–
cores, materiais, fontes de luz, etc.
GLU e GLUT

GLU (OpenGL Utility Library)
–
–

GLUT (OpenGL Utility Toolkit)
–
–
1
7
parte de OpenGL
Simplifica tarefas como renderização de superfícies
quádricas como esferas, cones, cilindros, etc.
Permite interagir com o sistemas de janelas. Simplifica
o processo de criar janelas, trabalhar com eventos no
sistema de janelas e manejar animações.
Não é oficialmente parte de OpenGL
Preliminares

Arquivos cabeçalho (headers files): descreve para o
compilador, as chamadas de funções, seus parâmetros e
valores constantes definidos.





#include <GL/gl.h>
#include <GL/glu.h>
#include <GL/glut.h>
Bibliotecas : depende do sistema que estamos usando.
Cada sistema operacional tem seu próprio conjunto de
bibliotecas. Para sistema Unix é libGL.so e para
Microsoft Windows é opengl32.lib.
Enumerated Types
–
1
8
GLfloat, GLint, etc.
GLUT Básico

Estrutura da aplicação
–
–
–
–
1
9
Configure e inicialize a janela
Inicialize os estados do OpenGL. Isto pode incluir
coisas como cor do fundo, posições de luz e mapas de
textura.
Registre funções callbacks :
Entre no loop de processamento de eventos : Quando a
aplicação recebe eventos, e controla quando as funções
callbacks serão chamadas.
Programa exemplo
void main( int argc, char** argv )
{
int mode = GLUT_RGB|GLUT_DOUBLE;
glutInitDisplayMode( mode );
Funções de configuração
glutCreateWindow( argv[0] );
da janela
Inicalização de estados
init();
glutDisplayFunc( display );
glutReshapeFunc( resize );
glutKeyboardFunc( key );
Rotinas Callbak
glutIdleFunc( idle );
glutMainLoop();
}
Loop de processamento de eventos
2
0
Inicialização de OpenGL

Fixa alguns estados
void init( void )
{
glClearColor( 0.0, 0.0, 0.0, 1.0 );
glClearDepth( 1.0 );
glEnable( GL_LIGHT0 );
glEnable( GL_LIGHTING );
glEnable( GL_DEPTH_TEST );
}
2
1
Primitivas geométricas do OpenGL

Todas as primitivas geométricas são especificadas por vértices
GL_LINES
GL_LINE_STRIP
GL_POINTS
GL_LINE_LOOP
GL_POLYGON
GL_TRIANGLES
GL_QUADS
GL_QUAD_STRI
GL_TRIANGLE_STRIP
2
2
GL_TRIANGLE_FAN
Exemplo
void drawRhombus( GLfloat color[] )
{
glBegin( GL_QUADS );
glColor3fv( color );
glVertex2f( 0.0, 0.0 );
glVertex2f( 1.0, 0.0 );
glVertex2f( 1.5, 1.118 );
glVertex2f( 0.5, 1.118 );
glEnd();
}
2
3
Formatos de comandos OpenGL
glVertex3fv( v )
Number of
components
2 - (x,y)
3 - (x,y,z)
4 - (x,y,z,w)
2
4
Data Type
b
ub
s
us
i
ui
f
d
-
byte
unsigned byte
short
unsigned short
int
unsigned int
float
double
Vector
omit “v” for
scalar form
glVertex2f( x, y )
Especificando Primitivas
Geométricas

Primitivas são especificadas usando
glBegin( primType );
glEnd();
–
2
5
primType determina como os vértices serão
combinados.
GLfloat red, greed, blue;
Glfloat coords[3];
glBegin( primType );
for ( i = 0; i < nVerts; ++i ) {
glColor3f( red, green, blue );
glVertex3fv( coords );
}
glEnd();
Tutorial Shapes
2
6