Posición de Mano - detecta manos y gestos en Scratch

🖐️ HandPose – Detectar manos y gestos en Scratch #

La extensión HandPose incorpora seguimiento de manos en tiempo real a Scratch.
Permite que tus proyectos reaccionen a los dedos, al movimiento de la muñeca y a gestos simples, directamente en tu navegador y sin necesidad de configuración.
Perfecta para aulas, talleres y proyectos creativos de programación. 🙌 🙌

🌟 Descripción general #

• Detecta hasta 4 manos: Realiza el seguimiento de una o varias manos al mismo tiempo.
• 21 puntos de referencia: Muñeca, articulaciones del pulgar y articulaciones y puntas de cada dedo.
• Leer coordenadas: Obtén las posiciones X/Y de cualquier punto de referencia de la mano en el escenario de Scratch.
• Medir: Calcula ángulos y distancias entre los puntos de referencia de la mano.
• Controles de cámara: Muestra, oculta, refleja y elige tu dispositivo de cámara.
• Elegir la entrada: Analiza desde la cámara en vivo o desde la imagen del escenario.

✨ Características principales #

• Seguimiento de múltiples manos (1–4 manos).
• Menú desplegable amigable de articulaciones y puntas de dedos.
• Intervalos de "clasificación" ajustables para un rendimiento fluido y control de la CPU.
• Opciones de transparencia y efecto espejo en la vista previa de la cámara.
• Totalmente basado en el navegador — sin instalación, privado y seguro.

🚀 Cómo usar #

1. Ve a: pishi.ai/play.
2. Abre la sección Extensiones.
3. Selecciona HandPose de la lista.
4. Permite el acceso a la cámara cuando se te solicite y verifica que aparezca la vista previa.
5. Si no se detecta ninguna cámara, la entrada cambiará automáticamente a la imagen del escenario.
6. La detección continua comienza de forma predeterminada con un intervalo fluido de 100 ms.
7. Usa los bloques de posición y medición para hacer que los sprites reaccionen a los gestos de los dedos.

Consejos:

• Usa una iluminación buena y uniforme para obtener la mejor precisión de seguimiento.
• Cuando aparezcan varias manos, usa "mano número: 1–4" en el menú desplegable del bloque.
• En computadoras más lentas, aumenta el intervalo (por ejemplo, 150–250 ms) para reducir la carga de la CPU.

🧱 Bloques y funciones #

📍 Posición y conteo #

Reporta la posición X o Y de un punto de referencia específico de la mano en el escenario.
KEYPOINT: elige de la lista desplegable (muñeca, articulaciones, puntas de dedos).
HAND_NUMBER: selecciona qué mano rastrear (1–4). "1" = primera mano detectada.
Devuelve vacío si no se detecta ninguna mano.

Reporta cuántas manos se detectan actualmente (0–4).

📏 Mediciones #

Reporta el ángulo (en grados) entre dos puntos de referencia — ideal para detectar la flexión de los dedos o la rotación de la muñeca.

Mide la distancia en píxeles del escenario entre dos puntos de referencia — útil para gestos de pellizco, expansión o separación.

Elige qué deben devolver los bloques de coordenadas cuando no se encuentra una mano o punto de referencia.
RETURN_TYPE: Mantiene las últimas coordenadas encontradas o devuelve un valor vacío.

Notas:
Puntos predeterminados: 0 (muñeca) y 12 (punta del dedo medio).
Las coordenadas siguen el centro del escenario de Scratch (X ≈ −240…240, Y ≈ −180…180).
Cuando el efecto espejo está activado, los valores de X se invierten para coincidir con la vista previa.

⚙️ Controles de Clasificación #

• clasificar [INTERVAL] - Elige con qué frecuencia se ejecuta la detección:
  • cada vez que se ejecuta este bloque
  • continuo, sin retraso
  • continuo, cada 50–2500 ms
• activar clasificación [on_off] - Inicia o detiene la detección continua.
• intervalo de clasificación - Devuelve el intervalo actual en milisegundos.
• clasificación continua - Indica si la detección continua está “on” u “off”.
• seleccionar imagen de entrada [camera/stage] - Elige cámara o escenario (stage).
• imagen de entrada - Devuelve la fuente de entrada activa.

🎥 Controles de Video #

• activar vídeo [off/on/on-flipped]
  • encendido: muestra la vista previa de la cámara en modo espejo (como una webcam típica).
  • encendido-invertido: muestra la vista previa sin espejo — las direcciones aparecen como en el mundo real.
  • apagado: apaga la vista previa de la cámara. En modo stage, la detección continúa funcionando.
• fijar transparencia de vídeo a [TRANSPARENCY|text] — Ajusta qué tan visible es la vista previa
  • 0: completamente visible
  • 100: completamente transparente (invisible pero activa)
  Usa un valor de 0–100 para ajustar la opacidad y ayudar a que los sprites se vean claramente sobre la cámara.
• seleccionar cámara [CAMERA] — permite elegir entre las cámaras disponibles en tu dispositivo. El menú desplegable muestra todas las cámaras detectadas y la extensión cambia automáticamente a la que selecciones.

• mostrar cuadros de detección [encendido/apagado]
  Activa o desactiva la visualización de los cuadros de detección. Cuando está activada, aparecen cuadros alrededor de cada objeto detectado para que puedas ver qué objetos está siguiendo el modelo. Esto es útil para probar la cámara, comprobar qué tan bien funciona el modelo y depurar un proyecto en tiempo real.

🖐️ Puntos clave comunes (números útiles) #

Usa estos atajos para regiones comunes de la mano, o selecciona cualquier punto de referencia del menú desplegable.

0: muñeca
1: base del pulgar, 2: articulación 2 del pulgar,
3: articulación 1 del pulgar, 4: punta del pulgar
5–8: articulaciones/punta del dedo índice,
9–12: articulaciones/punta del dedo medio,
13–16: articulaciones/punta del dedo anular,
17–20: articulaciones/punta del dedo meñique

El menú cuenta del 0 al 20 (como los índices de MediaPipe).

🎓 Usos educativos #

• Explorar la visión por computadora visualizando las articulaciones y el movimiento de la mano.
• Enseñar sistemas de coordenadas mapeando el movimiento de los dedos a X/Y del sprite.
• Aplicar geometría y matemáticas para calcular ángulos y distancias.
• Crear interacciones basadas en gestos como pellizcar, señalar o pulgar arriba.

🎮 Proyectos de ejemplo #

• Pellizcar para hacer clic: Detecta la distancia entre el pulgar y el índice para simular un clic del mouse.
• Piano de dedos: Asigna las puntas de los dedos a teclas y reproduce notas al moverte.
• Thumbs-Up Detector: Trigger actions when the thumb points upward.
• Piedra, papel o tijera: Reconoce formas de la mano usando distancias entre puntos de referencia.
• Controlador de mano: Mueve sprites con la posición X/Y de la muñeca y acelera al separar los dedos.

🧩Pruébalo tú mismo: pishi.ai/play

🔧 Consejos y solución de problemas #

• ¿No hay cámara?
  • Asegúrate de que tu cámara esté conectada y que el navegador tenga permiso para usarla.
  • Si la cámara está bloqueada, actívala en la configuración de permisos del sitio del navegador y vuelve a cargar la página.
  • Al cargar la extensión, si no se detecta ninguna cámara, la imagen de entrada cambia automáticamente al escenario de Scratch, donde se muestran los fondos y los sprites, para que puedas seguir utilizando y probando las funciones de la extensión.
• ¿No hay detección?
  • clasificación continua: Usa este bloque informador para comprobar si la clasificación está activa.
  • Si está activa, mejora la iluminación y mira directamente a la cámara.
  • activar clasificación [encendido]: Usa este bloque si la clasificación no está activa. Después vuelve a comprobar el estado de clasificación con el reportero anterior.
  • En el modo de entrada de cámara, cuando la cámara se apaga, la clasificación también se detiene. Debes volver a activar el vídeo o cambiar la entrada al escenario.
  • En el modo de entrada de escenario, el sistema clasifica todo lo que sea visible en el escenario: fondos, sprites o imágenes. Puedes apagar completamente el vídeo y aun así procesar imágenes del escenario.
  El modo escenario es más lento que la entrada por cámara, así que reduce tu intervalo de clasificación (por ejemplo, 100–250 ms) para obtener resultados más fluidos usando este bloque: clasificar [INTERVAL]
  • En el modo escenario, los puntos de referencia de “izquierda” y “derecha” están intercambiados porque la imagen del escenario no está reflejada. El sistema de coordenadas representa una vista real (sin espejo).
  • La clasificación también puede reiniciarse automáticamente cuando usas bloques como:
  activar vídeo [encendido] / clasificar [INTERVAL] / seleccionar cámara [CAMERA] / seleccionar imagen de entrada [camera/stage].
• ¿Vista invertida?
  activar vídeo [encendido-invertido]: Usa esto para mostrar la cámara sin efecto espejo. “on” muestra la imagen reflejada como una selfie. “on-flipped” muestra la orientación real izquierda/derecha.
• ¿Va lento o tiene retraso?
  Usa intervalos de clasificación entre 100–250 ms o cierra otras pestañas del navegador para reducir la carga de procesamiento.
• ¿Advertencia de WebGL2?
  Prueba con Firefox o con un dispositivo más nuevo que sea compatible con aceleración gráfica WebGL2.
• ¿Analizar el escenario en lugar de la cámara?
  seleccionar imagen de entrada [stage]: Usa esto para analizar la imagen del escenario de Scratch en lugar de una cámara en vivo. El escenario de Scratch puede incluir la imagen de la cámara, así como cualquier sprite y fondo que estén visibles en ese momento en el escenario.
  Nota: Procesar el escenario de Scratch puede ser más lento que usar la cámara directamente.

🖐️ Consejos específicos de HandPose #

• ¿No se detecta la mano? Asegúrate de que toda tu mano — incluyendo la muñeca — sea visible en la cámara. Separa un poco los dedos; los puños cerrados o el desenfoque de movimiento dificultan la detección.
• ¿Dedos confundidos? Mantén los dedos claramente separados y evita superposiciones para un seguimiento preciso de cada punta de dedo.
• ¿Varias manos? Usa el parámetro "mano número: 1–4" del bloque para elegir qué mano rastrear. La mano 1 suele ser la más grande o la más cercana en la vista.
• ¿El seguimiento es inestable? Mantén la mano quieta y bien iluminada. Evita sombras fuertes o reflejos muy brillantes en la piel.
• ¿Detectar gesto de pellizco? Mide la distancia entre los puntos de referencia 4 (punta del pulgar) y 8 (punta del índice). Una distancia menor indica un pellizco.
• ¿Detectar que se señala? Comprueba si el punto de referencia 8 (punta del índice) tiene un valor Y menor que el punto de referencia 5 (base del índice) mientras los demás dedos están doblados hacia abajo.
• ¿Contar dedos levantados? Compare each fingertip’s Y position with its base – if the fingertip Y is higher, that finger is extended.
• ¿Detección de pulgar arriba? Verifica si el punto de referencia 4 (punta del pulgar) está más alto que el punto de referencia 2 (base del pulgar) mientras los demás dedos permanecen doblados.
• ¿Orientación de la mano? Calcula el ángulo entre el punto de referencia 0 (muñeca) y el punto de referencia 12 (punta del dedo medio) para estimar la rotación o inclinación de la mano.
• ¿Usando el modo escenario con fotos? En el modo escenario, los puntos de referencia no están reflejados — la izquierda y la derecha corresponden a las posiciones anatómicas reales.

🔒 Privacidad y seguridad #

• Todo se ejecuta localmente en tu navegador.
• Ninguna imagen o vídeo se sube a ningún servidor.
• Los archivos del modelo se cargan directamente desde Pishi.ai cuando se inicia la extensión, por lo que no se utilizan servidores de modelos de terceros.
• Siempre pide permiso a un profesor o padre antes de usar la cámara.
• Puedes usar este bloque de forma segura en cualquier momento activar vídeo [apagado].

🧪 Información técnica #

• Modelo: MediaPipe Hands (HandPose)
• Framework: TensorFlow.js (última versión) – funciona completamente en el navegador usando aceleración WebGL2.
• Detección Hasta 4 manos / 21 puntos clave (0–20)
• Sistema de coordenadas: ensorFlow.js (última versión) – se ejecuta completamente en el navegador con aceleración WebGL 2.
• Reflejo: “on” = vista reflejada “on-flipped” = vista real
• Modos de entrada: cámara o lienzo del escenario
• Puntos clave predeterminados: 0 (muñeca), 12 (punta del dedo medio)
• Intervalo de clasificación predeterminado: 100 ms

🔗 Extensiones relacionadas #

• 😎 Malla facial – detecta puntos de referencia del rostro
• 🕺 PoseNet - rastrea la postura corporal.
• 🖼️ Entrenador de Imágenes – Crea modelos de IA personalizados.
• 🏫 Máquina de enseñanza de Google – importa tus propios modelos TM.

📚 Más información #

• Ayuda con las extensiones de IA en pishi.ai
• MediaPipe Hands Reference
• Scratch Ideas Library