Dados utilizados
- Quadros da webcam na engine Python.
- Dados de exemplo no painel da demo web.
Case de projeto
Flappy Bird com Gestos
Flappy Bird jogado com a mão na webcam em uma engine Python local, com uma demo web em Canvas sem câmera.
Problema
Jogar sem teclado exige traduzir um gesto em um comando estável.
Pygame e OpenCV não rodam na Vercel.
Solução
Arquitetura resumida
- Quadros da webcam na engine Python.
- Dados de exemplo no painel da demo web.
Decisões técnicas
- Engine Python com MediaPipe Hands e filtro temporal de suavização.
- Modo discreto (abrir a mão para pular) e modo contínuo (altura da mão).
- Demo web com física própria em Canvas 2D: gravidade, canos e colisão.
Resultado
O gesto vive na engine local; a demo publicada mostra o jogo, não o controle por câmera.
- Canvas 2D
- Python com visão computacional
- Mapeamento gesto-comando
Aprendizados e limitações
- A demo web não usa gestos; a própria página declara a integração como próxima etapa.
- O painel da demo mostra dados de exemplo.
- Não há testes automatizados.
Mais sobre o projeto
Detalhes completos do case, colapsados para leitura opcional.
Descrição completa
Flappy Bird controlado pela mão aberta ou fechada na webcam, em uma engine Python local, com uma demo web publicada.
Na engine, o MediaPipe Hands lê a mão, um filtro temporal suaviza o sinal e dois modos traduzem o gesto: abrir a mão para pular ou a altura da mão.
A demo publicada é um Canvas 2D jogado com clique, toque ou espaço; ela não usa a câmera.
O painel da demo mostra dados de exemplo, não medições do jogo.
Engine em Python com MediaPipe, OpenCV e Pygame; demo web em Next.js, React e Canvas 2D.
Funcionalidades e destaques
- Controle por gesto na engine Python.
- Dois modos de controle.
- Jogo web em Canvas com recorde salvo.
- PWA com CSP e Permissions-Policy.
- Suaviza o sinal da mão com um filtro temporal antes de agir.
- Oferece modo discreto e modo contínuo de controle.
- Implementa a física do jogo web em Canvas 2D sem biblioteca.
Arquitetura técnica e dados
Arquitetura técnica
Como o case foi pensado como produto
Flappy Bird jogado com a mão na webcam em uma engine Python local, com uma demo web em Canvas sem câmera.
Canvas APIPlataforma webNext.jsFrameworkReactFrameworkTypeScriptLinguagemPythonLinguagemMediaPipeIAOpenCVIAPygameFramework
Principais componentes
- Controle por gesto na engine Python.
- Dois modos de controle.
- Jogo web em Canvas com recorde salvo.
- PWA com CSP e Permissions-Policy.
Decisões técnicas
- Canvas 2D
- Python com visão computacional
- Mapeamento gesto-comando
Trade-offs
- A demo web não usa gestos; a própria página declara a integração como próxima etapa.
- O painel da demo mostra dados de exemplo.
- Não há testes automatizados.
Como executar
- Web: npm install e npm run dev.
- Engine (Python 3.10 a 3.12): python -m venv .venv, ative, pip install -r requirements.txt e python main.py
Mídia adicional
Créditos
Desenvolvido por Matheus Siqueira - https://www.matheusdev.tech
Próximo projetoAd Performance Intelligence
Dashboard de BI em Next.js que compara Google Ads e Meta Ads com dados simulados: KPIs, funil e ROAS.
Ver case completo