O VisEdu-CG é um aplicativo didático para auxiliar no ensino da disciplina de Computação Gráfica (CG) na FURB. Ele visa a prática dos conceitos de CG aprendidos em sala de aula e não a introdução desses conceitos, portanto é um aplicativo voltado para pessoas que já possuem um conhecimento prévio em CG.
O aplicativo é composto de 8 painéis, sendo que 5 deles são exibidos logo na abertura do aplicativo:
a) o painel Fábrica apresenta um editor onde o usuário pode realizar o encaixe de diversos tipos peças. Cada uma dessas peças representa e trabalha um conceito básico de computação gráfica;
b) o painel Espaço Gráfico exibe o resultado gráfico obtido através das peças encaixadas no editor;
c) o painel Visão da Câmera exibe a visão enxergada pela peça Câmera (inserida no editor) dentro do painel Espaço Gráfico;
d) o painel Propriedades da Peça, que fica embutido no painel Fábrica, exibe todas as propriedades gráficas pertinentes a peça selecionada no editor, permitindo o usuário alterá-las, a fim de modificar o resultado gráfico obtido no painel Espaço Gráfico;
e) o painel Arquivo permite exportar os encaixes de peças existentes no editor (através de uma string em formato JSON), abrir strings exportadas anteriormente ou abrir exemplos já prontos;
f) o painel Ajuda permite consultar informações e dicas a respeito do aplicativo e seu funcionamento.
- Utilize o duplo clique do mouse sobre um painel para chamar a tela de ajuda daquele painel
- Para selecionar uma peça basta pressionar sobre ela com o botão esquerdo do mouse ou selecionar a peça diretamente no Espaço Gráfico
- Para incluir um item, deve-se arrastar um item da fábrica até o painel de montagem
- Para remover uma peça, deve-se arrastar a peça até ficar sobre a fábrica
- Use a Lista de Peças para selecionar rapidamente uma peça do editor
O painel Fábrica compõe o editor do aplicativo, que é composto de dois painéis: o painel de montagem e a fábrica.
Painel de Montagem
O painel de montagem, é o principal ambiente de desenvolvimento da aplicação. Ele possui uma peça principal denominada Renderizador e todas as demais peças deverão ser encaixadas nesta peça.
Todos os outros painéis da aplicação irão tomar como base o resultado dos encaixes definidos neste painel.
Fábrica
A fábrica possibilita a criação de novas peças ou a remoção das peças já existentes dentro do painel de montagem. A fábrica permite a criação de 6 peças distintas:
a) Câmera: peça que representa uma câmera no ambiente gráfico. Através desta peça é possível editar os atributos de uma câmera do tipo perspectiva e avaliar o impacto de cada atributo;
b) Objeto gráfico: peça que representa uma objeto gráfico no ambiente gráfico. Um objeto gráfico é definido por um isolamento de transformações, através do empilhamento da matriz principal, e pode ser composto por transformações geométricas, objetos geométricos, e outros objetos gráficos. Através desta peça é possível visualizar a matriz resultante das transformações existentes no objeto gráfico;
c) Cubo: peça que representa um objeto geométrico no ambiente gráfico. Através desta peça é possível editar os atributos de um objeto do tipo cubo e avaliar o impacto de cada atributo;
d) Polígono: peça que representa um objeto geométrico no ambiente gráfico. Através desta peça é possível editar os atributos de um objeto do tipo polígono e avaliar o impacto de cada atributo;
e) Spline: peça que representa um objeto geométrico no ambiente gráfico. Através desta peça é possível editar os atributos de um objeto do tipo spline e avaliar o impacto de cada atributo;
f) Transladar: peça que representa uma translação de um objeto gráfico no ambiente grafico. Através desta peça é possível editar os atributos de uma translação no ambiente gráfico e avaliar o impacto de cada atributo;
g) Rotacionar: peça que representa uma rotação de um objeto geométrico no ambiente gráfico. Através desta peça é possível editar os atributos de uma rotação e avaliar o impacto de cada atributo (cada atributo corresponde a um valor em graus);
h) Escalar: peça que representa uma transformação escalar de um objeto geométrico no ambiente gráfico. Através desta peça é possível editar os atributos de uma transformação escalar e avaliar o impacto de cada atributo.
i) Iluminação: peça que representa a iluminaçãoda cena no ambiente gráfico. Através desta peça é possível editar os atributos da iluminação e avaliar o impacto de cada atributo.
INCLUINDO PEÇAS
Para incluir uma peça, deve-se arrastar uma das peças da fábrica até o painel de montagem.
ENCAIXANDO PEÇAS
Para encaixar uma peça, deve-se arrastar a peça até o cursor do mouse ficar posicionado sobre uma encaixe compatível com a peça sendo arrastada.
SELECIONANDO PEÇAS
A seleção pode ser efetuada de três formas: pressionanado o botão esquerdo do mouse sobre a peça, clicando na peça na Lista de Peças ou clicando diretamente sobre o objeto no Espaço Gráfico
Quando um objeto for selecionado, automaticamente será exibido o painel com as propriedades da peça.
REMOVENDO PEÇAS
Para remover uma peça, deve-se arrastar a peça até ficar sobre o painel Fábrica. Neste momento a cor da lixeira irá mudar, indicando que o item será removido quando o botão do mouse for solto.
O painel Espaço Gráfico exibe o resultado gráfico obtido através das peças encaixadas no editor.
O painel Visão da Câmera é um subcomponente deste painel.
Este painel exibe um espaço (2D/3D) que possui 4 componentes principais:
a) indicador dos eixos x, y e z: são tres retas que indicam a direção desses eixos a partir do ponto [0,0,0] que são identificadas pelas cores vermelho (x), verde (y) e azul (z);
Caso o tipo de gráfico for 2D o eixo z não ficará visível.
b) grade: um plano em forma de grade, centralizado no ponto [0,0,0], que se estendo pelos planos x e z, auxiliando na percepção da profundidade do ambiente;
Caso o tipo de gráfico for 2Da grade não ficará visível.
c) pirâmide da câmera: uma pirâmide tridimensional de 4 lados que indica a amplitude da visão da câmera dentro do ambiente gráfico;
d) cubos: são cubos que representam as peças cubos encaixadas no editor, levando em conta as transformações aplicadas sobre os as mesmas.
e) polígonos: são polígonos que representam as peças Polígono encaixadas no editor, levando em conta as transformações aplicadas sobre os as mesmas.
f) splines: são splines que representam as peças Spline encaixadas no editor, levando em conta as transformações aplicadas sobre os as mesmas.
AJUSTANDO VISUALIZAÇÃO DO ESPAÇO GRÁFICO
É possível ajustar o ponto de vista do Espaço Gráfico usando os botões do mouse:
a) botão esquerdo: ao pressionar o botão esquerdo e arrastar o mouse, o ponto de vista é rotacionado em relação ao ponto [0,0,0];
b) botão direito: ao pressionar o botão esquerdo e arrastar o mouse, o ponto de vista é transladado por um plano perpendicular a reta formada entre o ponto de vista atual e o ponto [0,0,0];
c) botão de rolagem: ao rolar o botão de rolagem do mouse, é possível aumentar ou diminuir o zoom do ponto de vista.
O painel Visão da Câmera exibe a visão enxergada pela peça Câmera dentro do painel Espaço Gráfico.
Através deste painel é possível observar o ponto de vista da peça Câmera, em relação aos objetos existentes no Espaço Gráfico. Os demais componentes do Espaço Gráfico (indicador dos eixos x, y e z, grade e pirâmide da câmera) não serão enxergados neste painel.
A cor de limpeza do renderizador da Visão da Câmera usa a cor de limpeza definida nas propriedades da peça Renderizador do editor.
O painel Propriedades da Peça fica embutido no painel Fábrica e exibe todas as propriedades gráficas pertinentes a peça selecionada no editor.
Ele permite que o usuário altere as propriedades de cada peça, afim de modificar o resultado gráfico obtido no painel Espaço Gráfico.
Entre as propriedades da cada peça, existem 6 tipos de dados diferentes:
a) Texto: é exibida uma caixa de texto editável. Os dados serão atualizados na peça assim que o foco sair da caixa de texto;
b) Numérico: é exibida uma caixa de texto editável. O valor será submetido somente quando for composto por valores numéricos. É possível incrementar o valor com as setas do teclado.
c) Cor: é exibida uma caixa de texto com o código RGB hexadecimal da cor. Ao entrar na caixa de texto, será exibido um painel colorido que permite selecionar uma cor qualquer apenas pressionando com o mouse, contudo também é possível informar uma cor através do valor RGB hexadecimal da mesma. Os dados serão atualizados na peça assim que o foco sair da caixa de texto;
d) Caixa de seleção: é exibida uma caixa de seleção que permite definir o valor positivo ou negativo para a propriedade;
e) Imagem: é exibido um botão que permite carregar uma imagem local;
f) Lista: exibe uma lista de opções, das quais o usuário poderá selecionar uma.
O painel Arquivo permite exportar os encaixes de peças existentes no editor (através de uma string em formato JSON), abrir strings exportadas anteriormente ou abrir exemplos já prontos.
Ele possui 2 opções:
a) Abrir: exibe um painel onde é possível abrir uma string do aplicativo exportada anteriormente. É possível abrir essa string através de um arquivo local, informando a string diretamente no painel de texto ou selecionando um dos exemplos na lista de exemplos;
b) Exportar: abre uma nova janela/guia com uma string representando os encaixes existentes no editor.
O painel Ajuda permite consultar informações e dicas a respeito do aplicativo e seu funcionamento.
VisEdu-CG - Aplicação Didática para Visualizar Material Educacional
Módulo Computação Gráfica
Versão 1.0
Acadêmico: Luciana Pereira de Araújo
Orientador: Dalton Solano dos Reis
Versão 2.0
Acadêmico: James Perkison Montibeler
Orientador: Dalton Solano dos Reis
Versão 3.0
Acadêmico: Samuel Anderson Nunes
Orientador: Dalton Solano dos Reis
Versão 4.0
Acadêmico: William Fernandes Koehler
Orientador: Dalton Solano dos Reis