HAND GESTURE CONTROLLER

Cargando MediaPipe...

Control gestual en tiempo real

Esta demo usa tu webcam para detectar gestos mediante MediaPipe. Podés Mover, Minimizar, Cerrar y Cambiar el tamaño de las ventanas sin teclado ni mouse.

↙
Panel de gestos

Los gestos disponibles están listados abajo a la izquierda. Podés interactuar con las ventanas de distintas formas.

↘
Vista de cámara

Tu cámara aparece abajo a la derecha. Las manos se marcan en vivo: izquierda en verde, derecha en azul, con los 21 puntos articulares conectados.

🎵 Music Player
Song Name
Artist · Album Name
1:474:03
⏮ ⏪ ⏸ ⏩ ⏭
🔉
🔊
📁 File Explorer — Desktop
  • 📂Documents—
  • 📂Downloads—
  • 📂Hand Gestures—
  • 🐍gesture_window_controller.py52 KB
  • 🌐index.html18 KB
  • 📄README.md9 KB
📝 gesture_detector.js
1// Classifies hand gestures from 21 MediaPipe landmarks
2const GestureDetector = (() => {
3 const TIPS = [8, 12, 16, 20];
4 const MCPS = [5, 9, 13, 17];
5 function dist(a, b) {
6 return Math.sqrt((a.x-b.x)**2 + (a.y-b.y)**2);
7 }
8 return { classify(lm) {
9 const ext = TIPS.map((t,i) =>
10 dist(lm[t],lm[0]) > dist(lm[MCPS[i]],lm[0])*1.1
11 );
12 return { isFist: !ext[0] && ext.filter(Boolean).length <= 1,
13 isOpen: ext.filter(Boolean).length >= 4,
14 isTwo: ext[0] && ext[1] && !ext[2] && !ext[3] };
15 }}
16})();
⚙ System Monitor
CPU52%
RAM68%
Disk41%
Network17%
IDLE — 0 fps

Gestos

✊ Agarrar Cerrá la mano sobre la ventana. Mové la mano para arrastrarla.
✌️ Minimizar Dos dedos sobre la ventana para minimizar.
Estando en grab
🖐️✊ Escalar Al seleccionar una ventana con la mano cerrada, abrí la otra mano y mantenela. Separás o acercás las manos para redimensionar.
✊✊ Cerrar Para cerrar la ventana seleccionada (una mano cerrada), cerrá también la otra mano.
🖐️ Soltar Abrí la mano para dejar de mover la ventana.