UNIVERSIDADE ANHEMBI MORUMBI
ÂNGELO MOTA CARNEIRO
BRUNO TEIXEIRA
DAVIDSON SOARES PIMENTA
FERNANDO CABRAL DE LIMA
INTERPRETANDO MOVIMENTOS PELA WEBCAM
São Paulo
2009
ÂNGELO MOTA CARNEIRO
BRUNO TEIXEIRA
DAVIDSON SOARES PIMENTA
FERNANDO CABRAL DE LIMA
INTERPRETANDO MOVIMENTOS PELA WEBCAM
Trabalho de Conclusão de Curso apresentado
como exigência parcial para obtenção do diploma
de Bacharel em Ciência da Computação na
Universidade Anhembi Morumbi
Orientadora: Profª. MSc. Simone de Abreu
São Paulo
2009
ÂNGELO MOTA CARNEIRO
BRUNO TEIXEIRA
DAVIDSON SOARES PIMENTA
FERNANDO CABRAL DE LIMA
INTERPRETANDO MOVIMENTOS PELA WEBCAM
Trabalho de Conclusão de Curso apresentado como
exigência parcial para obtenção do diploma de
Bacharel em Ciência da Computação na
Universidade Anhembi Morumbi
Aprovado em:
_________________________________________________
Profª. Simone de Abreu
Universidade Anhembi Morumbi
_________________________________________________
Profº. Nelson Issamu Shimada
Universidade Anhembi Morumbi
_________________________________________________
Profª. Judith Pavón
Universidade Anhembi Morumbi
Dedicamos este trabalho aos nossos pais, que nos
apoiaram e incentivaram durante toda esta jornada.
AGRADECIMENTOS
Agradecemos primeiramente aos nossos pais que estiveram presentes nos momentos
mais importantes da nossa vida nos inspirando, aconselhando, cuidando e demonstrando o seu
amor e a Deus que nos deu o dom da vida.
Agradecemos a professora Simone de Abreu, nossa orientadora, pelo apoio, incentivo e
conselhos para o desenvolvimento deste projeto.
Aos professores Marcelo Alexandre Couto de Jesus e Judith Pavón, que nos auxiliaram
quanto à difícil escolha do tema deste trabalho e aos professores Nelson Issamu Shimada e
Roberta Beatriz Aragon Bento por nos acompanharem na segunda etapa.
Obrigado a todos, sinceramente!
RESUMO
Este trabalho tem por objetivo demonstrar como funciona a captura de movimentos
através de uma webcam, e facilitar o desenvolvimento de aplicações que a utilizem como
entrada de dados para interação com o computador, substituindo assim, os dispositivos
convencionais como mouse, teclado e joystick. Será apresentado um estudo detalhado sobre
como interpretar as imagens capturadas e converte-las em linguagem computacional. Será
apresentado alguns exemplos desenvolvidos com base nesta pesquisa, entre eles jogos
interativos, realidade aumentada, e efeitos visuais diferentes. Os projetos serão desenvolvidos
em Flash CS3 utilizando a linguagem ActionScript para programação, gerando assim arquivos
que podem ser executados on-line em qualquer computador que possua o plugin do flash
instalado, o que hoje a grande maioria dos computadores possuem.
Palavras-chave: webcam, jogos interativos, jogos on-line, captura de imagens.
ABSTRACT
This paper aims to explain how to do the capture motions using a webcam, and
facilitate the development of applications that use it as input for interaction with the computer,
thereby replacing conventional devices such as mouse, keyboard and joystick. Will be
presented a detailed study on how to interpret the captured images and convert them into
computer language. Will be showed some examples developed based on this research,
including interactive games, augmented reality, and different visual effects. The projects will
be developed in Flash CS3 using Actionscript programming language, that can be run online
from any computer that has the Flash plugin installed, that today the vast majority of
computers have.
Keywords: webcam, interactive games, online games, capturing images
LISTA DE ILUSTRAÇÕES
FIGURA 1 Realidade aumentada com uso de marcadores ......................................................12
FIGURA 2 Simulação de um cenário real em realidade aumentada........................................ 16
FIGURA 3 Estrutura de um Sistema de Visão Computacional ............................................... 18
FIGURA 4 Classificação das técnicas para capturar movimentos........................................... 19
FIGURA 5 Movimento com diferença absoluta ...................................................................... 20
FIGURA 6 Limiarização de uma imagem “Threshold”.......................................................... 22
FIGURA 7 Jogo de basquete virtual........................................................................................ 23
FIGURA 8 Jogo Motion Bubbles............................................................................................24
FIGURA 9 Card de Baseball ................................................................................................... 25
FIGURA 10 Incluindo a Biblioteca Cam2Play no Flash ........................................................ 27
FIGURA 11 Núcleo da Cam2Play ..........................................................................................29
FIGURA 12 Exemplo de area de interesse.............................................................................. 36
FIGURA 13 Amostra do detector de movimentos .................................................................. 38
FIGURA 14 Jogo Ping Pong ................................................................................................... 39
FIGURA 15 Jogo Desviator .................................................................................................... 40
9
LISTA DE TABELAS
TABELA 1 Opções da variável bMode ............................................................................... 37
10
SUMÁRIO
1 INTRODUÇÃO .................................................................................................................. 11
1.1 OBJETIVO ....... ..................................................................................................................13
1.2 JUSTIFICATIVA .. .............................................................................................................13
1.3 ABRANGÊNCIA . ..............................................................................................................13
1.4 ESTRUTURA DO TRABALHO . ......................................................................................14
2 REALIDADE AUMENTADA
........................................................................................ 15
2.1 VISÃO COMPUTACIONAL .... .......................................................................................17
2.2 SISTEMA DE VISÃO COMPUTACIONAL ...................................................................... 17
2.3 TÉCNICAS DE PRÉ-PROCESSAMENTO DE IMAGENS .............................................. 18
2.3.1 Diferença entre quadros e detecção de movimentos ............................................... 20
2.3.2 Limiarização de imagens .............................................................................................................. 21
2.4 CONSIDERAÇÕES FINAIS ..............................................................................................22
3 PROJETOS RELACIONADOS ..................................................................................... 23
3.1 PLAYDO JAM – BASQUETE VIRTUAL .........................................................................23
3.2 MOTION BUBBLES ............ ..............................................................................................24
3.3 BASEBALL COM CARDS ................................................................................................25
3.4 CONSIDERAÇÕES FINAIS ..............................................................................................26
4 A BIBLIOTECA CAM2PLAY ....................................................................................... 27
4.1 ARQUITETURA DA CAM2PLAY ..... ..............................................................................28
4.1.1 Classes auxiliares ........................................................................................................ 28
4.1.2 O núcleo da biblioteca Cam2Play ............................................................................. 29
4.1.3 Captura da imagem de entrada .................................................................................. 30
4.1.4 Processamento das imagens de entrada e detecção de movimentos ...................... 31
4.1.5 Detecção de Colisão .................................................................................................... 33
4.2 O USO DA BIBLIOTECA CAM2PLAY ...........................................................................35
4.3 EXEMPLOS DE APLICAÇÃO DA CAM2PLAY ......................................................... 38
4.3.1 Detecção de movimentos ............................................................................................ 38
4.3.2 Ping Pong ....................................................................................................................39
4.3.3 Desviator ....................................................................................................................... 40
4.4 CONSIDERAÇÕES FINAIS .. ...........................................................................................41
5 CONCLUSÃO .................................................................................................................. 42
REFERÊNCIAS BIBLIOGRÁFICAS .............................................................................. 43
11
1 INTRODUÇÃO
A revolução industrial trouxe uma série de mudanças tecnológicas que resultaram em
um profundo impacto na vida das pessoas em todo o mundo. Diversas invenções foram
lançadas, e hoje muitas e muitas delas fazem parte do nosso dia a dia, entre elas o computador
e a internet. O computador é o aparelho eletrônico mais utilizado para resolver muitas
situações do dia-a-dia devido a sua versatilidade e diversidade de aplicações disponíveis, desde
a simples digitação de um texto a aplicações avançadas como análise de características de
imagens de DNA/RNA e outras aplicações como jogos virtuais.
Os jogos virtuais também mudaram o mundo, algo que há poucos anos não existia na
humanidade, hoje muitas pessoas diriam que não conseguiriam viver sem este entretenimento.
Com isso, o mundo também vem mudando os jogos. A cada dia que passa os jogos se
aproximam mais da realidade, oferecendo recursos e formas cada vez mais engenhosas de
iteração com o jogo, como detecção de estados emocionais e realidade aumentada.
A realidade aumentada é bastante utilizada na produção cinematográfica. Seria
praticamente impossível a criação de filmes com tantos detalhes e animações virtuais, sem o
uso da realidade aumentada. A maioria das produtoras cinematográficas utilizam uma técnica
conhecida como motion capture ou “captura de movimentos”, na qual se faz uso de
marcadores colados no corpo de uma pessoa para captura de movimentos, como demonstrado
na Figura 1. Estes marcadores são utilizados como uma guia para o registro dos movimentos
em um computador, registros estes que serão posteriormente trabalhados utilizando técnicas
3D para criação e animação dos personagens ou cenas diversas virtuais. A realidade aumentada
não possui limite de aplicação, ela pode ser usada na criação de jogos, melhoria de processos
na indústria, medicina, segurança e muitas outras aplicações que surgirão em um futuro
próximo.
A utilização de marcadores não é um parâmetro obrigatório para a realidade
aumentada, há situações onde o uso de marcadores artificiais, como os da Figura 1, não é uma
opção viável, no sentido de que a necessidade de posicionar corretamente um conjunto de
marcadores ao longo do corpo pode vir a diminuir a aceitação da utilização do produto. Na
área de jogos, onde o usuário da aplicação quer ter um momento de diversão sem ter que estar
preocupado com a localização e uso correto de objetos de captura. É possível rastrear
marcadores naturais, como a face ou as mãos do usuário para identificar partes específicas do
corpo, e é possível trabalhar com a silhueta do usuário extraída das imagens capturadas para a
12
identificação de alguns gestos e assim interagir com o jogo, técnica esta que será usada e
apresentada neste projeto. As aplicações sem uso de marcadores não requerem o uso de
dispositivos especiais, mas podem requerer uma configuração de cenário especial (como fundo
de cor única), ou, no mínimo, exigir que o usuário use roupas com cores diferentes das cores
do cenário de fundo e que o ambiente onde será efetuada a interação esteja bem iluminado.
Figura 1 – Realidade aumentada com uso de marcadores
Foto do filme Piratas do Caribe 2
(Fonte: ILM,2005)
13
1.1 OBJETIVO
O objetivo deste trabalho é apresentar conceitos e técnicas para captura de movimentos de
um usuário vindos através de uma webcam utilizando conceitos de Visão Computacional na
construção de uma biblioteca de funções que facilitará a criação de aplicações em realidade
aumentada sem uso de marcadores.
1.2 JUSTIFICATIVA
Jogos onde o jogador não precisará de joystick ou manche serão desenvolvidos com o
resultado deste trabalho. Facilidades como esta, tornarão a experiência com o jogo muito mais
divertida e intuitiva que os métodos convencionais.
Os desenvolvedores de aplicações em realidade aumentada terão grande facilidade em
desenvolver suas idéias utilizando-se do resultado final deste trabalho.
Aplicações onde a interação não depende um meio físico de contato para transmissão
de dados, ampliam a abrangência de utilização da aplicação. Torna-se então uma área da
tecnologia de muita importância, pois permite que pessoas que possuem deficiência física, por
exemplo, nas mãos, possam utilizar o aplicativo.
1.3 ABRANGÊNCIA
Este trabalho engloba a apresentação e utilização de técnicas relacionadas à realidade
aumentada e visão computacional com a finalidade de construir uma biblioteca de funções
para processamento de imagens capturadas através de uma webcam. Esta biblioteca permitirá
a comunicação com outra aplicação, que deve ser desenvolvida à parte.
As técnicas que serão apresentadas e implementadas compreendem a captura de
imagens sem levar em consideração o uso de marcadores.
Não faz parte do escopo deste projeto ensinar como se utiliza o Flash ou como se
programa em Actionscript.
14
1.4 ESTRUTURA DO TRABALHO
Este trabalho está estruturado da seguinte forma:
O capítulo 2 aborda informações mais detalhadas sobre realidade aumentada e visão
computacional, além do embasamento teórico para construção de aplicações em realidade
aumentada.
O capítulo 3 expõe alguns trabalhos relacionados.
O capítulo 4 explica como funciona a Biblioteca Cam2Play e mostra exemplos do seu
uso.
O capítulo 5 apresenta a conclusão final deste trabalho.
15
2 REALIDADE AUMENTADA
A realidade aumentada pode ser definida como uma tecnologia na qual se incrementa
ou aumenta a visão que o utilizador tem do mundo real com a adição de imagens virtuais,
usando técnicas de visão por computador e de computação gráfica/realidade virtual, resultando
na sobreposição de objetos virtuais com o mundo real (THESKA, 2008).
Para que uma aplicação em realidade aumentada possa ocorrer é necessário um
microcomputador com uma webcam ou outro dispositivo de captura de imagens instalado,
executando um software que, através de técnicas de visão computacional e processamento de
imagens mistura a cena do ambiente real com objetos virtuais gerados pelo computador. O
software também é responsável pelo posicionamento e interação dos objetos virtuais, dando a
impressão ao usuário que o ambiente é único. Vale ressaltar também que o jogo permite o
manuseio desses objetos virtuais, no espaço do usuário, onde ele tem mais segurança e sabe
como interagir (THESKA, 2008).
Com a realidade aumentada o usuário pode interagir com um objeto de forma segura e
agradável, pode trazer para um ambiente real os elementos virtuais, o que enriquece e amplia a
visão do mundo real. Isso só é possível combinando técnicas de visão computacional,
computação gráfica e realidade virtual.
A realidade aumentada não é uma tecnologia com foco absoluto em adaptações para
jogos, mas também dispõe de utilidades e aplicações em diversas situações, como por
exemplo:
• Decoração: simulação de peças móveis virtuais dentro de um ambiente real para
decoração de interiores;
• Vestuário: simulação peças de roupas virtuais vestindo em um corpo humano real;
• Mecânica: gerador de instruções para auxiliar a troca de determinada peça em um
automóvel;
• Cabelos: um cabeleireiro poderia efetuar testes de cabelo e executar cortes virtuais;
• Educação: simulação de fenômenos para aulas de física, etc.
São muitas as possibilidades de utilização da realidade aumentada, mas todas elas
utilizam um sistema padrão de captura de movimentos, o qual será explicado no tópico 2.2
deste trabalho.
A realidade aumentada pode ser utilizada concomitantemente com mecanismos de
computação móvel. Utilizando dispositivos portáteis, um sistema de realidade aumentada pode
16
funcionar, por exemplo, modificando a forma com que o usuário vê o mundo ao seu redor.
Informações sobre o mundo real podem ser captadas por sensores diversos e lançadas na tela
de visualização do usuário, como por exemplo, informações sobre o clima, sistema de GPS
informando a localização e altitude que o usuário se encontra, temperatura corporal e externa,
data, hora, guia de como chegar a tal lugar, e etc. A Figura 2 ilustra como seria a visualização
através de um sistema de realidade aumentada no qual adiciona diversas informações virtuais
em tempo real a uma imagem virtual.
Figura 2 - Simulação de um cenário real em realidade aumentada
Fonte: Autores (2009)
Os problemas enfrentados pelas empresas que tentam desenvolver aplicações e
equipamentos comerciais com tais recursos são as dificuldades encontradas em montar o
equipamento ideal que possua o maior número possível de sensores e tenha um tamanho final
razoável. Os protótipos até hoje desenvolvidos são relativamente caros, complexos, frágeis e
pesados, não sendo ainda adequados para distribuição em larga escala.
Já existem no mercado alguns óculos especiais para projeção de imagens, que são uma
opção muito atraente para se utilizar em realidade aumentada. Existem 2 tipos de óculos no
mercado, um que isola a visão da pessoa do mundo real, não sendo possível ver além dos
óculos, podendo apenas ver o que é projetado nos óculos, e o outro modelo é transparente,
17
sendo então a imagem projetada por cima da imagem real. Um exemplo de óculos transparente
é o TELEGLASS T4 da empresa japonesa SCALAR, ele consegue reproduzir vídeos com uma
resolução de 640x480 pixels.
2.1 VISÃO COMPUTACIONAL
Visão computacional é um ramo da ciência da computação que se dedica a
desenvolver técnicas e métodos tecnológicos orientados à construção de sistemas artificiais
para extração automática de informações em imagens (WANGENHEIM; COMUNELLO,
2005). Estas imagens são capturadas por dispositivos utilizados para captura de imagens,
como câmera de vídeo, scanner, etc.
A recente evolução tecnológica dos computadores e dispositivos de captura de
imagens a preços acessíveis tem possibilitado a crescente aplicação de visão computacional
nas mais diversas áreas. Como ilustrações em visão computacional podem citar: análise
automática de sêmen humano, medição computadorizada do dimensional de peças,
rastreamento de alvos para detecção de intrusos, análise morfológica de células,
reconhecimento e sintetização de faces humanas, entre outras.
A visão computacional procura oferecer da forma mais eficiente possível uma vasta
quantidade de informações ao sistema computacional para que este possa agir
inteligentemente como esperado. O reconhecimento de padrões está engajado no campo da
visão computacional com atuações e perspectivas importantíssimas para alcançar e criar a
máquina inteligente.
2.2 SISTEMA DE VISÃO COMPUTACIONAL
Um sistema de visão computacional é organizado de acordo com a finalidade da sua
aplicação. Embora existam diversos tipos de aplicações possíveis de se criar com sistemas de
visão computacional a estrutura de todos é basicamente como apresentada na Figura 3, onde o
objetivo desta estrutura é retirar de cada imagem capturada, informações que sejam relevantes
à aplicação final. Estas informações podem ser extraídas individualmente e posteriormente
18
serem recombinadas ou utilizadas em paralelo, tudo depende da técnica que será aplicada
(MIRANDA, 2008). A aquisição de imagem é o primeiro passo do sistema de captura de
movimentos, e é feito através de uma webcam, ou através de outra imagem digital. A fase de
pré-processamento envolve a aplicação técnicas que servem para preparar a imagem para as
fases seguintes, onde será feito a extração das características e detecção de áreas de interesse a
aplicação. A definição das áreas de interesse e as características que se deseja extrair são
fundamentais para escolher quais técnicas utilizar, no caso da Biblioteca Cam2Play o objetivo
é detectar a presença de movimento e colisão, sendo dispensável a varredura da imagem a
procura de marcadores ou áreas específicas do corpo humano.
Figura 3 – Estrutura de um Sistema de Visão Computacional
Fonte: (MIRANDA, 2009)
2.3 TÉCNICAS DE PRÉ-PROCESSAMENTO DE IMAGENS
As técnicas de processamento de imagens podem ser classificadas em 4 tipos
diferentes: detecção de movimento com marcadores, Figura 4 (M-CM), detecção de
movimento sem marcadores, Figura 4 (M-SM), detecção de partes do corpo com marcadores,
Figura 4 (P-CM) e detecção de partes do corpo sem marcadores, Figura 4 (P-SM).
19
Cada tipo de técnica possui formas diferentes de interpretar as imagens capturadas, por
exemplo, as do tipo P-CM, que utilizam de marcadores, o processamento da imagem é feito
utilizando-se um algoritmo que tenta localizar em cada imagem de entrada o marcador
previamente estabelecido. A vantagem desta técnica é que se consegue obter uma maior
precisão quanto à comunicação da câmera com o software, só que requer um tempo maior de
processamento em relação ao tipo M-SM. A técnica P-CM é ideal para experimentos de
realidade aumentada em que se deseja apresentar objetos em 3 dimensões ou identificação e
orientação de objetos (MIRANDA, 2009).
Figura 4 – Classificação das técnicas para capturar de movimentos
Fonte: Autores (2009)
A biblioteca ARToolKit (HITLAB, 1999) oferece suporte para as técnicas do tipo PCM. Esta biblioteca utiliza uma técnica de rastreamento óptico na qual identifica em tempo
real a posição e a orientação de um marcador em frente a webcam, sendo possível a
visualização de um objeto virtual que pode ser rotacionado em 3 dimensões de acordo com
posição e orientação do marcador específico. Esta biblioteca foi desenvolvida em C e C++,
existe uma versão do ARToolKit chamada de FLAToolKit (SAQOOSHA, 2008), que é uma
adaptação feita para o Flash. No capítulo 3, serão apresentados alguns exemplos de aplicações
que utilizam a técnica P-CM.
20
2.3.1 Diferença entre quadros e detecção de movimentos
Utilizando a técnica de diferença entre quadros é possível detectar a presença e/ou
movimento. Esta técnica consiste em armazenar a primeira e a segunda imagem capturada e
fazer uma varredura pixel a pixel em ambas as imagens, e então gerar uma nova imagem com
base na diferença das duas. Depois de efetuado a diferença entre as imagens, a segunda
imagem passa a ser a primeira e uma nova imagem passa a ser a segunda, então o processo se
repete enquanto o sistema estiver ativo. A Figura 5 demonstra a detecção de movimento.
Quanto maior for a velocidade da taxa atualização das imagens, o que é chamado de FPS
“Frames Per Second”, menos será visível o arrasto de movimento, pois a área de diferença
entre uma imagem e outra será menor.
A Figura 5 ilustra o processo de captura de movimentos. A Figura 5 (A) é a primeira
imagem capturada e a Figura 5 (B) é a segunda. A Figura 5 (C) é a diferença entre a primeira e
a segunda imagem, considerando somente os pixels que se modificaram. Na Figura 5C, ainda
foi aplicado um filtro morfológico do tipo threshold para reduzir a quantidade de ruídos, e uma
função de transformação de cor para ficar em vermelho (MIRANDA, 2008).
(A)
(B)
(C)
Figura 5 – Movimento com diferença absoluta
Fonte: Autores (2009)
Este tipo de técnica somente é eficaz em ambientes com boa iluminação, visto que as
webcams convencionais não possuem recursos suficientes para capturar a radiação luminosa
de um ambiente escuro. Para ambientes com pouca ou sem iluminação existe a possibilidade
de se utilizar câmeras de infravermelho ou de visão noturna, o que aumentará a eficácia da
técnica de detecção de movimentos.
21
2.3.2 Limiarização de imagens
Uma imagem digital é formada por pequenos pontos denominados pixels. Os pixels de
uma imagem colorida baseiam-se em três cores: Vermelho (Red), Verde (Green) e Azul
(Blue). Este é o padrão de cores chamado RGB, padrão este que é usado em todos os
monitores coloridos. Cada canal de cor RGB possui uma variação de intensidade que varia de
0 a 255, podendo assim ser possível gerar a combinação de mais de 16,7 milhões cores.
A Limiarização de imagens consiste em transformar um padrão de cores RGB de 24
bits em escala de cinza de 8 bits ou preto e branco de 1 bit. Quando uma imagem é convertida
em um padrão de 1 bit é denominada imagem binária, pois existe somente 2 cores que
representam ausência e presença de cor. Ao efetuar uma destas transformações fica mais
simples a identificação das áreas de interesse e diminui o tempo de processamento das
imagens. Esta técnica é conhecida como thresholding e é utilizada para preparar a imagem que
será rastreada por algoritmos buscando o reconhecimento de características pré-determinadas.
Existem diversos algoritmos desenvolvidos por matemáticos e programadores para efetuar a
Limiarização de imagens, a seguir alguns exemplos muito utilizados em programas de
computação gráfica:
• Limiarização pela derivada 2ª de Pavlids (PAVLIDIS, 1993), onde idéia é identificar
os pixels em que a curvatura atinge o ponto mais extremo, e usar o valor da
intensidade dos pixels encontrados para achar um limiar (JACQUES, 2009).
• Limiar Bimodal de Otsu, onde a idéia é limiarizar uma imagem dividindo os pixels
de n níveis de cinza em duas classes, C1 e C2, que representam o objeto e o fundo
(JACQUES, 2009).
• Limiarização de Rosenfeld Relax, onde a partir de uma imagem binária, realiza-se
basicamente duas análises: uma análise pixel a pixel, para a obtenção das
probabilidades de intensidades de cor de cada pixel e uma segunda análise para a
qualificação da compatibilidade dos mesmos (JACQUES, 2009).
A Figura 6 (A) apresenta uma imagem antes da aplicação da técnica threshold e a
Figura 6 (B) esta mesma imagem após a aplicação da técnica. Após a binarização da imagem
com a função threshold, diversos elementos que estavam presentes na imagem antes já não
estão mais. Para algumas aplicações somente a aplicação deste filtro é suficiente para fazer a
“limpeza” dos itens descartáveis na imagem. Na utilização desta técnica, se obtém melhores
resultados quando o usuário está em um ambiente onde, por exemplo, a parede tem cor
22
homogênea e tonalidade clara, desta forma a “limpeza” que será efetuada nas imagens
capturadas será mais eficaz.
(A)
(B)
Figura 6 – Limiarização de uma imagem “Threshold”
Fonte: Autores (2009)
2.4 CONSIDERAÇÕES FINAIS
Muitas são as técnicas atuais referente à análise e processamento de imagens digitais,
neste capítulo foi explicado as mais importantes para o desenvolvimento deste trabalho bem
como uma visão geral sobre realidade aumentada com exemplos de sua aplicação e visão
computacional apresentando algumas técnicas de análise e processamento de imagens.
23
3 PROJETOS RELACIONADOS
Este capítulo apresenta alguns projetos relacionados à visão computacional que foram
pesquisados com a finalidade de compreender as técnicas utilizadas pelos seus
desenvolvedores.
3.1 PLAYDO JAM – BASQUETE VIRTUAL
Este é um jogo de realidade aumentada desenvolvido pela Playdo Community, que é
uma empresa especializada em jogos multiplayer on line, comunicação interativa e serviços
móveis. A Figura 7 foi retirada deste jogo. O jogo consiste na utilização de movimentos em
frente a webcam para arremessar a bola de basquete para dentro de uma das cestas ou para
atingir alguns itens que aparecem na tela. Há a opção de se jogar em uma ou duas pessoas em
modo de cooperação ou um contra o outro. Ao terminar o jogo o usuário pode deixar a sua foto
com o seu nome e pontos adquiridos disponível on line PLAY DO JAM (2009).
Figura 7 – Jogo de basquete virtual
Fonte: Adaptado de PLAY DO JAM (2009)
24
Neste projeto nota-se que foi trabalhado o efeito gravitacional, repulsão e aceleração
para controlar a bola de basquete. Por tratar-se de um projeto comercial, não foi possível obter
acesso completo as metodologias utilizadas, mas observando a maneira com a qual qualquer
área projetada pelo corpo do jogador pode interagir com o jogo sugere que a técnica utilizada
foi uma técnica do tipo M-SM, captura de movimentos sem uso de marcadores.
3.2 MOTION BUBBLES
Desenvolvido pela empresa Reality Software, o Motion Bubbles é um jogo de
realidade aumentada no qual se encontra em fase de demonstração e possui uma interface bem
simples. Os gráficos são apresentados como bolas verdes, vermelhas, azuis e espinhos. A
pontuação aumenta cada vez que a imagem projetada do jogador colide com uma bola ou
diminui quando colide com um espinho. São mostrados no momento da colisão os pontos que
se ganhou ou perdeu. O objetivo do jogo é ganhar o máximo de pontos antes que o contador
de 60 segundos zere. (THESKA, 2008)
(A)
(B)
Figura 8 – Jogo Motion Bubbles
Fonte: Adaptado de EXTENDED REALITY SOFTWARE (2009)
25
Nos testes efetuados com este jogo foi possível observar algumas falhas que sugerem o
tipo de técnica utilizada em seu desenvolvimento. Na Figura 8 (B), por exemplo, um espinho
está visualmente em cima da imagem do jogador que está em movimento. O que é
intuitivamente esperado nesta situação é que o jogador perdesse pontos, o que não ocorre. Já
quando um objeto está em colisão com as extremidades da imagem projetada pelo jogador e
este está em movimento, a pontuação é aplicada. Esta ocorrência sugere que foi utilizada uma
técnica de extração de contornos, pois está sendo ignorado o restante da imagem para detecção
de colisões. Este é o exemplo mais próximo do jogo Desviator desenvolvido utilizando a
Biblioteca Cam2Play, que será apresentado no tópico 4.3.3.
3.3 BASEBALL COM CARDS
É um jogo com apresentação visual em 3D que foi desenvolvido pela empresa Topps,
fundada em 1938, com sociedade com a empresa francesa Total Immersion para lançarem
uma nova linha de cards de baseball: a Topps 3D Live.
A Topps acredita que para os garotos de hoje o ato de colecionar papel ficou um tanto
ultrapassado e sem sentido, e com a tecnologia e a internet em alta, lançaram um jogo de
Baseball com técnicas em realidade aumentada que tem feito muito sucesso em diversos
países no mundo todo (TOPPS 2009).
Figura 9 – Card de Baseball
Fonte: Adaptado de TOPPS (2009)
26
Para o funcionamento do jogo é preciso acessar o site da Topps, ter uma webcam e os
cards dos jogadores de baseball para a interação. O jogador em modelo 3D pode movimentarse diante a tela, bastando somente colocar o cartão em frente a uma webcam para fazer o
jogador ganhar vida. O software em Flash faz o reconhecimento das informações de
habilidade de cada jogador, onde pode ser feito também uma disputa entre cards. A idéia fez
tanto sucesso que a empresa lançou diversas outras modalidades de cartões. A Figura 9 é um
exemplo de como a imagem virtual é projetada por cima da imagem do cartão.
3.4 CONSIDERAÇÕES FINAIS
Os trabalhos pesquisados exemplificam um pouco da variedade de jogos e utilidades
que se pode criar utilizando as técnicas de visão computacional.
Os jogos Motion Bubbles e o Basquete Virtual são os que mais se aproximam das
aplicações que podem ser desenvolvidas com a Biblioteca Cam2Play, até mesmo pelo fato de
ambas exigirem o uso de marcadores para interação.
Além das técnicas de visão computacional é importante o desenvolvedor obter
conhecimentos na área de design gráfico e produção de jogos em 2D e 3D para que se consiga
desenvolver aplicações com maior qualidade.
27
4 A BIBLIOTECA CAM2PLAY
Em todas as linguagens de programação existem bibliotecas de funções que são muito
úteis para o desenvolvimento de uma aplicação, pois economizam a escrita de rotinas e
facilitam o desenvolvimento do software. As bibliotecas podem ser compartilhadas entre
programas distintos, ou seja, permite que duas ou mais aplicações diferentes utilizem a mesma
biblioteca ao mesmo tempo. Outra vantagem que se obtém ao elaborar uma biblioteca é que
esta pode ser facilmente divulgada e disponibilizada para outros programadores.
A Biblioteca Cam2Play foi desenvolvida utilizando o software Adobe Flash CS8, ou
simplesmente Flash, que é uma plataforma de desenvolvimento gráfico que permite a criação
de animações vetoriais em uma linha do tempo. A partir da versão 5.0 do Flash, foi
incorporada a linguagem de programação Actionscript, orientado a objetos, esta tem fortes
influências do Javascript e permite criar aplicativos, aplicar filtros gráficos em textos e
imagens, criar animações manipular objetos disponibilizados pelo Flash. Todos os recursos do
Flash podem ser utilizados em navegadores que possuam o plugin especial do flash conhecido
como Flash Player.
Figura 10– Incluindo a Biblioteca Cam2Play no Flash
Fonte: Autores (2009)
Os recursos oferecidos pela Biblioteca Cam2Play podem ser utilizados pelo
desenvolvedor, bastando apenas que ele faça a inclusão do arquivo “Cam2play.as” na
primeira instância da linha do tempo do Flash como apresentado na Figura 10. Uma vez feita
28
a referência de onde se encontra o Biblioteca Cam2Play, basta efetuar a chamada do método
startVideo() no local que se deseja iniciar a captura de movimentos. O método
startVideo() inicia a captura de movimentos através da webcam, ajustando o vídeo de
acordo com as opções que o programador informar, como por exemplo, o movieClip aonde o
vídeo será mostrado, o local aonde se encontra o objeto “câmera”, as dimensões que o vídeo
deverá ter e o tipo de filtro que será aplicado nas imagens capturadas da webcam. Maiores
informações sobre como utilizar o método startVideo(), será apresentado no tópico 4.2.
4.1 ARQUITETURA DA CAM2PLAY
A arquitetura da Biblioteca Cam2Play é baseada em conceitos de orientação a objetos.
A Biblioteca Cam2Play possui um pacote de funções úteis no desenvolvimento de aplicações
de realidade aumentada sem uso de marcadores. Ela recebe os parâmetros da aplicação e
retorna informações de colisão e tratamento da imagem dos atores de acordo com o propósito
da aplicação.
4.1.1 Classes auxiliares
A classe BitmapData é a base para a fase de pré-processamento e análise de imagens na
biblioteca Cam2play. Esta componente do Flash fornece diversas funções para tratamento de
imagens. Ela permite trabalhar com os pixels de um objeto Bitmap e manuseá-los de muitas
formas. Os métodos da classe BitmapData permitem criar imagens bitmap transparentes ou
opacas arbitrariamente dimensionadas e manipulá-las de diversas maneiras em tempo de
execução. Essa classe permite separar operações de renderização de bitmap das rotinas internas
de atualização da exibição do Flash Player. Ao manipular diretamente um objeto BitmapData,
pode-se criar imagens complexas sem ficar sujeito à sobrecarga por quadro do redesenho
constante do conteúdo a partir de dados vetoriais o que é ideal para recuperar imagens de uma
câmera.
Um objeto do tipo BitmapData contém uma matriz de dados de pixel. Esses dados
podem representar um bitmap totalmente opaco ou um bitmap transparente que contém dados
29
de canais alfa (ADOBE SYSTEMS INCORPORATED, 2007). Qualquer um desses tipos de
objeto BitmapData é armazenado como um buffer de inteiros de 32 bits. Cada inteiro de 32 bits
determina as propriedades de um único pixel no bitmap. Cada inteiro de 32 bits é uma
combinação de quatro valores de canal de 8 bits de 0 a 255 que descrevem a transparência de
alfa e os valores de vermelho, verde e azul “RGBA” do pixel.
A Classe Camera captura informações de vídeo e áudio vindos do computador. Ela que
viabiliza a comunicação entre a webcam e o Flash e está intimamente ligada a este projeto por
ser o mecanismo de entrada para captura de movimentos.
A classe Video permite a exibição do vídeo ao vivo ou reproduz um arquivo gravado
em formato SWF ou FLV que pode estar armazenado localmente ou em um servidor. Um
objeto do tipo Vídeo faz parte do conjunto de ferramentas do Flash, e pode ser arrastado para
o palco e acessado via código.
Também foi utilizado a classe movieClip que provê uma série de funcionalidades para
manipular objetos dentro do Flash. Chama-se movieClip um objeto instanciado dentro do
palco do Flash no qual se pode atribuir diversas funcionalidades e sub-funcionalidades. É o
mesmo conceito de orientação a objetos só que de uma forma mais visual, onde se pode
arrastar e soltar os objetos.
4.1.2 O núcleo da Biblioteca Cam2Play
As funções principais que envolvem a Biblioteca Cam2Play estão relacionadas com a
fase de pré-processamento da imagem e detecção de colisão, etapa esta que é a ponte entre a
Cam2Play e a aplicação, como apresentado na Figura 11.
Figura11 – Núcleo da Cam2Play
Fonte: Autores (2009)
30
A detecção de colisão é o evento esperado pelas aplicações que farão uso da Biblioteca
Cam2Play. Com o uso deste evento o programador poderá criar as regras que se sucederão ao
ocorrer ou não a colisão.
4.1.3 Captura da imagem de entrada
A captura da imagem de entrada é instanciada fazendo uso de um objeto do tipo
Video, que deve ser criado dentro de um movieClip no palco do Flash. Este movieClip deve
ser nomeado, pois será utilizado como parâmetro na chamada do método startVideo(). Será
explicado com mais detalhes o uso deste método no tópico 4.2. No momento que for feito a
chamada ao objeto Video, o Flash Player exibirá uma caixa de diálogo de privacidade onde o
usuário pode escolher se permite ou não acesso à sua câmera.
Exemplo:
var cam:Camera;
cam = Camera.get();
O objeto tipo câmera traduz as informações vindas do hardware e as transformam em
um conjunto de pixels que são compreendidos pelo objeto vídeo, que deve obrigatoriamente
ser criado no palco do Flash para que a imagem da câmera seja exibida.
Exemplo:
var video_mc:MovieClip;
video_mc.vid.attachVideo(cam);
Neste caso em especial, o vídeo será criado dentro de um movieClip nomeado como
“video_mc”. Uma vez que o vídeo está pronto para ser reproduzido, as suas imagens podem
ser capturadas utilizando alguns recursos oferecidos pela classe BitmapData, que consiste em
obter o mapa de pixels do movieClip “video_mc” de forma recursiva a cada instante de tempo
definido pela quantidade de quadros por segundo a serem exibidos “FPS”, permitindo assim o
início da fase de processamento das imagens de entrada.
31
4.1.4 Processamento das imagens de entrada e detecção de movimentos
Para processar as imagens vindas da uma câmera, será utilizada a técnica descrita no
capitulo 2.3.1, Diferença entre quadros e detecção de movimentos e a técnica de Limiarização
de imagens apresentada no tópico 2.3.2. Com base nos princípios estudados, foi armazenado
em um movieClip “before”, a primeira imagem capturada através da câmera, e em outro
movieClip “now”,
a próxima imagem obtida, e então gerado em um novo movieClip
chamado “desenho_mc”. Todos os movieClips com as imagens são gerados utilizando a
função bitmapData.draw().
A recursão utilizada para atualizar as imagens foi o onEnterFrame, funcionalidade esta
que executa uma interação na velocidade de frames definido diretamente no Flash, não
sobrecarregando assim o aplicativo como um todo. A seguir uma amostra do código utilizado
para gerar a diferença entre quadros de animação e detecção de movimento, cada linha está
comentada para facilitar o entendimento das rotinas utilizadas:
function startVideo(mc_base:MovieClip, app_video_mc:MovieClip,
app_video_w:Number,
app_video_h:Number,
bMode:Number,
vdVisible:Boolean) {
/* esta é a função principal, que captura a imagem de entrada e
efetua o processamento da mesma gerando um novo movieClip */
// define o tipo de filtro a ser utilizado no video
app_video_mc.blendMode = bMode;
// coloca na variavel video_cp o objeto tipo video
video_cp = app_video_mc.vid;
//
informa
qual
é
o
movieClip
que
receberá
processamento
do video
video_out = _root.desenho;
// objeto Camera
cam = Camera.get();
cam.setMode(app_video_w,app_video_h,100,true);
cam.setQuality(100,100);
o
resultado
do
32
// anexa ao objeto Video as imagens capturadas da câmera
video_cp.attachVideo(cam);
video_cp.smoothing = true;
video_cp._visible = true;
video_cp._width = app_video_w;
video_cp._height = app_video_h;
video_cp._x = video_cp._parent._width;
video_cp._y = 0;
// cria uma matriz de pixels vazia
mtMatriz = new Matrix();
// define a escala da matriz de pixels
mtMatriz.scale(5,5);
// cria um objeto bitmap nas dimensões da câmera
btmAgora = new BitmapData(app_video_w, app_video_h);
// cria um objeto bitmap nas dimensões da câmera
btmAntes = new BitmapData(app_video_w, app_video_h);
//
cria
um
retângulo
que
define
área
que
será
usada
no
método
threshold
rect = new Rectangle(0, 0, app_video_w, app_video_h);
// cria um objeto que informa o ponto inicial que será usado no
threshold
pt = new Point(0, 0);
// grava os pixels da câmera na matriz de pixels que estava vazia
btmAgora.draw(video_cp,mtMatriz);
// invoca o evento onEnterFrame delegando as variáveis da classe para
a função drawOut
video_out.onEnterFrame = Delegate.create(this, drawOut);
// anexa a imagem atual da câmera na variável btmAgora
video_out.attachBitmap(btmAgora,50);
// modifica a transparência da saída de vídeo
video_out._alpha = 9; }
33
private function drawOut() {
/* esta função faz o pré-processamento das imagens de entrada */
// desenha novamente no objeto bitmap "btmAgora", a imagem do vídeo
btmAgora.draw(video_cp,mtMatriz);
// efetua a comparação da imagem posterior com a atual
btmAgora.draw(btmAntes,new
flash.geom.Matrix(),new
flash.geom.ColorTransform(),
"difference");
// aplica um filtro para modificar as cores da imagem recebida
btmAgora.threshold(btmAgora,rect,pt,"<=",4279308561.000000,0x0000FFFF
);
// grava a imagem a ser comparada como anterior na próxima iteração
btmAntes.draw(video_cp,mtMatriz);
}
As rotinas implementadas neste código, consiste em gerar e atualizar uma nova
imagem dentro do movieClip “desenho_mc”, obtendo assim um objeto com a diferença
absoluta entre as imagens de entrada da webcam. Esta nova imagem é escrita pela função
bitmap.draw() combinada com a função bitmap.threshold() fazendo com que seja
desprezado todos os pixels não constantes de uma imagem para outra, obtendo então uma
imagem monocromática com a diferença entre as imagens.
4.1.5 Detecção de Colisão
A detecção de colisão é a parte que efetivamente se comunica com a aplicação,
respondendo ao aplicativo quando houver sobreposição da imagem gerada pelo
processamento de entrada. Esta resposta é muito importante, pois é ela quem vai disparar uma
ação programada no aplicativo.
Para tratar desta parte de fundamental importância foi desenvolvida uma função que
efetua um teste de colisão entre dois movieClips, utilizando uma certa margem de tolerância
em relação a transparência da imagem, pois pode ocorrer do movimento capturado não vir
34
diretamente do ator, e sim de outros objetos do ambiente esta função ajuda a diminuir as
chances de erro.
A função verificaColisao() retornará null caso não encontre colisão, e caso
positivo retorna um vetor indicando a posição da colisão detectada (x e y).
A codificação dessa função é apresentada a seguir:
function verificaColisao(mc_1, mc_2, alphaTol, p_scope) {
if (p_scope == undefined) {
var scopo = _root;
}
if (alphaTol == undefined) {
var alpha_tol = 255;
}
// recupera a area dos movieClips
var area_mc1 = mc_1.getBounds(scopo);
var area_mc2 = mc_2.getBounds(scopo);
//
se
nenhuma
das
extremidades
dos
movieClips
estiverem
se
area_mc2.xMax<area_mc1.xMin
||
sobrepondo, retorna null
if
(area_mc1.xMax<area_mc2.xMin
||
(area_mc1.yMax<area_mc2.yMin || area_mc2.yMax<area_mc1.yMin)) {
return (null);
}
var area = {};
area.xMin = Math.max(area_mc1.xMin, area_mc2.xMin);
area.xMax = Math.min(area_mc1.xMax, area_mc2.xMax);
area.yMin = Math.max(area_mc1.yMin, area_mc2.yMin);
area.yMax = Math.min(area_mc1.yMax, area_mc2.yMax);
// define uma nova área monocromática para o vetor 2
var
area2transform
=
new
flash.display.BitmapData(area.xMax-
area.xMin, area.yMax-area.yMin, false);
var vet_mc2 = mc_1.transform.matrix;
vet_mc2.tx = mc_1._x-area.xMin;
vet_mc2.ty = mc_1._y-area.yMin;
// testa a diferença entre os vetores após aplicado a tolerância de alpha
no vetor 1
area2transform.draw(mc_1,vet_mc2,new
1, 1, 255, -255, -255, alpha_tol));
flash.geom.ColorTransform(1,
1,
35
vet_mc2 = mc_2.transform.matrix;
vet_mc2.tx = mc_2._x-area.xMin;
vet_mc2.ty = mc_2._y-area.yMin;
// gera um MovieClip com a diferença entre os quadros comparados
area2transform.draw(mc_2,vet_mc2,new
flash.geom.ColorTransform(1,
1,
1, 1, 255, 255, 255, alpha_tol),"difference");
// testa o tamnho do MovieClip gerado
var bounds_mc2 = area2transform.getColorBoundsRect(4294967295.000000,
4278255615.000000);
if (bounds_mc2.width == 0) {
return (null);
}
// retorna a area de colisão
mc_colisao.x = mc_colisao.x+area.xMin;
mc_colisao.y = mc_colisao.y+area.yMin;
return (mc_colisao);
}
Existe uma forma mais simples de fazer este procedimento, que consiste em utilizar a
função hitTest() disponível na classe BitmapData, mas não é tão eficaz quando se quer
desconsiderar alguns elementos da tela, por isso foi necessário a criação desta nova função.
No tópico 4.2 será mostrado como utilizar o método verificaColisao().
4.2 O USO DA BIBLIOTECA CAM2PLAY
Para desenvolver aplicações com a Biblioteca Cam2Play, o desenvolvedor deve
primeiramente preocupar-se com a área de interesse para interagir com a aplicação, ou
escopo. Por exemplo: “um jogo em que diversos objetos tentam atingir o jogador, onde para
não perder pontos, o este deve primeiramente atacar cada objeto antes de ser atingido”, como
exemplificado na Figura 12.
Para que este exemplo funcione efetivamente, é necessário definir um movieClip que
contenha a área que representa o jogador. Deste modo, o programador deverá testar a colisão
dos objetos com a área do jogador, então programar a ação a ser tomada, por exemplo, perda
de pontos, e testar a colisão da imagem virtual do jogador com os objetos programando então
outra ação, como ganhar pontos.
36
São muitas as possibilidades de interações que se pode fazer utilizando o recurso de
colisão, este é somente um exemplo.
Figura 12 – Exemplo de area de interesse
Fonte: Autores (2009)
A imagem virtual do jogador deverá ser invocada chamando do seguinte modo:
// criando uma nova instância da classe Cam2play
var myCam2Play = new Cam2Play();
// invocando o método startVideo()
myCam2Play.startVideo(mc_base:MovieClip, app_video_mc:MovieClip,
app_video_w:Number,
app_video_h:Number,
bMode:Number,
vdVisible:Boolean)
A chamada desta função irá iniciar a captura do vídeo, processamento e transformação
das imagens capturadas. Os parâmetros esperados pela função startVideo() são:
mc_base: endereço do movieClip que receberá a imagem processada
app_video_mc: endereço do movieClip que possui o objeto vídeo dentro
app_video_w: número informando a largura do palco
app_video_h: número informando a altura do palco
bMode: é o tipo de filtro que se deseja aplicar a imagem da webcam. Esta variável não
modifica a análise e processamento da imagem.
37
vdVisible: especifica se o vídeo com a imagem da webcam deverá aparecer na tela,
para sim usar true, para não usar false.
Esta função irá criar um objeto de vídeo dentro do movieClip mc_destino no tamanho
especificado em app_video_w
e app_video_h. Este novo objeto será automaticamente
posicionado no ponto zero do palco do Flash, com o mesmo tamanho especificado para o
vídeo. Caso estas variáveis de posição e tamanho não sejam informadas será usado o tamanho
padrão do palco do Flash. A variável que identifica o movieClip de destino é obrigatória.
Uma vez que criada a imagem virtual do jogador, basta incluir nos códigos do
aplicativo o que deverá acontecer caso haja colisão entre as diversas e possíveis partes.
Tabela 1
Opções para variável bMode
darkness Desconsidera o ambiente mostrando somente o jogador
silhouet
Mostra somente a sombra do jogador desconsiderando o ambiente
All
Mostra a imagem do modo que é capturado pela webcam
Any
Mantém ativa a resposta de colisão, mas esconde os elementos visuais do jogador
Border
Apresenta somente a diferença de quadros de imagens
Fonte: Autores (2009)
A opção bMode é um parâmetro opcional para o tipo de efeito que será aplicado na
imagem virtual do jogador, como default será usado “darkness”. Por exemplo, é possível
mostrar somente a imagem do jogador, desconsiderando os demais elementos do ambiente, o
que permite ter um plano de fundo com a imagem do jogador por cima. Para utilizar este
efeito, basta enviar o parâmetro “darkness” para a variável bMode. A Biblioteca Cam2Play
possui diversas opções de filtros que podem ser utilizados na aplicação conforme a Tabela 1.
Para verificar testes de colisão, o programador deverá incluir em seu código a função
verificaColisao() que foi apresentada no tópico 4.1.5. A chamada do método deverá ser
da seguinte forma:
Cam2Play.verificaColisao(MovieClip
1,
MovieClip
2,
Tolerância,
Escopo)
Os parâmetros “MovieClip 1” e “MovieClip 2” devem indicar o endereço dos dois
movieClip que serão testados.
38
O parâmetro Tolerancia pode variar de 0 até 255, onde 0 é considerado todos os
elementos presentes na tela e 255 é desconsiderado.
O parâmetro Escopo refere-se ao movieClip aonde ocorrerá a colisão, como default
está o _root que é a primeira instância do aplicativo, assim sendo, a colisão pode ocorrer em
qualquer área da tela.
4.3 EXEMPLOS DE APLICAÇÃO DA CAM2PLAY
Neste tópico serão apresentados alguns exemplos desenvolvidos utilizando a Biblioteca
Cam2Play.
4.3.1 Detector de movimentos
Na Figura 13 é apresentado um exemplo de um simples detector de movimentos. Este
exemplo consiste em fazer com que o círculo vermelho localizado na parte superior da tela
comece a piscar cada vez que for detectado a presença de movimento na área capturada pela
webcam.
Figura 13 – Amostra do detector de movimentos
Fonte: Autores (2009)
Para desenvolvimento deste aplicativo foi instanciada a Biblioteca Cam2Play, e
efetuado o teste de colisão entre um movieClip transparente localizado em toda a área
39
disponível do vídeo com a imagem gerada pela Cam2Play. Caso seja detectado o movimento é
feito o disparo de uma função que faz com que o círculo vermelho fique piscando.
Na imagem visualizada neste aplicativo aparecem somente os contornos mais
destacados do usuário, ficando a tela totalmente branca quando não se detecta movimento.
Para este efeito, foi passado como parâmetro para a função startVideo() o valor “border”,
na variável bMode.
4.3.2 Ping Pong
O tradicional e conhecido jogo de ping-pong tem agora uma nova modalidade de
interação, conforme a Figura 14. Com a utilização da Biblioteca Cam2Play foi desenvolvido
um jogo de ping-pong onde duas pessoas podem jogar utilizando as mãos. Com o movimento
das mãos, cada jogador conseguirá mover a barra deslizante para cima e para baixo entrando
em competição de forma virtual com o adversário.
Figura 14 – Jogo Ping Pong
Fonte: Autores (2009)
Neste projeto foram isoladas duas áreas de interesse que correspondem a cada uma das
barras laterais. Dentro de um loop do tipo onEnterFrame(), é feito um teste de colisão com as
40
áreas de interesse, e cada vez que for detectado um evento de colisão, a função
verificaColisao() retorna um objeto que contem informações da posição X e Y onde esta
colisão ocorreu, deste modo é feita a atualização da posição Y da barra, de acordo com a maior
posição retornada Y pela Cam2Play. A Figura 14 apresenta um esquema de como funciona
este jogo.
4.3.3 Desviator
O Desviator, é um jogo onde diversos elementos caem aleatoriamente da parte superior
da tela, conforme a Figura 15. O jogador tem por objetivo desviar-se do maior número possível
de elementos negativos e tocar no maior número de elementos considerados positivos. Os
elementos considerados negativos têm em seu visual um símbolo “(-)” e os positivos “(+)”. O
jogador inicia com 10.000 pontos em seu marcador. Ao colidir com um elemento qualquer, o
jogador perderá ou ganhará pontos. Cada elemento possui em sua configuração um número de
pontos positivos ou negativos.
Figura 15 – Jogo Desviator
Fonte: Autores (2009)
A barra de energia localizada à direita na parte inferior irá marcar de forma visual os
pontos que o usuário tem, ficando totalmente verde quando o jogador tem mais de 10.000
41
pontos e mudando para as cores laranja quando atingir 5.000 pontos, amarelo quando atingir
2.500 pontos e vermelho quando atingir menos de 1.000 pontos. Sendo assim, caso o jogador
fique sem a barra de energia, ou seja, com pontos negativos, o jogo será encerrado e uma
mensagem “Você perdeu!” será apresentada em tela. Ao término do tempo, aparecerá uma
mensagem informando os pontos do jogador.
O ambiente em que o usuário irá jogar influencia no resultado do jogo. O ambiente
ideal é um local onde possui fundo branco ou com cores claras. Objetos que estejam no
ambiente que tenham destaque nas cores poderão acidentalmente colidir com os elementos que
caem. Mas este não é um problema, e sim uma definição utilizada para este jogo. Caso o
desenvolvedor queira, pode ser isolada uma área onde testes de colisão acontecerão somente
ali, como explicado no tópico 4.2.
4.4 CONSIDERAÇÕES FINAIS
Este trabalho não tem limites para sua melhoria ou utilização. Os arquivos fonte
estarão disponíveis para download no site www.tecsin.com.br/flash/cam2play.
42
5 CONCLUSÃO
A Biblioteca Cam2Play, resultado deste trabalho, poderá auxiliar no desenvolvimento
de aplicações de realidade aumentada sem o uso de marcadores em Flash e Actionscript. O
desenvolvedor deverá preocupar-se somente com o desenvolvimento da aplicação,
determinando as áreas de interesse para teste de colisão com o sistema de detecção de
movimentos da Biblioteca Cam2Play. Esta biblioteca possui código fonte aberto e é de livre
distribuição, podendo o desenvolvedor utilizá-la ou modificá-la adaptando a suas necessidades.
As aplicações desenvolvidas nos tópicos 4.3.1, 4.3.2 e 4.3.3 foram baseadas como
hipóteses de uso da Biblioteca Cam2Play, e são exemplos de seu funcionamento.
Todas as aplicações desenvolvidas neste trabalho, foram feitas utilizando somente o
plano 2D “duas dimensões” e uma webcam para interação. Existe a possibilidade de dar
continuidade a este trabalho desenvolvendo aplicações em 3D “três dimensões” fazendo uso de
duas webcams para que se consiga determinar a localização do usuário no plano espacial.
Também existe a possibilidade de adaptar a Biblioteca Cam2Play para reconhecer marcadores
e assim aumentar a sua abrangência.
A construção deste trabalho passou por algumas dificuldades, a principal delas foi a
programação das técnicas de visão computacional em Actionscript. A programação foi feita
utilizando conceitos de orientação a objetos e gerado um arquivo externo que deve ser
importado para uso da Biblioteca Cam2Play, facilitando assim a utilização da mesma. Também
foi encontrado dificuldades no levantamento bibliográfico, visto que ainda são poucos os livros
que tratam especificamente de realidade aumentada, porém na pesquisa em artigos e trabalhos
de conclusão de curso de alguns autores, foram encontradas diversas informações sobre
tratamento de imagens e técnicas de visão computacional que foram suficientes para apresentar
os conceitos propostos conseguindo então fazer a implementação da Biblioteca Cam2Play e
demonstração de suas aplicações conforme o capítulo 4, conseguindo deste modo alcançar os
objetivos propostos neste trabalho conforme o tópico 1.1.
43
REFERÊNCIAS BIBLIOGRÁFICAS
ADOBE SYSTEMS INCORPORATED. Introducing the Image Biblioteca in Flash 8.
Disponível em:
<htp://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/display/BitmapData.html>
<http://livedocs.adobe.com/flash/9.0/main/flash_as2_programming.pdf>.
Acessado
em
outubro de 2009.
DE SOUZA, Eder Jonck.
Uma Alternativa de Interface Homem-Máquina utilizando uma
Câmera de Baixo Custo. Trabalho de Conclusão de Curso. Universidade do Estado de Santa
Catarina – UDESC, 2005.
EXTENDED REALITY. Motion Bubbles. Disponível em:
<http://www.extendedreality.com/webcam_game_motion_bubbles.html>
Acessado em novembro de 2009.
HITLAB. ARToolkit , 1999. Disponível em: <http://www.hitl.washington.edu/artoolkit/>
Acessado em maio de 2009.
ILM - Industrial Light & Magic - Making Of: The Shot Process
Disponível em: <http://www.ilm.com/theshow/>. Acessado em julho de 2009.
JACQUES, PROF. DR FACON. PPGIA, Programa de Pós-Graduação Em Informática
Aplicada. PUCPR- Pontifícia Universidade Católica Do Paraná. Disponível em:
<http://www.ppgia.pucpr.br/~facon/Binarizacao/LimiarOstuNovo3.PDF>
<http://www.ppgia.pucpr.br/~facon/Binarizacao/LimiarDerivada2aPavlidis3.PDF>
Acessados em novembro de 2009.
MIRANDA, Jeferson José. MOVE-IN: Uma API para interatividade com a webcam. Centro
de Ciências Tecnológicas / Universidade do Estado de Santa Catarina, 2008
Disponível
em:
II.Jeferson.J.M.pdf>
Acessado em março de 2009.
<http://www2.joinville.udesc.br/~larva/portal/uploads/TCC-
44
OTSU N., A Threshold Selection Method from Gray-level Histograms, IEEE Transactions
on Systems, Man and Cybernetics, v. SMC 9, no 1, pp.62-66, 1979.
PAVLIDS, T., Threshold Selection using Second Derivatives of the Gray Scale Images,
IEEE, 1993, pp 274-277.
PEDRINI, Hélio. SCHWARTZ, William Robson. Análise de Imagens Digitais –
Princípios, Algoritmos e Aplicações. Thomson Learning, São Paulo, 2008.
PLAY DO COMUNNITY. Play do Jam. Disponível em: <http://www.playdojam.com/>.
Acessado em novembro de 2009.
SAQOOSAHA – FLARToolkit Startup Kit Disponível em:
<http://saqoosha.net/en/flartoolkit/start-up-guide/>. Acessado em maio de 2009.
THESKA, Laila Freitas Soares; CHRISTIANE S. Falcão e VASCONSELOS, Marcelo
Márcio Soares. Análise Ergonômica do game Motion Bubbles em realidade aumentada.
Departamento de Design / Universidade Federal de Pernambuco, 2008 Disponível em:
<http://ixdasp.org/wp-content/uploads/realidadeaumentadagamesid445.pdf>. Acessado em
novembro de 2009.
TOPPS 3D Live. 3D Cards. Disponível em: <http://www.toppstown.com/>. Acessado em:
novembro de 2009.
WANGENHEIM, Aldo Von; COMUNELLO, Eros. Visão computacional:
Seminário Introdução à Visão computacional. The Cyclops Project. PPGCCINEUFSC. 2005. Disponível em: <http://www.inf.ufsc.br/~visao/>. Acessado em 03/07/2009.