Bate-Asas: voe batendo os braços na frente da webcam

Como a câmera vira controle?

O jogo não usa nenhum sensor especial: só a webcam. Cada quadro passa por um modelo de estimativa de pose (MediaPipe Pose Landmarker) que devolve 33 pontos do corpo — ombros, cotovelos, pulsos, quadris… O jogo olha apenas para os braços e transforma o movimento deles em comandos de voo.

Webcam

33 pontos

MediaPipe Pose

Gestos

gestures.py

Física do voo

physics.py

Pássaro

O que o jogo mede nos braços

• Velocidade vertical dos pulsos (a "batida")
• Abertura dos braços em relação aos ombros
• Inclinação entre um braço e outro (a "asa de avião")
• Braços colados ao corpo ou acima da cabeça

Um único intérprete de gestos

A versão Desktop lê a câmera com OpenCV + MediaPipe em Python; a versão web lê com JavaScript. As duas entregam os mesmos 33 pontos ao mesmo módulo gestures.py — bater asas, planar, mergulhar e curvar significam a mesma coisa nos dois lugares.

Os gestos

Tudo é feito com os braços. Fique de frente para a câmera, com espaço para abrir os braços, e deixe ombros, cotovelos e pulsos visíveis.

🪽

Bater os braços (de cima para baixo)

O pássaro sobe. Cada batida dá um impulso; parar de bater faz ele cair.

🧘

Braços abertos na altura dos ombros

Plana: cai devagar e mantém a velocidade.

✈️

Inclinar os braços como asa de avião

Faz curva para o lado do braço mais baixo.

🚀

Braços colados no corpo

Mergulha e ganha velocidade.

🙌

Os dois braços acima da cabeça

Começa a partida.

❌

Cruzar os braços em X (segurar ~1 s)

Sai da corrida e volta ao menu.

Dois modos, e o tempo sempre contra você

CORRIDA E VOO LIVRE

No menu, TAB troca o modo e 1 troca a quantidade de arcos. Os recordes ficam salvos no seu navegador, separados por modo e por quantidade de arcos.

Corrida

Atravesse os arcos dourados (5, 10 ou 20) no menor tempo. A cada arco a dificuldade sobe um degrau: vem uma rajada, a câmera treme, aparece "VENTO MAIS FORTE!" e no último arco a chuva já entrou.

Voo livre

Sem alvos: o cronômetro conta enquanto você está no ar e para quando você pousa. A dificuldade sobe com o tempo, até o máximo em 90 segundos.

Vento e chuva

O vento empurra o pássaro de lado independente do rumo — é preciso corrigir com curvas. Uma bússola no canto inferior direito mostra de onde ele sopra e a força em km/h. A chuva reduz a visibilidade aos poucos.

Turbo

Bater asas numa cadência alta (~3 batidas por segundo) enche um carregador. Acima do limiar o pássaro ganha velocidade extra, a tela pulsa com zoom e saem riscos de velocidade das bordas. Parou de bater, tudo volta em ~1 s.

Teclado e toque

Tudo também funciona sem câmera. No menu, C alterna entre teclado e câmera.

No celular (versão vertical)

• Tocar na tela — bate asas (e começa a partida)
• Arrastar para os lados sem soltar — curva
• Arrastar para cima — plana · para baixo — mergulha
• Tocar no canto superior esquerdo — volta ao menu
• Quer jogar com os braços? Apoie o celular a ~2 m e permita a câmera

Tecla	Ação
ESPAÇO	Bater asas / começar
← →	Curva
↑	Planar
↓	Mergulhar
TAB	Trocar modo: corrida / voo livre (no menu)
1	Quantidade de arcos: 5 / 10 / 20 (no menu)
C	Trocar controle: teclado ↔ câmera (no menu)
V	Trocar para a próxima webcam (a escolha fica salva)
S	Liga/desliga o som (no navegador ele começa desligado)
D	Painel de debug (fps e valores dos braços ao vivo)
R	Reiniciar corrida
M	Voltar ao menu
ESC	Volta ao menu

Como Python e visão computacional estão rodando no navegador?

O jogo é escrito em Python com PyGame, como o Dino do Exp #001. Para rodar aqui, ele é compilado para WebAssembly com o Pygbag. O navegador baixa o runtime Python, o numpy e o jogo empacotado — por isso a primeira carga demora um pouco.

Python PyGame Pygbag WebAssembly Browser

A câmera é a parte que precisou ser reinventada: MediaPipe e OpenCV em Python não existem em WebAssembly. Então, no site, a câmera é feita em JavaScript com o MediaPipe Tasks Vision (mesmo modelo pose_landmarker_lite do Desktop), e o Python lê os 33 pontos a cada quadro.

Um Web Worker de propósito

O bundle do MediaPipe reaproveita e depois apaga o window.Module global — que é justamente o runtime do Pygbag, ou seja, o jogo inteiro. Na thread principal o jogo morre na hora. Num Worker cada um tem o seu global, e de quebra a detecção (~40 ms por quadro) sai da thread do jogo.

Calibrador de câmera

Na primeira vez com mais de uma webcam, o jogo testa cada uma por ~2 s e fica com a que enxerga uma pessoa. A escolha fica salva no navegador; V troca depois.

Recordes no navegador

No Desktop os recordes vão para um arquivo JSON; no site, para o localStorage. Só duas funções mudam (load_record / save_record) — o resto do jogo nem sabe onde está rodando.

Perfil mais leve

Python em WASM é 3 a 4× mais lento em laço puro. A versão web desenha 1.100 árvores em vez de 2.400, usa células de terreno maiores e menos nuvens — mesmo jogo, menos custo por quadro.

Privacidade

O vídeo da sua câmera nunca sai do navegador: os quadros vão para o Worker, voltam só os 33 pontos, e nada é enviado a servidor nenhum. A câmera só funciona em https (ou localhost), regra do próprio navegador.

Dicas e problemas comuns

"NÃO ESTOU TE VENDO". Afaste-se até aparecerem ombros, cotovelos e pulsos no painel da câmera. Luz de frente ajuda bastante; luz por trás atrapalha.
Permissão negada sem querer? Clique no cadeado da barra de endereço, libere a câmera e aperte C no menu.
Câmera errada (DroidCam, virtual do OBS…)? V troca para a próxima; a escolha fica salva.
Tela cinza por muito tempo? Na primeira visita o navegador baixa ~45 MB. Espere ou recarregue. Precisa de internet nessa hora.
Sobe pouco ao bater? Batidas amplas e rápidas contam mais que batidas curtas. D mostra os valores dos braços ao vivo.

Versão para celular

Bate-Asas

Voe batendo os braços na frente da webcam

O que você pode testar

O que está acontecendo?