Controla la pantalla con tu mano
Esto es lo que hacen Hand Catch y Swipong. Y son menos líneas de las que crees.
Control the screen with your hand
This is what Hand Catch and Swipong do. And it is fewer lines than you think.
Primero lo básico: pedirle al navegador acceso a la cámara y mostrar lo que ve. Son tres líneas.
getUserMedia es la que pide permiso. Si dices que no, no pasa nada más —
y ese permiso lo controlas tú, siempre.
First the basics: ask the browser for camera access and show what it sees. Three lines.
getUserMedia is the one that asks for permission. If you say no, nothing else
happens — and that permission is always yours to control.
Acá entra MediaPipe, una herramienta gratuita de Google que reconoce manos, caras y cuerpos. Le pasas una imagen y te devuelve 21 puntos de cada mano: la punta de cada dedo, los nudillos, la muñeca.
Lo importante: el modelo se descarga una vez y corre dentro de tu navegador. No hay servidor viendo tu cámara.
Mueve tu mano frente a la cámara y verás los puntos siguiéndola.
Enter MediaPipe, a free Google tool that recognises hands, faces and bodies. You hand it an image and it gives you back 21 points per hand: each fingertip, the knuckles, the wrist.
The key part: the model downloads once and runs inside your browser. No server is watching your camera.
Move your hand in front of the camera and you will see the dots follow it.
21 puntos son muchos. Para un juego normalmente te basta uno. El punto número 8 es la punta del índice — con eso ya puedes mover cosas.
Acá lo usamos para arrastrar un círculo. Esto ya es un control por gestos.
21 points is a lot. For a game you usually need one. Point number 8 is the index fingertip — that alone is enough to move things.
Here we use it to drag a circle around. This is gesture control, right here.
Con lo de este tutorial y el bucle de animación del anterior, ya tienes las dos piezas de Hand Catch: cosas que caen, y una mano que las atrapa.
Lo demás es puntaje, sonido, dificultad y muchas horas de ajustar números hasta que se sienta bien. Esa última parte es la que más cuesta, y la que nadie te cuenta.
With this tutorial plus the animation loop from the previous one, you already have both pieces of Hand Catch: things that fall, and a hand that catches them.
The rest is scoring, sound, difficulty and many hours of tweaking numbers until it feels right. That last part is the hardest, and the one nobody tells you about.