[Proyecto 08 · Juego con las manos]
Pellizca_
Abres la página y tu cámara ocupa toda la pantalla. Encima flotan piezas 3D con las formas de la marca Totot: las pellizcas con los dedos, las arrastras por el aire y las lanzas por una O que se mueve. Sin control, sin app y sin instalar nada, solo tus manos y el navegador.
[pellizca.vercel.app]
[La idea]
¿Y si la pantalla fuera un espejo donde puedes agarrar cosas que no existen? Un gesto que todos sabemos hacer, pellizcar, convertido en el único control de un juego_
[Racha ×3]
Capturas en modo sin cámara. Con la cámara encendida, tu video en espejo ocupa el fondo y las piezas flotan frente a ti.
[Cómo funciona]
Cuatro capas,
una pantalla_
El truco es que tú sigues viéndote. El juego no reemplaza la cámara: se pinta encima, en capas transparentes que se alinean con tu video cuadro por cuadro.
- Tu cámara, en espejoOcupa toda la pantalla y se voltea como un espejo para que mover la mano a la derecha se sienta a la derecha.
- Un velo de sombraUn degradado oscurece apenas la parte de arriba y la de abajo del video para que el tiempo, los puntos y los botones se lean sobre cualquier fondo.
- La escena 3DLas piezas y la O se dibujan con Three.js sobre un lienzo transparente, con la misma proporción que el video.
- Tus manosUn cursor en forma de O sigue la punta de tus dedos y se va cerrando conforme pellizcas.
[Se juega así]
Muestra, pellizca,
lánzala_
Un tutorial de tres pasos avanza solo cuando haces cada gesto, así nadie necesita leer instrucciones. En la práctica, al agarrar una pieza aparece un camino hacia la O que se pone verde cuando tu gesto va bien dirigido; en la partida ya vas solo. Después vienen la cuenta regresiva y una ronda de 60 segundos.
[El pellizco]
Leer una mano
sin falsos positivos_
La cámara detecta 21 puntos de cada mano. El pellizco es la distancia entre la punta del pulgar y la del índice, dividida entre el tamaño de la mano, para que funcione igual cerca o lejos de la cámara.
- HistéresisCierra por debajo de 0.28 y abre por encima de 0.42. Ese margen evita que la pieza se suelte sola cuando los dedos tiemblan en el límite.
- Filtro 1€Suaviza el temblor cuando la mano está quieta y responde al instante cuando se mueve rápido.
- Dos manosCada mano conserva su lugar entre cuadros y puede cargar su propia pieza. Si la cámara la pierde un momento, no suelta lo que lleva.
- PunteríaEl tiro sigue la dirección de tu gesto, no la velocidad cruda de la mano, y apunta a donde va a estar la O cuando la pieza llegue.
[La partida]
Un minuto
para presumir_
Rondas cortas para que siempre den ganas de una más.
[Resultado]
- 60 segundosUna barra de tiempo que se pone roja y hace tic en los últimos diez.
- Agujero negroEn los últimos diez segundos la O se vuelve un agujero negro que atrae todo lo que lanzas. Es el momento de lanzar sin parar.
- RachasTres aciertos seguidos multiplican ×2; seis, ×3. Un fallo la corta.
- Al centroCruzar la O por el centro vale el doble. Pegar en el borde avisa «¡Casi!».
- DificultadLa O se mueve más conforme sumas puntos.
- ResultadosPuntaje, precisión, mejor racha, tiros al centro y récord guardado en tu navegador.
[En el celular]
También con
la cámara frontal_
En vertical la escena se aleja para que la O quepa y las piezas aparecen abajo, lejos de tu cara. Sin cámara se juega con el dedo.
[Bajo el capó]
Lo que hicimos_
Visión por computadora, 3D en tiempo real y sonido, todo dentro de una página web.
Manos en el navegador
MediaPipe Hand Landmarker corre en la tarjeta de video del equipo, con respaldo en procesador si no hay GPU. Detecta hasta dos manos a la vez.
Privado por diseño
El video se procesa en tu dispositivo y nunca se graba ni se envía a ningún servidor.
La marca en 3D
Las piezas son los submarks de Totot (píldoras, moléculas y la O con punto) y la meta es la O-ojo del logo, que te mira con sus pupilas.
Un tiro que se siente justo
La puntería sale de la intención del gesto y compensa el movimiento de la O, para que un buen lanzamiento siempre entre.
Sonido hecho en código
Agarrar, lanzar, anotar y la cuenta regresiva suenan en una escala pentatónica generada con Web Audio, sin archivos de sonido.
Listo para un evento
La misma mecánica sirve para un activador de marca, un stand o una pantalla en tienda: se cambian las piezas, la meta y los colores.
[En línea]
Saca la mano
y pellizca_
Funciona en computadora y celular con cámara. Si prefieres no encenderla, juega con el mouse o el dedo.
Jugar Pellizca ↗[¿Quieres una experiencia que se juegue con el cuerpo?]
Hablemos_