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

Publicado em por

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.