animaÇÃo de algoritmos - departamento de … · encarem isso como um jogo ("quiz") e...

28
LUIS GUILHERME BAPTISTA CORDEIRO ANIMAÇÃO DE ALGORITMOS Trabalho de graduação do Curso de Ciência da Computação do Setor de Ciências Exatas da Universidade Federal do Paraná. Professor: André Luiz Pires Guedes Curitiba, Maio de 2007

Upload: dominh

Post on 22-Sep-2018

218 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: ANIMAÇÃO DE ALGORITMOS - Departamento de … · encarem isso como um jogo ("quiz") e que professores utilizem os ... Animação de Algoritmos em Linguagens Visuais - Paul Carlson

LUIS GUILHERME BAPTISTA CORDEIRO

ANIMAÇÃO DE ALGORITMOS

Trabalho de graduação do Curso de Ciência da Computação do Setor de Ciências Exatas da Universidade Federal do Paraná.

Professor: André Luiz Pires Guedes

Curitiba, Maio de 2007

Page 2: ANIMAÇÃO DE ALGORITMOS - Departamento de … · encarem isso como um jogo ("quiz") e que professores utilizem os ... Animação de Algoritmos em Linguagens Visuais - Paul Carlson

ÍNDICE

1 INTRODUÇÃO............................................................................................................42 CONCEITOS DE ANIMAÇÃO DE ALGORITMOS.................................................53 VISÃO GERAL DO SISTEMA....................................................................................8

3.1 Biblioteca de Animação linguagem C ............................................................................. 9 3.1.1 Envia_msg(char * mensagem, char * host_ip , char * porta) .................................................... 103.1.2 Camada de comunicação linguagem C e Java............................................................................ 103.1.3 Camada de animação linguagem Java........................................................................................ 10

4 IMPLEMENTAÇÃO VISUAL PARA ARVORE BINÁRIA.....................................125 TESTES REALIZADOS............................................................................................16

5.1VItem ................................................................................................................................ 17

5.2 VArray ............................................................................................................................. 18

5.3 VLinkedList ..................................................................................................................... 19

5.4 VTree ............................................................................................................................... 20

6 EXEMPLO DE IMPLEMENTAÇÃO EM C PARA ANIMAR UMA ÁRVORE BINÁRIA........................................................................................................................217 INSERINDO UMA NOVA CLASSE DE ANIMAÇÃO............................................248 DIFICULDADES ENCONTRADAS........................................................................259 IMPLEMENTAÇÕES FUTURAS............................................................................2610 CONCLUSÃO...........................................................................................................2711 REFERÊNCIAS BIBLIOGRÁFICAS....................................................................28

Page 3: ANIMAÇÃO DE ALGORITMOS - Departamento de … · encarem isso como um jogo ("quiz") e que professores utilizem os ... Animação de Algoritmos em Linguagens Visuais - Paul Carlson

ÍNDICE DE FIGURAS

Figura 1 – Visão geral do sistema....................................................................................9Figura 2 – Estrutura para uma árvore binária executada...........................................12Figura 3 – Nodo raiz acrescentado................................................................................12Figura 4 – Adição de uma novo nodo menor que a raiz...............................................13Figura 5 – Resultado para a adição de vários elementos.............................................13Figura 6 – Removido o nodo folha de valor 40.............................................................14Figura 7 – Removido o nodo de valor 17......................................................................14Figura 8 – Novo valor raiz para a árvore binária.........................................................15Figura 9 - Executando ordem número 1 da tabela 5....................................................17Figura 10 - Executando ordem número 6 da tabela 5..................................................17Figura 11 - Executando ordem número 3 da tabela 6..................................................18Figura 12 - Executando ordem número 6 da tabela 6..................................................18Figura 13 - Executando ordem número 2 da tabela 7..................................................19Figura 14 - Executando ordem número 5 da tabela 7..................................................19Figura 15 - Executando ordem número 8 da tabela 7..................................................19Figura 16 - Executando ordem número 6 da tabela 8..................................................20Figura 17 - Executando ordem número 7 da tabela 8..................................................20

Page 4: ANIMAÇÃO DE ALGORITMOS - Departamento de … · encarem isso como um jogo ("quiz") e que professores utilizem os ... Animação de Algoritmos em Linguagens Visuais - Paul Carlson

ÍNDICE DE TABELAS

Tabela 1.............................................................................................................................7Tabela 2.............................................................................................................................8Tabela 3.............................................................................................................................8Tabela 4.............................................................................................................................8Tabela 5...........................................................................................................................17Tabela 6...........................................................................................................................18Tabela 7...........................................................................................................................19Tabela 8...........................................................................................................................20

1 INTRODUÇÃOO presente trabalho tem por finalidade continuar a implementação de um

sistema que, ao identificar um algoritmo sendo executado, reproduza uma animação correspondente na tela, atualizada em tempo de execução. A primeira versão do sistema foi realizada no trabalho de graduação dos alunos Augusto Hellvig, Rafael Braschi Gaio e Rafael Campiolo Luz [1], que será descrito adiante.

Este sistema pode, inicialmente, ter duas funções:• Função didática: as animações podem ser utilizadas como mais um meio

de se mostrar e ensinar o funcionamento de um algoritmo. Figuras e animações são mais interessantes e motivadoras;

• Rastreamento de erros (debug): as animações podem dar ao programador uma visão melhor do que de fato está acontecendo no código-fonte animado, pois formas abstratas costumam ser mais compreensíveis e universais do que na forma escrita.

Analisando as possibilidades e atentando para o fato de que este é um projeto acadêmico e não comercial, o seu desenvolvimento foi voltado para um sistema de animação flexível e não engessado. Para tanto, foi posto de lado a necessidade de no resultado final, obter um projeto gráfico avançado e uma interface amigável.

O foco deste trabalho de graduação foi a padronização de um código fonte e a transformação para um código animado, utilizando e complementando a biblioteca de animações já desenvolvida no trabalho de graduação que serviu de base para este.

No capítulo dois serão apresentados formas conceituais na animação de algoritmos e trabalhos já desenvolvidos para este tema. Em seguida, será feito uma explanação do trabalho desenvolvido, suas características internas e animações desenvolvidas. No capítulo 5 são apresentados diversos momentos das animações de estruturas que este trabalho contempla. Para finalizar, no capítulos 8 e 9 são apresentadas as dificuldades encontradas na modelagem e desenvolvimento deste trabalho de graduação, sugestão para implementações futuras e a conclusão obtida ao longo de todo o esforço despedido para tornar este estudo em uma fonte de referência para outras pessoas que queriam auxiliar no aprendizado de uma lógica de programação.

Page 5: ANIMAÇÃO DE ALGORITMOS - Departamento de … · encarem isso como um jogo ("quiz") e que professores utilizem os ... Animação de Algoritmos em Linguagens Visuais - Paul Carlson

2 CONCEITOS DE ANIMAÇÃO DE ALGORITMOSA animação de um algoritmo é uma forma de visualização de seu

comportamento, onde se utiliza a tecnologia de computação e técnicas de animação para permitir uma melhor apresentação e entendimento da lógica envolvida em suas operações.

Através da animação pode-se observar certas características do algoritmo que poderiam passar despercebidas, alem de ser possível analisar o seu comportamento diante de diferentes conjuntos de dados de entrada.

Segundo Röbling e Naps [2], alguns requisitos interessantes para um visualizador de algoritmos são:

• O sistema deve ser acessado facilmente, o que significa não oferecer muitas restrições para usuários interessados. Atualmente, isto sugere que se utilize uma aplicação ou um applet Java;

• Sistemas genéricos, que não sejam específicos para uma determinada área;

• Permitir entrada de dados pelo usuário. Essa interatividade ajuda o usuário a entender o que está se passando na tela, facilitando o aprendizado;

• Capacidade de rebobinação. É interessante dar este controle ao usuário, para que, em caso de não entendimento de uma determinada ação, possa voltar ao ponto de dúvida e não necessariamente ter de reiniciar toda a animação;

• Divisão do algoritmo animado em pontos-chave, para que o usuário possa saltar diretamente para pontos críticos da animação;

• Previsão interativa. O sistema deve oferecer o recurso de interromper a animação em pontos-chave e perguntar ao estudante o que acontecerá em seguida. Caso a resposta seja errada, o que significa que o espectador não entendeu o que está acontecendo, não vale a pena continuar a animação. Deve-se então retornar ao ponto-chave anterior ou exibir uma explicação mais clara.

• Ligar o sistema a um banco de dados que grave as respostas dos alunos às perguntas feitas nos pontos-chave. Isso evita que alguns alunos encarem isso como um jogo ("quiz") e que professores utilizem os resultados em alguma forma de avaliação;

• Explicações textuais na tela em paralelo às animações sendo realizadas, pois o usuário pode ficar confuso ou não entender o que significam ou em qual passo está a animação;

• Animação suave, para que o espectador possa entender as mudanças entre operações sucessivas.

Foi procurado atender ao máximo esses requisitos, mas mesmo assim apenas alguns foram atendidos ou parcialmente atendidos, devido à grande dificuldade em implementá-los em um mesmo sistema.

Recentemente, foram apresentados alguns trabalhos que têm vindo dar suas contribuições no sentido de criar um sistema que evite uma programação exaustiva e inflexível de animações.

• BROWN, NAJORK e RAISAMO [3] - Animação de Algoritmos Java usando Tipos de Dados Auto-animados - M. H. Brown apresenta um sistema chamado JELIOT que, embora não recorra a código adicional, usa tipos de

Page 6: ANIMAÇÃO DE ALGORITMOS - Departamento de … · encarem isso como um jogo ("quiz") e que professores utilizem os ... Animação de Algoritmos em Linguagens Visuais - Paul Carlson

dados especiais. O código Java fica sujeito a uma pré-compilação e a animação é gerada automaticamente.

• DOMINGUE e MULHOLLAND [4] - Criação de páginas web para animação de algoritmos - J. Domingue apresenta um sistema baseado no modelo BALSA que usa algoritmos anotados com chamadas a procedimentos.

• CARLSON, BURNETT e CADIZ [5] - Animação de Algoritmos em Linguagens Visuais - Paul Carlson e Margaret Burnett apresentam uma extensão visual do paradigma Path Transition usado por Stasko no sistema TANGO.

• VODISLAV [6] - Modelo de Programação Visual para Animação de Interfaces - Vodislav apresenta um modelo para animação de interfaces que permite programação visual dessa mesma animação. Este modelo, chamado HANDMOVE, também se baseia no sistema TANGO

Na tabela 1 encontra-se uma análise de diversas formas possíveis de animação contextualizando o presente trabalho no mundo da animação:

Page 7: ANIMAÇÃO DE ALGORITMOS - Departamento de … · encarem isso como um jogo ("quiz") e que professores utilizem os ... Animação de Algoritmos em Linguagens Visuais - Paul Carlson

IMPLEMENTAÇÃO VANTAGENS DESVANTAGENSAnimador ideal anima automaticamente a partir de algoritmo dado.

Anima "magicamente" qualquer algoritmo.

A implementação não é trivial.

Uso de técnicas baseadas em parsers, heurísticas e conceitos de IA, para inserção de código animado.

Tentativa de inserção automática.

Possibilidade de inserções errôneas e inúteis de chamadas de animação.

Sistema de inserção de linguagem genérico com pré-compilador.

Animação em linguagens diversas sem necessidade de adaptações.

Uso de pré-compilador; Limitação de escopo para diversas características de linguagens de programação.

Esta implementação utilizando uma biblioteca em Java sendo chamada por uma interface dinâmica em C; Biblioteca de animação de algoritmos em linguagem específica.

Animação dinâmica; Reusabilidade; Padronização de animação; Encapsulamento da animação.

Inserção manual de chamada de animação; Animação de linguagem Específica.

Uso de bibliotecas gráficas de animação para algoritmos específicos.

Diminui o custo relacionado a desenho.

Limita os formatos e interações entre objetos.

Coleção de applets animados específicos.

Resultado gráfico superior e bem detalhado.

Baixo reaproveitamento; Alterações de código e dados demandam igual alteração na parte gráfica.

Tabela 1

Page 8: ANIMAÇÃO DE ALGORITMOS - Departamento de … · encarem isso como um jogo ("quiz") e que professores utilizem os ... Animação de Algoritmos em Linguagens Visuais - Paul Carlson

3 VISÃO GERAL DO SISTEMAO sistema proposto anima um algoritmo implementado em linguagem C,

através de chamadas de funções de animação inseridas pelo programador no código-fonte a ser animado.

Ele foi subdividido em três camadas:• Biblioteca de animação (implementada em linguagem C): comandos

inseridos pelo usuário no código-objeto que enviam as mensagens de animação para a camada de comunicação;

• Camada de comunicação (implementada em linguagem C e Java): recebe as mensagens da primeira camada, faz o tratamento inicial e as envia para a camada de animação;

• Camada de animação (implementada em linguagem Java): recebe as mensagens de comandos e gera as animações na tela.

Através de uma função única da biblioteca de animação, o usuário envia comandos de animação que chegarão à camada gráfica. A função em C Envia_msg() carrega uma mensagem em formato “string”, com informações como identificação da variável, tipo de estrutura, valores, etc, separados por vírgula e a envia para o servidor da camada de comunicação.

O servidor, ao receber uma mensagem de inicialização, instancia os objetos conforme os comandos recebidos criando desta forma uma estrutura “espelho” à estrutura utilizada em C. Caso a mensagem seja um comando de animação, procura-se entre os objetos instanciados o objeto alvo da ação e o método correspondente é executado.

O fluxo geral do sistema é, portanto, o seguinte:

• Fluxo comum a toda animação:Passo Linguagem Função/Método

1 C Montar a mensagem2 C Envia_Msg()3 Java Servidor.receiveMsg()4 Java Servidor.getMsg()5 Java Animator.msgDealer()

Tabela 2• Fluxo de inicialização:

Passo Linguagem Função/Método6 Java Animator.initializeObj()

Tabela 3• Fluxo de animação:

Passo Linguagem Função/Método7 Java Animator.animate()8 Java (Estrutura).execCmd()

Tabela 4

Page 9: ANIMAÇÃO DE ALGORITMOS - Departamento de … · encarem isso como um jogo ("quiz") e que professores utilizem os ... Animação de Algoritmos em Linguagens Visuais - Paul Carlson

3.1 BIBLIOTECA DE ANIMAÇÃO LINGUAGEM CÉ uma biblioteca composta por funções que, ao serem colocadas

conforme instruções em um código a ser animado (código objeto), comunica-se por meio de mensagens com a camada de animação (Java) através de socket.

Com o intuito de implementar uma forma simples de codificação visando facilitar o trabalho de quem usa a biblioteca para animar algoritmos, foram observadas as seguintes características: • Agrupamento de atividades em uma mesma função; • Flexibilidade de criação de novas características e de utilização em

conjunto com outras ferramentas; • Implementação natural nos moldes ANSI C; • Passagem de variáveis, valores ou constantes da mesma forma,

abstraindo, portanto, questões de conversão de tipos.

Figura 1 – Visão geral do sistema

Mensagem de Inicialização

PortaHost

Comando de Animação

Especifica estru-tura, valores, etc

Envia_msg()

J A V A

MONTA MENSAGEM

Page 10: ANIMAÇÃO DE ALGORITMOS - Departamento de … · encarem isso como um jogo ("quiz") e que professores utilizem os ... Animação de Algoritmos em Linguagens Visuais - Paul Carlson

3.1.1 ENVIA_MSG(CHAR * MENSAGEM, CHAR * HOST_IP , CHAR * PORTA) Objetivo: Função principal da biblioteca. Tem por objetivo enviar todas

as ações para o animador, desde a inicialização do animador, passando por toda animação, até o encerramento da execução do interpretador.

Características: A função em questão deve ser utilizada para enviar todo e qualquer comando de animação para camada Java, sendo composta por parâmetros fixos.

Os parâmetros fixos são: • Mensagem que o animador Java deve interpretar; • IP do computador que será usado na animação;• Porta a qual foi aberta à conexão do animador.

A comunicação da biblioteca com o animador Java foi implementada através do uso de sockets. As mensagens são enviadas para o servidor/porta configurados na etapa de inicialização do animador. A função que implementa a comunicação é interna à biblioteca e tem por característica ser síncrona, isto é, envia um determinado comando e espera (indefinidamente) uma resposta para que continue o processamento.

3.1.2 CAMADA DE COMUNICAÇÃO LINGUAGEM C E JAVA

Esta camada tem como objetivo implementar e controlar a comunicação entre as outras duas camadas, através da troca de mensagens. A troca de mensagens foi implementada com socket. Esta função, após enviar uma mensagem, aguarda até que a outra "ponta" envie a mensagem de retorno para que então o algoritmo possa prosseguir. Este passo é muito importante, pois é ele que garante o sincronismo entre as duas camadas.

Fonte: JAVA (package communication) • Servidor.java: classe utilizada para inicializar a conexão via socket, enviar e

receber mensagens e finalizar conexão.

3.1.3 CAMADA DE ANIMAÇÃO LINGUAGEM JAVA

Esta camada recebe as mensagens da camada de comunicação, as interpreta e desenha na tela. Podemos dividir esta camada nos seguintes componentes:

• Gráfica (package graphics): parte da aplicação responsável pela animação do algoritmo, de acordo com as mensagens recebidas. Fontes: o Animator.java: trata as mensagens recebidas e chama os comandos de

animação de acordo com o recebido. Também inicializa e faz o gerenciamento de janelas;

o Start.java: classe com o método "main", que instancia um servidor e fica "escutando" na espera de novas mensagens.

• Estruturas (package structures): são as estruturas visuais a serem animadas e outras auxiliares. A forma básica deste sistema inclui estruturas para animar uma variável (alfanumérica), um vetor ou uma lista encadeada. Classes: o VStructure: esta interface serve para padronizar as estruturas visuais.

Obriga que elas implementem o método execCmd();

Page 11: ANIMAÇÃO DE ALGORITMOS - Departamento de … · encarem isso como um jogo ("quiz") e que professores utilizem os ... Animação de Algoritmos em Linguagens Visuais - Paul Carlson

o ObjectList: classe auxiliar. É uma lista (Vector) de objetos genéricos, para guardar os objetos (de vários tipos) que estão na tela. Esta classe vincula cada objeto a seu nome e possui método de busca por este parâmetro;

o VItem: item visual. Este é o menor elemento visual que pode ser animado. Diretamente, este item pode ser utilizado para representar variáveis numéricas int, double, float...) e alfabéticas (char e char[]). Indiretamente esta classe pode compor outras classes visuais, como um vetor, por exemplo. Operações possíveis:

♦ Atribuição de valor; ♦ Anular valor da variável; ♦ Movimento da variável em linha reta pela janela;♦ Remoção da variável da tela.

o VArray: "array" visual. Esta classe representa um vetor de qualquer tipo. É composta por um "array" do tipo VItem e outros atributos e métodos para sua manipulação. Operações possíveis:

♦ Atribuição de valor a uma posição qualquer do vetor; ♦ Limpeza de uma posição qualquer do vetor; ♦ Limpeza de todo o vetor; ♦ Troca de posições entre dois elementos do vetor;♦ Remoção do vetor da tela.

o VListItem: item visual da lista encadeada. É uma subclasse de VItem, portanto herda seus atributos e métodos, além de ter atributos e métodos próprios para utilização na lista encadeada. Objetos desta classe não executam operações diretamente.

o VLinkedList: lista visual. Este tipo abstrato de dados representa uma lista de vários objetos da classe VListItem. Operações possíveis:

♦ Adição e/ou encadeamento entre os elementos do contexto da lista;

♦ Alteração do primeiro elemento da lista; ♦ Remoção de elemento do contexto da lista;♦ Remoção da lista da tela.

o VTree: esta classe representa uma árvore binária composta de valores numéricos. É composta de um ou mais VItem´s ligados por hastes para caracterizar a estrutura de uma árvore. Possui ainda outros atributos e métodos para sua manipulação. Operações possíveis:

♦ Atribuição de elemento na estrutura da árvore; ♦ Remoção de elemento da estrutura da árvore; ♦ Remoção da estrutura da árvore da tela.

Page 12: ANIMAÇÃO DE ALGORITMOS - Departamento de … · encarem isso como um jogo ("quiz") e que professores utilizem os ... Animação de Algoritmos em Linguagens Visuais - Paul Carlson

4 IMPLEMENTAÇÃO VISUAL PARA ARVORE BINÁRIA

Este capítulo visa demonstrar como deve ser informado as mensagens, através da camada C, para que possa obter um resultado satisfatório quanto à manipulação visual de uma árvore binária.

Para inicializar um componente visual que exiba essa organização, é preciso passar as seguintes informações: nome simbólico para a estrutura, “inicializaobj” (palavra fixa indicando que está iniciando uma estrutura), “vtree” (palavra fixa indicando o tipo da estrutura) e altura máxima que a árvore poderá obter. A figura 2 demonstra o resultado para a seguinte mensagem: “,Árvore,inicializaobj,vtree,10”.

Figura 2 – Estrutura para uma árvore binária executada

Para adicionar um novo nodo, a objeto faz uso do método insertNode passando os parametros: nome simbólico para a estrutura, “add” (palavra fixa indicando a adição de um nodo), nome do nodo e valor do nodo. Caso não exista ainda nós na árvore, será criado um nodo com as informações contidas no parâmetro e será apresentado como raiz. Na figura 3 o resultado para a mensagem “,Árvore,add,&15,15”.

Figura 3 – Nodo raiz acrescentado

Page 13: ANIMAÇÃO DE ALGORITMOS - Departamento de … · encarem isso como um jogo ("quiz") e que professores utilizem os ... Animação de Algoritmos em Linguagens Visuais - Paul Carlson

Em caso de já existir um nodo raiz, será comparado se o valor do novo nodo é menor ou maior que o nodo existente e então será criado um novo item ao lado esquerdo ou direito respectivamente. Na figura 4 é demonstrado o resultado para a seguinte mensagem “,Árvore,add,&10,10”

Figura 4 – Adição de uma novo nodo menor que a raiz

Para poder prosseguir com mais uma funcionalidade da classe Vtree, a figura 5 exibe a visualização de um número maior de nodos adicionados à estrutura.

Figura 5 – Resultado para a adição de vários elementos

Page 14: ANIMAÇÃO DE ALGORITMOS - Departamento de … · encarem isso como um jogo ("quiz") e que professores utilizem os ... Animação de Algoritmos em Linguagens Visuais - Paul Carlson

Para remover um elemento, o método removeNode é invocado com os parametros: nome simbólico para a estrutura, “rem” (palavra fixa indicando a remoção de um nodo), nome do nodo e valor do nodo. Conceitualmente, a deleção de um nodo pode implicar em diversos comportamentos na estrutura de uma arvore binária, que podem ser:−se o nodo a ser excluído for um nodo sem “filhos”, eles simplesmente será deletado assim como sua ligação com nodo “pai”. Exemplo visualizado na figura 6 quando a mensagem “Arvore,rem,&40,40” é interpretada;

Figura 6 – Removido o nodo folha de valor 40

−se o nodo a ser deletado possui somente um filho, este assume a posição do nodo deletado e todos os nos ligados a ele (caso tenha) são rearranjados em sua posições. Ver figura XX onde é mostrado a execução para a mensagem “Arvore,rem,&17,17”;

Figura 7 – Removido o nodo de valor 17

Page 15: ANIMAÇÃO DE ALGORITMOS - Departamento de … · encarem isso como um jogo ("quiz") e que professores utilizem os ... Animação de Algoritmos em Linguagens Visuais - Paul Carlson

−se o nodo a ser excluído possui filho a direita, é realizado uma busca em toda a subarvore direita buscando o menor elemento. Ao ser encontrado, este assume a posição do nodo excluído e a subarvore é redesenhada caso for preciso como na fig XX, a qual exibe o resultado para mensagem “Arvore,rem,&15,15”.

Figura 8 – Novo valor raiz para a árvore binária

Page 16: ANIMAÇÃO DE ALGORITMOS - Departamento de … · encarem isso como um jogo ("quiz") e que professores utilizem os ... Animação de Algoritmos em Linguagens Visuais - Paul Carlson

5 TESTES REALIZADOSOs testes seguiontes foram realizados utilizando-se mensagens fixas

(hardcode), dentro dos padrões determinados, para testes exclusivos do comportamento das animações das estruturas.

Portanto, este teste não valida a biblioteca de animação em C nem a forma de comunicação. Testa, apenas, diferentes situações de animação.

Page 17: ANIMAÇÃO DE ALGORITMOS - Departamento de … · encarem isso como um jogo ("quiz") e que professores utilizem os ... Animação de Algoritmos em Linguagens Visuais - Paul Carlson

5.1VITEMOrdem Mensagem Comportamento Esperado Resultado

0 ",a,inicializaobj,vitem," Adicionar um item visual na tela com nome "a" e valor vazio.

OK

1 ",a,setvalue,7" Atribuir o valor "7" à variável "a". OK

2 ",a,clear" Anular o valor de "a". OK

3 ",a,move,20,50" Mover a variável para o ponto (20,50). OK

4 ",a,remove" Remover a variável "a" da tela. OK

5 ",a,setvalue,8" Retornar código 3, pois a variável "a" não existe mais.

OK

6 ",b,inicializaobj,vitem,ibm" Adicionar um elemento à tela com nome "b" e valor igual a "ibm".

OK

7 ",b,inicializaobj,vitem," Retornar código 5, pois a variável "b" já existe.

OK

8 ",a,inicializaobj,arvore," Retornar código 2, pois o tipo informado não existe.

OK

9 ",,inicializaobj,vitem," Retornar código 1, pois não foi informado um nome para a variável.

OK

Tabela 5

Figura 9 - Executando ordem número 1 da tabela 5

Figura 10 - Executando ordem número 6 da tabela 5

Page 18: ANIMAÇÃO DE ALGORITMOS - Departamento de … · encarem isso como um jogo ("quiz") e que professores utilizem os ... Animação de Algoritmos em Linguagens Visuais - Paul Carlson

5.2 VARRAYOrdem Mensagem Comportamento Esperado Resultado

0 ",array,inicializaobj,varray,4" Adicionar à tela um array visual de 4 posições e nome "array".

OK

1 ",array,setvalue,7,0" Atribuir o valor "7" à posição 0 do array.

OK

2 ",array,setvalue,4,1" Atribuir o valor "4" à posição 1 do array.

OK

3 ",array,setvalue,1,2" Atribuir o valor "1" à posição 2 do array.

OK

4 ",array,clearpos,2" Zerar o valor da posição 2 do array. OK

5 ",array,setvalue,5,1" Atribuir o valor "5" à posição 1 do array.

OK

6 ",array,chgpos,1,3" Trocar os elementos das posições 1 e 3 de posição.

OK

7 ",array,cleararray" Limpar todo o array. OK

8 ",array,setvalue,7,5" Exibir na console mensagem de erro, pois a tentativa de atribuir o valor "7" à posição 5 é inválida, já que o vetor possui apenas 4 posições.

OK

9 ",array,remove" Remover o array visual da tela. OKTabela 6

Figura 11 - Executando ordem número 3 da tabela 6

Figura 12 - Executando ordem número 6 da tabela 6

Page 19: ANIMAÇÃO DE ALGORITMOS - Departamento de … · encarem isso como um jogo ("quiz") e que professores utilizem os ... Animação de Algoritmos em Linguagens Visuais - Paul Carlson

5.3 VLINKEDLISTOrdem Mensagem Comportamento Esperado Resultado

0 ",lista,inicializaobj,vlinkedlist,5" Inicializar uma lista encadeada com o máximo de 5 elementos.

OK

1 ",lista,add,&31,31" Adicionar um elemento de nome "&31" e valor "31" ao contexto da lista.

OK

2 ",lista,addL,&32,32,&31" Adicionar um elemento de nome "&32" e valor "32" ao contexto da lista.

OK

3 ",lista,addL,&33,33,&32" Adicionar um elemento de nome "&33" e valor "33" ao contexto da lista.

OK

4 ",lista,rem,&32" Remover o elemento "&32" do contexto da lista.

OK

5 ",lista,setpointer,&31,&33" Fazer o encadeamento entre os elementos "&31" e "&33".

OK

6 ",lista,addL,&34,34,&33" Adicionar um elemento de nome "&34" e valor "34" ao contexto da lista.

OK

7 ",lista,rem,&31" Remover o elemento "&31" do contexto da lista.

OK

8 ",lista,setfirst,&33" Determinar o elemento "&33" como novo nodo cabeça.

OK

Tabela 7

Figura 13 - Executando ordem número 2 da tabela 7

Figura 14 - Executando ordem número 5 da tabela 7

Figura 15 - Executando ordem número 8 da tabela 7

Page 20: ANIMAÇÃO DE ALGORITMOS - Departamento de … · encarem isso como um jogo ("quiz") e que professores utilizem os ... Animação de Algoritmos em Linguagens Visuais - Paul Carlson

5.4 VTREEOrdem Mensagem Comportamento Esperado Resultado

0 ",Árvore,inicializaobj,vtree,5" Inicializar uma árvore com altura igual a “5” OK

1 ",Árvore,add,&30,30" Adiciona elemento de nome "&30" e valor "30" à árvore binária

OK

2 ",Árvore,add,&10,10" Adiciona elemento de nome "&10" e valor "10" à árvore binária

OK

3 ",Árvore,add,&5,5" Adiciona elemento de nome "&5" e valor "5" à árvore binária

OK

4 ",Árvore,add,&38,38" Adiciona elemento de nome "&38" e valor "38" à árvore binária

OK

5 ",Árvore,add,&50,50" Adiciona elemento de nome "&50" e valor "50" à árvore binária

OK

6 ",Árvore,add,&39,39" Adiciona elemento de nome "&39" e valor "39" à árvore binária

OK

7 ",Árvore,rem,&30,30" Remove elemento de nome "&30" e valor "30" à árvore binária

OK

8 ",Árvore,rem,&10,10" Remove elemento de nome "&10" e valor "10" à árvore binária

OK

Tabela 8

Figura 16 - Executando ordem número 6 da tabela 8

Figura 17 - Executando ordem número 7 da tabela 8

Page 21: ANIMAÇÃO DE ALGORITMOS - Departamento de … · encarem isso como um jogo ("quiz") e que professores utilizem os ... Animação de Algoritmos em Linguagens Visuais - Paul Carlson

6 EXEMPLO DE IMPLEMENTAÇÃO EM C PARA ANIMAR UMA ÁRVORE BINÁRIACódigo-fonte na linguagem de programação C:

#include <stdarg.h>#include <stdio.h>#include <errno.h>#include <string.h>#include <strings.h>#include <sys/socket.h>#include <resolv.h>#include <errno.h>

#define MAXBUF 1024

void envia_msg(char *msg, char *ip, char *porta);char inserir(char *msg); char remover(char *msg);

int main(int Count, char *Strings[]){ //int bytes_read;

char q; // caractere para receber a opcao do usuario char msg[MAXBUF];char *ip = Strings[1];char *porta = Strings[2];

// verifica se os parametros foram passados corretamenteif ( Count != 3 ){

fprintf(stderr, "\nUsar: %s <IP> <porta>\n", Strings[0]);exit(0);

}

// inicializa parte gráfica Javasprintf(msg, "%s\n", ",ARVORE,inicializaobj,vtree,10");envia_msg(msg, ip, porta);sprintf(msg, "%s", " ");

do {

printf("\nOpcoes: \nI -> para inserir novo elemento;\nR -> remover elemento;\nL -> para listar os elementos; \nS -> para sair \n:");

scanf("%c", &q); // le a opcao do usuario switch(q) {

case 'i': case 'I': inserir(&msg); envia_msg(msg, ip, porta);sprintf(msg, "%s", " ");break;

case 'r': case 'R': remover(&msg); envia_msg(msg, ip, porta);sprintf(msg, "%s", " ");break;

case 's': case 'S': // Sairsprintf(msg, "%s", "KILL");envia_msg(msg, ip, porta);sprintf(msg, "%s", " ");break;

default: printf("\n Opcao nao valida"); } getchar(); // Limpa o buffer de entrada

} while ((q != 's') && (q != 'S') );

return 0;}

void envia_msg(char *msg, char *ip, char *porta){int sockfd;

Page 22: ANIMAÇÃO DE ALGORITMOS - Departamento de … · encarem isso como um jogo ("quiz") e que professores utilizem os ... Animação de Algoritmos em Linguagens Visuais - Paul Carlson

struct sockaddr_in dest;

// inicializa socket para transmissãoif ( (sockfd = socket(AF_INET, SOCK_STREAM, 0)) < 0 ){

perror("Socket");exit(errno);

}

// inicializa parametros de IP e porta de conexãobzero(&dest, sizeof(dest));dest.sin_family = AF_INET;if ( inet_addr(ip, &dest.sin_addr.s_addr) == 0 ){

perror(ip);exit(errno);

}dest.sin_port = htons(atoi(porta));

// conecta com o socket do servidorif ( connect(sockfd, (struct sockaddr *)&dest, sizeof(dest)) != 0 ){

perror("Connect");exit(errno);

}

// envia a mensagem para a camada javasend(sockfd, msg, strlen(msg), 0);

// fecha o socket-close(sockfd);

}

char inserir(char *msg){ int cod=0;char *char_cod;while(1){

printf("\n Valor do novo nó [0-99]: "); scanf("%d", &cod); if (cod != "" && cod >=0 && cod <=99){

/* adiciona nó na arvore */ sprintf(char_cod, "%d", cod);sprintf( msg, "%s%s", ",ARVORE,add,&", char_cod);sprintf( msg, "%s%s", msg, ",");sprintf( msg, "%s%s\n", msg, char_cod);//Exemplo de mensagem: ,Arvore,add,&30,30break;

}else{

printf("\n Insira um valor entre 0 e 99!");}

}return msg;

}

char remover(char *msg){ int cod=0;char *char_cod;while(1){

printf("\n Valor do nó que será excluído: "); scanf("%d", &cod); if (cod != "" && cod >=0 && cod <=99){

/* adiciona nó na arvore */ sprintf(char_cod, "%d", cod);sprintf( msg, "%s%s", ",ARVORE,rem,&", char_cod);sprintf( msg, "%s%s", msg, ",");sprintf( msg, "%s%s\n", msg, char_cod);//Exemplo de mensagem: ,Arvore,rem,&30,30break;

}

Page 23: ANIMAÇÃO DE ALGORITMOS - Departamento de … · encarem isso como um jogo ("quiz") e que professores utilizem os ... Animação de Algoritmos em Linguagens Visuais - Paul Carlson

else{

printf("\n Nó não encontrado!");}

}return msg;

}

Page 24: ANIMAÇÃO DE ALGORITMOS - Departamento de … · encarem isso como um jogo ("quiz") e que professores utilizem os ... Animação de Algoritmos em Linguagens Visuais - Paul Carlson

7 INSERINDO UMA NOVA CLASSE DE ANIMAÇÃOEste capítulo indica as alterações necessárias na Camada de Animação

para a inclusão de uma nova classe animada, desenvolvida em Java. A camada de Comunicação não necessita de alteração, visto que, os comandos são enviados para a classe de animação através da Função Envia_msg() que recebe múltiplos parâmetros.

As classes de animação já criadas são VItem, VArray, VLinkedList e VTree. Podem ser criadas classes que representem outros tipos de árvores, um grafo ou qualquer outra estrutura implementável. Como pré-requisito a nova classe deve implementar a interface VStructure, definida no pacote structures. Esta interface obriga a construção do método execCmd, que é responsável pela recepção da string de comandos, e posterior chamada dos métodos específicos desta nova classe.

Para que a classe Animator reconheça a nova classe, são necessárias duas alterações:

• initializeObj: No método initializeObj da classe Animater, deve ser inserida a chamada para o construtor da ClasseNova;

• animate: No método animate da mesma classe acima, é necessário incluir a verificação de qual objeto foi instanciado, e então incluir a chamada do método execCmd com um typecast.

Após estas duas alterações os objetos instanciados da ClasseNova devem receber as chamadas referentes a eles e tratadas no método execCmd. O redesenho do objeto alterado é de responsabilidade desta ClasseNova, para que seja possível a animação propriamente dita, em passos, respeitando-se as características de cada estrutura animada. No caso de se não tratar os redesenhos da tela nos métodos internos da ClasseNova as alterações efetuadas não serão mostradas durante suas execuções, e somente no retorno do método execCmd, deixando a animação como se fossem quadros, diminuindo ou até eliminando o detalhamento da animação.

Page 25: ANIMAÇÃO DE ALGORITMOS - Departamento de … · encarem isso como um jogo ("quiz") e que professores utilizem os ... Animação de Algoritmos em Linguagens Visuais - Paul Carlson

8 DIFICULDADES ENCONTRADASNo desenvolvimento do presente trabalho, uma das dificuldades

encontradas foi reproduzir o que acontece em um programa feito em linguagem estruturada (no caso, linguagem C) em uma linguagem orientada a objetos (linguagem Java). Como existem muitas diferenças estruturais entre as linguagens, o trabalho não foi "apenas traduzir", mas sim elaborar estruturas, funções e variáveis que pudessem ser compatíveis com as classes, métodos e atributos da camada visual. Assim, todo cuidado foi necessário na reprodução de ponteiros em C, por exemplo.

Outra dificuldade foi a representação gráfica dos elementos. Uma vez compatibilizados da linguagem C para a linguagem Java, foi necessário elaborar formas de animação minimamente didáticas, a fim de deixar claro para o usuário o que está acontecendo. Assim, foram utilizadas estruturas auxiliares para que as animações ficassem mais reais.

Page 26: ANIMAÇÃO DE ALGORITMOS - Departamento de … · encarem isso como um jogo ("quiz") e que professores utilizem os ... Animação de Algoritmos em Linguagens Visuais - Paul Carlson

9 IMPLEMENTAÇÕES FUTURASComo o sistema foi subdivido em 3 partes independentes qualquer uma

delas podem ser substituídas, isto é, caso se deseje animar um algoritmo em outra linguagem (Pascal, C++) basta que se altere a Camada C; caso se deseje utilizar outra forma de comunicação(comunicação de processos) isto é possível sem alterações das outras camadas; o mesmo ocorre com a camada de animação.

Atenção especial deve ser dada para o caso de se querer acrescentar alguma estrutura a ser animada. Os trechos a serem modificados estão destacados no código fonte. Assim, para se acrescentar uma nova estrutura visual, basta, além de criá-la, adicionar os devidos tratamentos nos trechos supracitados.

Além disso, obviamente, pode-se evoluir bastante na parte gráfica, sendo necessários aí conhecimentos da área de Computação Gráfica. Isso deixaria sem dúvidas o sistema mais atraente para o espectador, mas não era o foco deste trabalho.

Page 27: ANIMAÇÃO DE ALGORITMOS - Departamento de … · encarem isso como um jogo ("quiz") e que professores utilizem os ... Animação de Algoritmos em Linguagens Visuais - Paul Carlson

10 CONCLUSÃOA análise de outras implementações em conjunto com estudos sobre

técnicas automatizadas de animação permitiu a identificação de uma forma de implementação seguida da construção propriamente dita de uma biblioteca de animação que oferecesse possibilidade de animar algoritmos dinamicamente por meio de chamadas explicitas dentro do código a ser animado.

A forma de implementação foi foco importante deste trabalho, visando possibilitar de uma maneira estruturada novas implementações de objetos e modos de animação de algoritmos. Durante a evolução deste projeto pode-se observar que a área de animação de algoritmos é muito abrangente e há ainda muito a ser explorado.

Parece razoável imaginar que um próximo passo na evolução deste projeto teria um dos seguintes pontos como meta de desenvolvimento: • Ampliar a gama de objetos a serem animados aproximando-se da realidade

das necessidades do desenvolvimento de algoritmos principalmente com fins acadêmicos e didáticos;

• Aperfeiçoar as características visuais, deixando o resultado da animação mais claro e intuitivo e com isso facilitando a compreensão do algoritmo;

• Focar no desenvolvimento de técnicas cada vez mais automatizadas, diminuindo a ação humana no processo de animação auxiliando o usuário com inserções automáticas e semi-automáticas (sugestões) no código a ser animado.

Concluí-se então, ao final deste trabalho, que se pode colaborar no sentido de formalizar uma estrutura que forneça uma base para continuidade do estudo sobre este vasto assunto.

Page 28: ANIMAÇÃO DE ALGORITMOS - Departamento de … · encarem isso como um jogo ("quiz") e que professores utilizem os ... Animação de Algoritmos em Linguagens Visuais - Paul Carlson

11 REFERÊNCIAS BIBLIOGRÁFICAS[1] HELLVIG, Augusto; GAIO, Rafael B.; LUZ, Rafael C.. Animação de Algoritmos. Trabalho de graduação do Curso de Ciência da Computação da Universidade Federal do Paraná, 2006

[2] RÖßLING, Guido & NAPS, Thomas L. A Testbed for Pedagogical Requirements in Algorithm Visualizations. ACM Press, 2002

[3] BROWN, M. H.; NAJORK, M. A. & RAISAMO, R. A java-based implementation of collaborative active textbooks. DEC Systems Research Center,1997.

[4] DOMINGUE, J. & MULHOLLAND, P. Staging software visualizations on the web. The Open University, 1997.

[5] CARLSON, Paul; BURNETT, Magaret & CADIZ, Jonathan. A seamless integration of algorithm animation into a visual programming language. Department of Computer Science, Oregon state University, May 1996.

[6] VODISLAV, D. A visual programming model for user interface animation. IEEE International Symposium on Visual Languages, Capri, 1997