Marco Gomes

Geek, imigrante, nerd, cristão, biker. Founder da boo-box (vendida) e do Heartbit. Consigliere do JovemNerd

Interação com webcam na campanha Aniversário GSM

Publicado em 2005-10-20

Para ver a peça entre no site da Brasil Telecom, clique no destaque principal com a imagem do Fábio Assunção, uma janela pop up será aberta, clique na chamada Ligue sua webcam[…]. Caso o computador não tenha o Flash Player mais recente aparecerá uma janela pedindo permissão para atualização.

Caso você tenha uma webcam ativada vai aparecer a imagem que ela estiver filmando e por cima o tracejado de uma mão fazendo um certo sinal, caso você faça este mesmo sinal com a sua mão uma animação será disparada.

É a primeira campanha online no mundo a utilizar reconhecimento de padrão e forma usando a imagem da webcam do usuário.

Totalmente programado por mim e pelo Leandro (Durang). Não pudemos sequer estudar soluções adotadas por terceiros já que na época da primeira versão (3 semanas atrás) nada disso existia. Semana passada publicaram um tutorial no site da Macromedia ensinando a fazer um programa que destaca um canal de cor – vermelho, azul ou verde – da imagem da câmera. Modéstia à parte, aquilo é bem menos do que fizemos.

Não foi nada fácil, eu até achava que seria impossível conseguir tanta precisão no reconhecimento de contornos e contrastes. Sorte minha que eu estava errado, tanto não era impossível que está pronto e é lindo!

Simplificando bastante o processo é o seguinte:

Definição manual de pontos de reconhecimento
Por dentro e por fora do tracejado da área a ser reconhecida são definidos dezenas de pontos, estes serão usados na comparação de cores.
A definição de pontos era feita dinamicamente – em tempo de execução do programa –, porém, muitos pontos do centro da área estavam sendo definidos, a cada ciclo o script tinha de lidar com inúmeros pontos desnecessários, fazendo a aplicação ficar excessivamente lenta.
Este foi o primeiro pulo do gato: definir os pontos manualmente. Com isso pudemos controlar exatamente onde estariam e quantos seriam os pontos de comparação, reduzindo drasticamente o processamento necessário em cada ciclo de comparação de cores.
Comparação de cores
Tomando dois pontos da imagem da webcam (um dentro do tracejado e outro fora) as cores, no formato RGB, são comparadas, caso a diferença de cor seja maior que 30* (a escala RGB vai de 0 a 255) o programa as reconhece como cores distintas.
Verificação de pontos contrastantes
O programa detecta se a porcentagem de pontos de cores diferentes dentro e fora da forma é superior a 90*.
Homogeneidade de cor no interior da área
As cores dos pontos no interior dá área são comparadas, o objetivo é certificar que o preenchimento é realmente algo de cor homogênea, diminuindo o risco de objetos aleatórios – como um quadro na parede ou uma pessoa de pé – dispararem a animação.
Este foi o segundo pulo do gato.
Verificação de moda de cor
Moda é o indivíduo de maior ocorrência em um conjunto, por exemplo, no conjunto [1, 2, 5, 2, 7] a moda é 2, já que é o número que mais se repete.
Fizemos uma função que, dados certos pontos, ela retorna a moda de cor, esta função foi extremamente importante no protótipo (o programa que provou ser possível reconhecer padrões usando Flash). Na versão final esta função acabou sendo subutilizada, sendo útil apenas no cálculo de homogeneirdade de cor no interior da área.

A maior parte dos processos acima descritos foram implementados no protótipo, sendo levemente modificados para a versão final que é infinitamente mais organizada.

O protótipo foi feito em Extreme Pair Programming: duas pessoas no mesmo computador, programando sem planejar nada antes. Eu e o Leandro simplesmente nos revezamos no teclado madrugada adentro, sem tirar um tempo antes para modelar classes nem nada disso. Verdadeiros programadores Klingon.

O projeto final está em um padrão de modelagem chamado MVC, usando este design pattern conseguimos maior facilidade na alteração do algoritmo e também invejável organização em um prazo bem apertado.

Prefiro não citar nomes aqui no meu site pessoal para evitar problemas profissionais, meus agradecimentos vão para toda a equipe de Atendimento da AgênciaClick que nos representa muito bem junto ao cliente, inclusive negociando prazos, e também à equipe de Criação que sempre inventa essas coisas impossíveis de se fazer e incentiva o pessoal da programação a tentar implementar, são sempre muito abertos à negociação também. Não fossem eles, nada disso existiria.

* variável que pode ser alterada para alterar a precisão do reconhecimento.

Textos relacionados:

Deixe sua opinião

17 comentários

  1. André comentou:

    Talvez seja melhor não ser tão convencido assim, cara. Já vi jogos em flash com interação via web-cam cerca de 3 meses antes do flash 8 ser lançado.

  2. Fabrício Mendonça comentou:

    Parabéns Marquin… Você e o Leandro mandaram muito nesse projeto. Esse é apenas um de muitos outros que ainda estão por vir e uma coisa eu posso garantir: se a nossa equipe (interface da click) puder contar com talentos como o seu e o do Leandro, com certeza vai sair coisa boa. Abraços e sucesso.

  3. Marco Gomes comentou:

    André: Sim, mas não são com detecção de forma, e não são uma campanha online.. Eu já vi esses jogos também, pura detecção de movimento…

    Fabricio: Valeu cara, vc é muito mais sabido de Flash que eu… Sabe disso!

  4. andre comentou:

    Na verdade vc nao ta detectando forma nenhuma, vc verifica os padroes de cores dentro e fora de uma determinada area, para dar play em uma animacao, quem sabe se vc se informar mais, aprender mais.

  5. Marco Gomes comentou:

    Ah claro, é isso mesmo, senhor bonzão, é simples assim, ficamos 3 semanas gastando noites aqui para simplesmente detectar pixels dentro e fora de uma área… Simples né? Fazer bomba atômica também é.

  6. marcelo comentou:

    Velho, nao importa se ja tinham feito ou nao =) o bom foi ver a ideia produzida. Isso sim ‘e o que eu valorizo. Algoritmos de deteccao existem aos montes por ai, assim como algoritmos para qualquer coisa que citarem em quase todos os lugares. O merito verdadeiro nao fica por ser a primeira campanha, por ser isso ou aquilo, mas por vcs terem atendido o cliente de forma precisa, dentro do prazo e o melhor: com solucoes criadas por voces.

    =) olha que eu sei o que to falando, principalmente no que diz a respeito a motion detection com pontos de referencia =) *fiz experimentos para o nokia trends, que infezlimente nao puderam ir pra la.. mas deu pra manjar o trampo!

    Parabens pra vc e pro cara =)

    *minha dica pra vc evitar comentarios como esse andre monday (alias esse sobrenome por si so ja queima o camarada): Velho valorize sim seu trabalho, por mais que ja tenham feito antes, mas sempre comedido.. assim vc evita manes =)

    Abracao e rock on! =)

    * to sem acentos, sem til sem nada =)

  7. Marco Gomes comentou:

    Ok, criticas absorvidas!

    E realmente algoritmos existem às pencas… O importante é que fizemos o nosso do zero.

  8. Bruce comentou:

    Oh my god! eu tb sou da familia “Monday” XD

    marco vc tah bem sucedido, quando tiver bem sucedido E rico me arruma uma grana? :3

  9. art comentou:

    Puts cabeção! Muito massa isso um dia quem sabe eu aprenda isso =P

    uhahuuah pensei q esse andre era seu amiginho de blog acho q era ryanoken alguma coisa assim =) tu continua cheio de fans em uhahuahua

  10. Ricardo comentou:

    Olha o Marco virando adulto!! Logo logo você fará 18 anos! heheh

    Além da peça produzida, parabéns pela iniciativa de escrever alguns detalhes da produção do algorítmo – coisa rara em uma internet invejosa, cheia de ctrl c, ctrl v tão egoístas; o que levou a pensar as soluções, o processo de escrita e lógica e qual marca de energético usar pra virar a noite em claro.

    ;)

  11. Leandro comentou:

    pff.. mó algoritmo simples isso aí, aposto que foi um hittestzinho que você deu uma adaptada e falou que foi foda..

    tsc tsc

  12. Daniel Prado comentou:

    Neguim que esta falando que é fácil é pq agora conhece o processo, o difícil é ter a idéia de como fazer, vc e o seu brother tiveram essa idéia. Parabéns véi.

  13. danilo comentou:

    como voce é otário meu, vai estudar aprender alguma coisa primeiro antes de falar essas merdas todas, por isso a agenciaclick de brasilia tem essa ma fama!!!!!!!!!

  14. danilo comentou:

    os links:
    Webcam Motion Detection: Using the BitmapData API in Flash 8
    http://www.macromedia.com/devnet/flash/articles/webcam_motion.html

    webmac examples
    http://www.flashguru.co.uk/maelstrom/

  15. danilo comentou:

    alguns experimentos com webcam e flash 8…
    http://www.quasimondo.com/

  16. Marco Gomes comentou:

    O link da Macromedia que você mandou é EXATAMENTE o mesmo que eu coloquei no inicio do artigo.

    Você tá mandando EU estudar? Mostre algo que VOCÊ tenha feito.

    E os outros links que vc mandou NÃO tem detecção de forma, apenas exemplos básicos, já conheço todos eles…

    Estude garoto…