Swipe left/right usando o tracking.js

Semana passada aconteceu o Brazil.js, a maior conferência de JavaScript do universo. É, eles usam esse slogan mesmo :)

Eu não fui. Na verdade eu estava bem longe, são uns 4000 kms de João Pessoa até Porto Alegre. Mas graças a Internet e a transmissão fornecida pelo site do evento, eu consegui assistir uma palestra.

O evento foi durante a semana, eu estava fazendo um bocado de coisas e não tive muito tempo para parar e assistir várias palestras. Entretanto a única palestra que eu vi valeu muito a pena.

Eu assisti o pernambucano Eduardo Lundgren falando sobre um projeto chamado tracking.js, uma biblioteca que traz para o browser a capacidade de rastreamento de elementos em uma cena capturada pela câmera do seu computador.

Parece complicado, não é? Não. Além de ser sensacional fazer tracking de elementos numa cena com marcadores de uma certa cor ou de faces ou de mãos, a biblioteca é muito fácil de usar.

Ser interessante e fácil de usar são elementos chaves para inspirar hacks, pois em pouco tempo você consegue gerar resultados surpreendentes.

Claro, eu fiz meu hack também. A minha ideia era conseguir usar gestures com o tracking da câmera. Um gesture simples que pode ser feito com apenas um ponto é o swipe, aquele que você faz no celular tocando o dedo na tela e movimentando rapidamente para um dos lados.

Eu usei o tracking de cor no experimento que eu fiz, por preguiça eu pintei a tela do meu celular que estava por perto de magenta para servir de marcador. Movimentando o celular rapidamente para um lado ou para o outro eu fiz imagens passarem no browser. O resultado ficou bastante interessante.

E para não matar vocês de curiosidade apresentando apenas texto sobre um experimento bastante visual, eu gravei um vídeo rápido mostrando o resultado.

Leave a Reply