CRAb Grupo de Computação Gráfica Departamento de Computação UFC

(1)

Computação Gráfica I

CRAb – Grupo de Computação

Gráfica

(2)

Objetivos

• Estudar

– equipamentos, técnicas de programação e

conceitos matemáticos

• Para

– representação, manipulação e projeção de

objetos bi- e tridimensionais

(3)

Sumário do Curso

• Sistemas Gráficos e Modelos

• Programação Gráfica

• Input e Interação

• Objetos Geométricos e Transformações

• Visualização

• Pintura

• Técnicas Discretas

(4)

3. Input e Interação

(5)

3.1 Interação

• Era da computação gráfica interativa

– Paradigma

• Usuário vê imagem na tela

• Reage à imagem através de um dispositivo de interação

interação

• A imagem muda em resposta ao input

– OpenGL não dá suporte a interação

• Razões de portabilidade

(6)

3.2 Dispositivos de Entrada (A9)

• 3.2.0 Introdução

– Dispositivos físicos

• Teclado • Mouse • Space ball • Light pen • …

– Dispositivos lógicos

(7)

3.2 Dispositivos de Entrada (A9)

3.2.1 Dispositivos físicos

– Dois tipos principais

• Pointing devices (Apontadores) • Keyboard devices (Teclados)

– Apontadores

• Permite ao usuário indicar uma posição na tela

• Têm um ou mais botões para enviar sinais ao computador

(8)

3.2 Dispositivos de Entrada (A9)

– Keaboard

• Geralmente é o teclado físico

• Pode ser generalizado para qualquer

dispositivo que retorne códigos de caracteres ao programa

(9)

3.2 Dispositivos de Entrada (A9)

– Mouse e Trackball

• Semelhantes em uso e em construção • Mecânico

– Codificadores dentro do dispositivo

– Codificadores giram quando a bola se move – Codificadores giram quando a bola se move – Movimento da bola é convertido em sinais – Sinais enviados ao computador por pares de

codificadores

– Codificadores medem movimentos em duas direções ortogonais

(10)

3.2 Dispositivos de Entrada (A9)

– Mouse e Trackball

• Detectores Ópticos

– Medem distância percorrida, contando linhas em uma plaqueta especial (pad)

• Dois valores retornados podem ser vistos • Dois valores retornados podem ser vistos

como duas posições independentes

– Convertidos em uma posição 2D em » Coordenadas do mundo ou

» Coordenadas da tela – Conversão é feita

(11)

3.2 Dispositivos de Entrada (A9)

– Mouse e Trackball

• Dois valores retornados podem ser vistos também como duas velocidades

independentes

– Computador integra esses valores para obter – Computador integra esses valores para obter

posições

– Mudanças lentas pequenas distâncias – Mudanças rápidas grandes distâncias

∫

v_x v_y x y

(12)

3.2 Dispositivos de Entrada (A9)

– Mouse e Trackball

• São dispositivos de posicionamento relativo

– Se a bola não girar, a coordenada não muda – Posição absoluta da bola (ou do mouse) não é

utilizada

(13)

3.2 Dispositivos de Entrada (A9)

– Tablets

• Fornecem posicionamento absoluto

• Matriz de linhas e colunas de fios é embutida sob a superfícies do tablet

• Posição da caneta é detectada pela interação • Posição da caneta é detectada pela interação

de sinais eletromagnéticos percorrendo os fios do tablet com os sensores da caneta

(14)

3.2 Dispositivos de Entrada (A9)

– Telas sensíveis ao toque

• Funcionamento parecido com o tablet

– Touchpads

• podem ser configurados como

– Posicionador absoluto ou – Posicionador relativo

(15)

3.2 Dispositivos de Entrada (A9)

– Lightpen

• Contem um sensor luminoso (Célula fotoelétrica)

• Quando a luz emitida pelo fósforo excede um limiar,

– Sensor detecta a luz – Sensor detecta a luz

– Caneta emite sinal ao computador

– Como o ciclo de retraçarmento do Frame buffer inicia em um tempo determinado, t₀ , calcula-se ∆∆∆∆t=t_s-t_o e pode-se determinar a posição na tela.

• Dispositivo de posicionamento direto

(16)

3.2 Dispositivos de Entrada (A9)

– Joystick

• Movimentos em 2 direções ortogonais são codificados (potenciômetro + capacitor) codificados (potenciômetro + capacitor)

(17)

3.2 Dispositivos de Entrada (A9)

3.2.2 Dispositivos lógicos

– Dispositivos de entrada classificados pela

ótica do programa aplicativo

– Duas características comportamentais dos

dispositivos de entrada

• A medida que o dispositivo retorna ao programa

(18)

3.2 Dispositivos de Entrada (A9)

– Classes de dispositivos lógicos (PHIGS e

GKS)

• String • Locator • Pick • Pick • Choice • Dial • Stroke

(19)

3.2 Dispositivos de Entrada (A9)

– String

• Fornece ASCII strings ao programa aplicativo • Implementado pelo

– Teclado físico ou – Teclado virtual – Teclado virtual

(20)

3.2 Dispositivos de Entrada (A9)

– Locator

• Fornece posição em coordenadas do mundo ao programa de aplicação

• Implementado por dispositivos apontadores como

como

– Mouse – Trackball

• No OpenGL conversão de coordenadas do

(21)

3.2 Dispositivos de Entrada (A9)

– Pick

• Retorna o identificador de um objeto ao programa aplicativo

• Implementado pelos mesmos dispositivos físicos que implementam locator

físicos que implementam locator

– Mouse – Trackball

• Interface de software é diferente da do locator • No OpenGL pode-se usar um processo chamado

(22)

3.2 Dispositivos de Entrada (A9)

– Choice

• Permite que o usuário selecione uma dentre um número discreto de opções

• No OpenGL podem ser usadas widgets fornecidas pelo sistema de janelas

fornecidas pelo sistema de janelas

– Widgets são dispositivos de interface gráfica – Menus

– Scrollbars

(23)

3.2 Dispositivos de Entrada (A9)

– Dial ou valuators

• Provê entrada analógica ao programa aplicativo

– Usar widgets – Slidebars

– Limitados: controle de volume em rádio – Limitados: controle de volume em rádio

(24)

3.2 Dispositivos de Entrada (A9)

– Stroke

• Retorna um array de posições • Pressionar um botão do mouse

– Inicia transferência de posições ao array

• Liberar o botão do mouse • Liberar o botão do mouse

(25)

3.2 Dispositivos de Entrada (A9)

3.2.3 Medida e disparo

– Entidades que descrevem a maneira como

um dispositivo de entrada (físico ou

lógico) fornece input para o programa

aplicativo

– Medida

• O que o dispositivo retorna ao programa

– Disparo

• É um input físico no dispositivo com o qual o usuário pode enviar sinal ao computador

(26)

3.2 Dispositivos de Entrada (A9)

– Exemplos:

• Teclado

– Medida: string

– Disparo: Tecla de “return” ou “Enter”

• Locator • Locator

– Medida: posição

– Disparo: Botão do mouse ou da trackball

– Medida pode incluir informação de status

• Ajuda a identificar quando houve um disparo

(27)

3.2 Dispositivos de Entrada (A9)

3.2.4 Modos de entrada

– Pode-se obter a medida em 3 modos

– Cada modo é definido pela relação entre

• Processo de medida e

• Processo de medida e • Disparo

– Inicialização de um dispositivo de entrada

• Inicia o processo de medida

• Pode necessitar uma chamada explícita a uma função da API

(28)

3.2 Dispositivos de Entrada (A9)

– Request Mode (Solicitação)

• Medida só retorna ao programa após um disparo Request Medida Disparo Processo de disparo Programa Processo de medida

(29)

3.2 Dispositivos de Entrada (A9)

– Request Mode

• Exemplo 1: comando scanf

– Programa pára nesse comando

– Usuário pressiona as teclas, escrevendo a string – Pode demorar o tempo que quiser

– Os caracteres são colocados em um keyboard buffer – Conteúdo do buffer retorna ao programa após a tecla

(30)

3.2 Dispositivos de Entrada (A9)

– Request Mode

• Exemplo 2: Locator

– Mover o dispositivo apontador para a posição desejada

– Disparar pressionando um botão do dispositivo – Posição retorna ao programa aplicativo

(31)

3.2 Dispositivos de Entrada (A9)

– Sample Mode (amostragem)

• Medida retorna imediatamente após a chamada da função

• Não necessita disparo

• Usuário deve posicionar o dispositivo apontador • Usuário deve posicionar o dispositivo apontador

antes da chamada da função

Sample Medida Programa Processo de medida

(32)

3.2 Dispositivos de Entrada (A9)

– Request Mode e Sample Mode em APIs

• Usuário deve identificar qual o dispositivo que fornece o input

• Interfaces do tipo

– request_locator(device_id, &measure); – sample_locator(device_id, &measure); – sample_locator(device_id, &measure);

» device_id identifica o dispositivo

» measure guarda a medida do dispositivo

• Esses modos são úteis em situações em que o programa guia o usuário

(33)

3.2 Dispositivos de Entrada (A9)

– Event Mode (Evento)

Possibilidade 1

• Cada vez que um dispositivo é disparado um evento é gerado

• A medida e o identificador do dispositivo que • A medida e o identificador do dispositivo que

gerou o evento são colocados na fila de evento • Programa examina evento na frente da fila

– Se a fila estiver vazia, espera por um evento

– Se houver um evento, programa decide o que fazer

Processo de disparo Programa Processo de medida Fila de Evento Espera

(34)

3.2 Dispositivos de Entrada (A9)

– Event Mode (Evento)

Possibilidade 2

• Cada vez que um dispositivo é disparado um evento é gerado

• Cada tipo de evento é associado a uma função chamada callback

(35)

3.3 Cliente-Servidor (A9)

• Computação gráfica deve funcionar em

– Ambiente de computação distribuída e

redes

• Servidores executam tarefas para Clientes

• Cliente e servidores podem estar

– Distribuídos em uma rede ou

– Contidos na mesma unidade computacional

• Exemplos

– Servidores de impressão – Servidores de arquivos – Servidores gráficos

(36)

3.3 Cliente-Servidor (A9)

Servidor

de impressão Estação Estação Laptop

iMac

Servidor Servidor

(37)

3.3 Cliente-Servidor (A9)

– Servidor Gráfico

• Estação de trabalho com

– monitor raster – Keyboard

– Dispositivo apontador (mouse, trackball, etc.) – Dispositivo apontador (mouse, trackball, etc.) – …

– Programa OpenGL é um cliente que usa o

servidor gráfico

(38)

3.4 Display Lists (A9)

3.4.0 Introdução

– Idéia herdada

do “display processor”

dos anos 1960

Host Display Processor Display File

dos anos 1960

• Programa processado no host

• Lista compilada de instruções enviada ao DPU • Lista armazenada como display file (display

list) na display memory • Host liberado

(39)

3.4 Display Lists (A9)

– Hoje

• O antigo display processor tornou-se um servidor gráfico

• O programa do usuário tornou-se um cliente • O gargalo é a quantidade de dados que

• O gargalo é a quantidade de dados que trafega entre o cliente e o servidor gráfico

– Modos de enviar uma entidade gráfica do

cliente para o servidor gráfico

• Immediate mode • Retained mode

(40)

3.4 Display Lists (A9)

– Immediate mode

• Envia a descrição completa dos objetos

– Vertices – Atributos

– Tipos de primitivas – Tipos de primitivas

– Transformações de visualização

• Envia assim que o programa executa um comando que define a primitiva

(41)

3.4 Display Lists (A9)

– Retained mode

• Define o objeto uma vez

• Põe objeto em uma display list

– Há um overhead para isso

• Armazena a display list no servidor • Armazena a display list no servidor

– Servidor precisa de memória para isso

• Cliente envia uma chamada ao servidor

solicitando que a display list seja desenhada

– Diminui o tráfego na rede

– Cliente tira vantagem de hardware gráfico especializado disponível no servidor

(42)

3.4 Display Lists (A9)

3.4.1 Definição e execução de display

lists

– Análise de um exemplo em OpenGL

#define BOX 1 /* qualquer inteiro não utilizado */

glNewList(BOX, GL_COMPILE); glNewList(BOX, GL_COMPILE);

glBegin(GL_POLYGON); glColor3f(1.0, 0.0, 0.0); glVertex2f(-1.0, -1.0); glVertex2f( 1.0, -1.0); glVertex2f( 1.0, 1.0); glVertex2f(-1.0, 1.0); Comentário BOX: Identificador único

da display list

GL_COMPILE: indica que o sistema deve enviar a lista ao servidor mas

(43)

3.4 Display Lists (A9)

– Quando quiser desenhar a box (caixa)

chame a função

glCallList(BOX);

– Exemplo

Comentário

Cuidado com mudanças de estado causadas pela display list

glMatrixMode(GL_PROJECTION); for (i=1; i < 5; i++)

{

glLoadIdentity();

gluOrtho2D(-2.0*i, 2.0*i, -2.0*i, 2.0*i); glCallList(BOX);

}

list

Por exemplo: dentro da display list BOX, a cor é alterada para vermelho

(44)

3.4 Display Lists (A9)

3.4.2 Texto e display lists

– Ponha cada letra e símbolo do fonte

(raster ou stroke) em uma display list

– Armazene os fontes no servidor usando

as display lists

– Exemplo de como criar seu próprio fonte

com 256 caracteres

(45)

3.4 Display Lists (A9)

base = glGenLists(256); for (i=0; i < 256; i++) { glNewList(base+i, GL_COMPILE); OurFont(i); OurFont(i); glEndList(); } … Comentário

glGenLists(number): retorna o primeiro inteiro de uma

(46)

3.4 Display Lists (A9)

void OurFont(char c) { switch(c) { case ‘a’: … Comentário

Cada case deve conter os comando OpenGL para desenhar a letra

…

break; case ‘A’: …

break;

OpenGL para desenhar a letra correspondente.

(47)

3.4 Display Lists (A9)

– Desenhar letra O dentro de um quadrado

unitário

case ‘O’:

glTranslatef(0.5, 0.5, 0.0); glBegin(GL_QUAD_STRIP); glBegin(GL_QUAD_STRIP);

for(i=0; i<=12; i++)

{ angle = 3.14/6.0 * I; glVertex2f(0.4*cos(angle), 0.4*sin(angle)); glVertex2f(0.5*cos(angle), 0.5*sin(angle)); } glEnd(); glTranslatef(0.5, -0.5, 0.0);

(48)

3.4 Display Lists (A9)

– Como escrever as letras do font

armazenado

• Recuperar o identificador base das display lists do font

glListBase(base);

glListBase(base); • Desenhar a string

char *text_string;

(49)

3.4 Display Lists (A9)

• 3.4.3 Fonts na GLUT

– Alguns fonts

• Raster e

• Stroke

– Não fazem uso de display lists

– Acesso a um caracter ou a um conjunto de

carecteres uniformemente espaçados

glutStrokeCharacter(GLUT_STROKE_MONO_ROMAN,

(50)

3.4 Display Lists (A9)

– Exemplo

glPushMatrix(); glTranslatef(150.0, 190.0, 0.0); glScalef(0.38, 0.4, 1.0); glutStrokeCharacter(GLUT_STROKE_MONO_ROMAN, 'C'); glutStrokeCharacter(GLUT_STROKE_MONO_ROMAN, 'r'); glutStrokeCharacter(GLUT_STROKE_MONO_ROMAN, 'r'); glutStrokeCharacter(GLUT_STROKE_MONO_ROMAN, 'e'); glutStrokeCharacter(GLUT_STROKE_MONO_ROMAN, 't'); glutStrokeCharacter(GLUT_STROKE_MONO_ROMAN, 'o'); glPopMatrix();

(51)

3.4 Display Lists (A9)

– Acesso a caracteres raster

glutBitmapCharacter( GLUT_BITMAP_8_BY_13,

int character);

• São copiados diretamente no frame buffer • Não são afetados por transformações

• Não são afetados por transformações geométricas

• Usa a variável de estado “raster position”

• Cada vez que o comando é executado OpenGL move “raster position” um caracter para a

(52)

3.4 Display Lists (A9)

– Exemplo

glRasterPos2(rx, ry);

glutBitmapCharacter(GLUT_BITMAP_8_BY_13, 'C');

glutBitmapCharacter(GLUT_BITMAP_8_BY_13, 'r');

glutBitmapCharacter(GLUT_BITMAP_8_BY_13, 'e');

glutBitmapCharacter(GLUT_BITMAP_8_BY_13, 't');

(53)

3.5 Programando Input

Dirigido a Eventos (A10)

3.5.1 Usando o dispositivo apontador

– Dois tipos de eventos

• move event: mouse movido com um botão

pressionado

– medida (posição do mouse) enviada ao programa – medida (posição do mouse) enviada ao programa

• mouse event: botão pressionado ou liberado

– medida retornada inclui

» botão que gerou o evento

» estado do botão após o evento (up ou down) » Posição do cursor que acompanha o mouse, em

(54)

3.5 Programando Input

Dirigido a Eventos (A10)

– Usar função GLUT

glutMouseFunc(mouse)

– Função Callback

void mouse (int button, int state, int x, int y) {

{

if (button == GLUT_LEFT_BUTTON && state == GLUT_DOWN) exit();

}

(55)

3.5 Programando Input

Dirigido a Eventos (A10)

– Desenhando quadrados em uma janela

Código Fonte Código Exec

(56)

3.5 Programando Input Dirigido a

Eventos

3.5.2 Eventos de janelas

– Redimensionamento da janela

• reshape event

– Se a janela mudar de dimensões

• Desenhar objetos que estavam na janela?

– Precisa de uma função display

• O que fazer se o aspect ratio mudar?

– Para evitar distorção corrigir a viewport

(57)

3.5 Programando Input Dirigido a

Eventos

3.5.3 Eventos de teclado

– Ocorrem quando o

• mouse está dentro de uma janela e • uma tecla é pressionada

(58)

3.5 Programando Input Dirigido a

Eventos

3.5.3 Eventos de teclado

– Função GLUT

glutKeyboardFunc(keyboard); • Medidas Código Fonte Código Exec

– Código ASCII tha tecla pressionada – Posição do mouse

– Função callback

void keyboard(unsigned char key, int x, int y) {

(59)

3.5 Programando Input Dirigido a

Eventos

3.5.4 Os Callbacks Display e Idle

– Usar

glutDisplayFunc

(display);

• Quando GLUT determina que a window deve ser redesenhada

– Janela aberta pela primeira vez – Janela aberta pela primeira vez – Janela muda de posição

– Nova cena em uma animação

– Usar glutPostRedisplay();

• Função display vai ser executada no máximo uma vez cada vez que o programa entrar no main loop

(60)

3.5 Programando Input Dirigido a

Eventos

– Idle Callback é chamado quando não

acontecer nenhum evento

(61)

3.5 Programando Input Dirigido a

Eventos

3.5.5 Gerenciamento de janelas

– GLUT suporta

• Múltiplas janelas

• Subjanela de uma dada janela

– Exemplo de uma janela do primeiro nível

• Id = glutCreateWindow(“Second window”);

(62)

3.6 Menus (A11)

• Utilizar widgets de window toolkits

– Rapidez de desenvolvimento

– Estética da interface gráfica

• GLUT oferece pop-up menus

• Passos para definição de um menu

– Definir as entradas

– Associar o menu a um determinado botão

do mouse

(63)

3.6 Menus (A11)

// Defining the callback functions glutDisplayFunc(display);

// Creating a pop-up menu

glutCreateMenu(demo_menu); glutCreateMenu(demo_menu); glutAddMenuEntry("quit",1);

glutAddMenuEntry("increase square size",2); glutAddMenuEntry("decrease square size",3); glutAttachMenu(GLUT_RIGHT_BUTTON);

// Entering the main event loop glutMainLoop();

(64)

3.6 Menus (A11)

void demo_menu(int id) {

if (id == 1) exit(0);

else if (id == 2) size = size*2; else if (id == 3) size = size/2; else if (id == 3) size = size/2; glutPostRedisplay();

}

(65)

3.7 Picking (A11)

• Operação lógica de entrada

– Permite identificar um objeto desenhado

• Três modos

Verificar qual o objeto que intercepta o quadrado em torno

Verificar qual o objeto cujo retângulo limite

contém a posição

Consulta a cor do pixel e uma tabela

(66)

3.7 Picking (A11)

• Picking com retângulo limite

(bounding box)

– Definir um ponto de picking na tela

– Obter as coordenadas do mundo desse

ponto

– Determinar qual o retângulo limite que

contém o ponto

– Retornar o identificador do objeto

associado àquele retângulo limite

(67)

• Picking com back buffer

– Imagem renderizada no back buffer não é

exibida

– Desenhar objetos com as cores de picking

3.7 Picking (A11)

– Desenhar objetos com as cores de picking

– Obter posição com o mouse callback

– Usar glReadPixels() para obter cor do pixel

apontado pelo mouse

– Procurar na tabela objetos ×

×

cores o

identificador do objeto cuja cor é igual à

do pixel selecionado

(68)

3.7 Picking (A11)

3.7.1 Modo de picking e de seleção

– Como identificar primitivas cujas

projeções estão próximas a um ponto

selecionado na tela

– OpenGL provê um modo de renderização

chamado

selection mode

• Objetos não são renderizados no buffer de cores (frame buffer)

(69)

3.7 Picking (A11)

– GLint glRenderMode(GLenum mode);

• mode: GL_RENDER (default)

• mode: GL_SELECT

• mode: GL_FEEDBACK

– Modo GL_SELECT

• Antes de chamar glRenderMode(GL_SELECT); • Chamar glSelectBuffer(GLsizei size, GLuint

*buffer)

– Especifica o array de seleção buffer[size]

• Valor de retorno de glRenderMode usado para indicar o número de

hits

(número de objetos selecionados)

(70)

3.7 Picking (A11)

– Entrar modo de seleção

– Renderizar a cena

– Cada primitiva renderizada dentro do

volume de clipping gera uma mensagem

(hit)

– Cada

hit

é armazenado em um buffer

(name stack)

• Funções relacionadas ao name stack

– Inicialização

(71)

3.7 Picking (A11)

– Informações geradas na

name stack

chamada de hit list

–

hit list

é examinada após a renderização

• Para obter informação de picking

(72)

3.7 Picking (A11)

– Funções utilizadas

• void glSelectBuffer(GLsizei n, GLunint *buff)

– Define buff[size] para armazenar dados selecionados

• void glInitNames() • void glInitNames()

– Inicializa a pilha de nomes (name stack)

• void glPushName(GLunint name)

– Push name na pilha de nomes

• void glPopName()

(73)

3.7 Picking (A11)

– Observações

• Cada objeto a ser identificado é um conjunto de primitivas ao qual atribui-se um

identificador (name)

• Antes de renderizar o objeto, coloca-se seu identificador na pilha de nomes

identificador na pilha de nomes

• Não se pode carregar um identificador em uma pilha vazia

– glInitNames();

– glPushName(0); // 0 é um nome não utilizado

• Geralmente usa-se o mouse callback para

– entrar no modo de seleção

(74)

3.7 Picking (A11)

– ... Observações

• Quando retorna-se ao modo GL_RENDER

– glRenderMode(GL_RENDER) retorna o número de

hits processados

• Dentro do mouse callback

– Muda-se o volume de clipping para se obter hits na – Muda-se o volume de clipping para se obter hits na

região desejada (próxima à posição do mouse) – Usar gluPickMatrix(x, y, w, h, *vp)

» (x, y): posição do cursor em coordenadas da OpenGL window (origem no canto inferior esquerdo)

(75)

3.7 Picking (A11)

(76)

3.7 Picking (A11)

– Objetos que são renderizados dentro do

(77)

3.8 Um Programa Simples de

Pintura (A11)

• Ilustra o uso de

– Callbacks

– Display lists

– Projeto de um programa interativo

• Características

– Trabalhar com objetos geométricos

– Manipular pixels

– Oferecer atributos de controle

– Incluir menus

(78)

3.8 Um Programa Simples de

Pintura (A11)

• Esse programa tem

uma área de menu

que é parte do

canvas.

– Coordenadas do – Coordenadas do

mouse são testadas para identificar qual o menu selecionado

• Botão direito do

mouse ativa

pull-down menu “quit”

(79)

3.9 Animando Programas

Interativos (A12)

• Rotacionar um quadrado com single

buffer

• Modificar o programa para double

buffering

(80)

3.9 Animando Programas

Interativos (A12)

3.9.1 O quadrado giratório

– Função display:

• limpa frame buffer e • Desenha quadrado

(cos θθθθ_{, sin θ}θθθ₎

(-cos θθθθ_{, -sin θ}θθθ₎

(sin θθθθ_{, -cos θ}θθθ₎

(-sin θθθθ_{, cos θ}θθθ₎

– vértices no círculo trigonométrico

– Usar a função idle que incrementa o

ângulo θ

θ

– Usar a função mouse que chama a função

idle com um click no botão esquerdo

(81)

3.9 Animando Programas

Interativos (A12)

– Função display

void display() { glClear(GL_COLOR_BUFFER_BIT); glBegin(GL_POLYGON); thetar = theta/((2*3.14)/360.); thetar = theta/((2*3.14)/360.);

glVertex2f( cos(thetar), sin(thetar)); glVertex2f( -sin(thetar), cos (thetar)); glVertex2f( -cos(thetar), -sin(thetar)); glVertex2f( sin(thetar), -cos(thetar)); glEnd();

(82)

3.9 Animando Programas

Interativos (A12)

– Função idle

void idle() { theta+= 2; if(theta >= 360.) theta -= 360; if(theta >= 360.) theta -= 360; glutPostRedisplay(); }

(83)

3.9 Animando Programas

Interativos (A12)

– Função mouse

void mouse(int button, int state, int x, int y) { if(button==GLUT_LEFT&&state==GLUT_DOWN) glutIdleFunc(idle); glutIdleFunc(idle); if(button==GLUT_MIDDLE_BUTTON&&state==G LUT_DOWN) glutIdleFunc(NULL); }

(84)

3.9 Animando Programas

Interativos (A12)

3.9.2 Double Buffering

– Usa dois frame buffers para desenhar e

mostrar a cena

• Front buffer é mostrado

• Back buffer é usado para desenhar a próxima seqüência

– Trocar os dois buffers usando o comando

glutSwapBuffers();

(85)

3.10 Projeto de Programas

Interativos (A12)

• Características de um bom programa

interativo

– Imagem sem cintilação ou artefatos

– Variedade de dispositivos de interação

– Variedade de métodos para entrada e saída

de informações

– Interface com o usuário intuitiva

– Feedback para o usuário

– Tolerância aos erros do usuário

(86)

3.10 Projeto de Programas

Interativos (A12)

• Área de pesquisa responsável por isso

– IHC (Interação Humano-Computador)

– HCI (Human-Computer Interaction)

(87)

3.10 Projeto de Programas

Interativos (A12)

• 3.10.1 Toolkits, Widgets e o Frame

Buffer

– Toolkits

• GTK+/gtkmm (http://www.gtkmm.org/) • Trolltech Qt (http://www.trolltech.com/) • FOX Toolkit (http://www.fox-toolkit.com) • FLTK (http://www.fltk.org/)

• wxWindows (http://www.wxwindows.org/ ) • Tcl/Tk (http://www.tcl.tk/software/tcltk/)

(88)

3.10 Projeto de Programas

Interativos (A12)

3.10.1 Toolkits, Widgets e o Frame Buffer

• Widgets do wxWindows

(89)

3.10 Projeto de Programas

Interativos (A12)

3.10.1 Toolkits, Widgets e o Frame Buffer

• Frame Buffer

– Como menus e outros objetos podem

aparecer sobre o canvas sem danificar o

conteúdo

• Pop-up menus • Rubberbanding

– Duas soluções

• Bit-block-transfer (bitblt) • XOR operation

(90)

3.11 Operações Lógicas (A12)

• Exemplo de imagem danificada pelo

pop-up menu

Exit Exit

(91)

3.11 Operações Lógicas (A12)

• Exemplo de imagem danificada por

rubberbanding

(92)

3.11 Operações Lógicas (A12)

• Solução 1

– Quando a scan conversion da área do

pop-up menu ou da primitiva desenhada

com rubberband for feita

• Salvar os bits do Frame-buffer que irão ser • Salvar os bits do Frame-buffer que irão ser

substituídos

• Copiá-los de volta quando o pop-up menu desaparecer ou quando uma nova primitiva temporária do rubberbanding for desenhada

(93)

3.11 Operações Lógicas (A12)

• Solução 2

– Utilizar o XOR

Pixel Fonte: Pixel da primitiva a ser desenhada Pixel Lido: Pixel a ser substituído

Pixel Destino: Valor de substituição depois da Pixel Destino: Valor de substituição depois da operação lógica Color Buffer Pixel Fonte Pixel Lido Pixel Destino

(94)

3.11 Operações Lógicas (A12)

• Solução 2

– Utilizar o XOR

Pixel Fonte: 10100110 Pixel Lido: 10001011 Pixel Destino: 00101101 XOR XOR Pixel Destino: 00101101 Pixel Fonte: 10100110 Pixel Destino:10001011 Pixel Fonte Pixel Lido Pixel Destino XOR Pixel Lido

(95)

3.11 Operações Lógicas (A12)

• Solução 2 com OpenGL

– Sair do default Copy Mode: GL_COPY

• glEnable(GL_COLOR_LOGIC_OP);

(96)

3.11 Operações Lógicas (A12)

3.11.1 Desenhando linhas deletáveis

– Habilitar o modo de operações lógicas

glEnable(GL_COLOR_LOGIC_OP);

– Quando estiver desenhando objetos

temporários, mude para o modo XOR

(97)

3.11 Operações Lógicas (A12)

3.11.1 Desenhando linhas deletáveis

– No modo XOR

• Desenhe o objeto com a cor fonte

– A cor que aparece na tela é o resultado da operação XOR entre a cor fonte e a cor que estiver no frame XOR entre a cor fonte e a cor que estiver no frame buffer

• Para apagar o objeto, desenhe-o novamente com a cor fonte

– A cor que aparecerá na tela é a cor que estava no frame buffer antes do objeto ser desenhado a

(98)

3.11 Operações Lógicas (A12)

3.11.2 XOR e Cor

11111111 00000000 00000000 00000000 11111111 00000000 11111111 00000000 00000000 11111111 11111111 00000000 XOR

(99)

3.11 Operações Lógicas (A12)

3.11.3 Cursor e planos sobrepostos

(overlay)

– Desenhar cursor nos planos overlay

• Não interfere com a imagem RGB nos demais planos

planos

Red bit planes

Green bit planes

Blue bit planes

(100)