Malla Facial - detecta rostros y expresiones en Scratch

😎 Malla Facial – Detectar rostros y expresiones en Scratch #

La extensión Malla Facial incorpora un seguimiento facial con seguimiento facial impulsado por IA en Scratch.
Permite que tu código en Scratch reaccione a tus expresiones, movimientos de la cabeza y gestos, todo en tiempo real, directamente en tu navegador y sin necesidad de realizar ninguna configuración
Lo suficientemente sencilla para estudiantes y lo bastante potente para aulas creativas. 😊

🌟 Descripción general #

• Detectar hasta 4 rostros: Detecta hasta cuatro rostros al mismo tiempo.
• 478 puntos de referencia: Sigue 468 puntos faciales (ojos, nariz, boca, mentón, etc.) además de 10 puntos específicos del iris.
• Leer coordenadas: Obtén las posiciones X/Y de cualquier punto facial en el escenario de Scratch.
• Medir: Calcula ángulos y distancias entre puntos faciales.
• Cambiar la vista previa de la cámara: Muestra, oculta o invierte la vista de la cámara según tus necesidades.
• Elegir la entrada: Analiza la imagen de la cámara en vivo o directamente desde el escenario de Scratch.

✨ Características principales #

• Seguimiento de múltiples rostros (1–4).
• Menú desplegable con las partes faciales más comunes.
• Intervalos de clasificación ajustables para un rendimiento más fluido.
• Controles para la vista previa de la cámara, transparencia y dispositivos.
• Funciona completamente en el navegador – seguro y privado.

🚀 Cómo usar #

1. Ve a: pishi.ai/play
2. Abre la sección Extensiones.
3. Selecciona la extensión Malla Facial.
4. Permite el acceso a la cámara cuando el navegador lo solicite y verifica que aparezca la vista previa del video.
5. Si no se detecta ninguna cámara, la entrada cambiará automáticamente a la imagen del escenario.
6. Cuando la extensión se cargue correctamente, la detección continua de rostros en modo sin retraso comenzará automáticamente.
7. Ahora puedes utilizar los bloques de posición y medición para hacer que los sprites reaccionen a tu rostro: moverse, sonreír, parpadear o inclinar la cabeza para controlar tu proyecto.

Consejos

• Una buena iluminación ayuda al modelo a detectar mejor tu rostro.
• Usa person no: 1–4 cuando haya varias personas en pantalla.
• Para aulas o dispositivos antiguos, comienza con un intervalo de clasificación entre 100 y 250 ms para obtener un funcionamiento más fluido.

🧱 Bloques y funciones #

📍 Posición y conteo #

Devuelve la posición X o Y de un punto de referencia facial en el escenario.
KEYPOINT_MENU_ITEM: Selecciona un punto desde el menú desplegable (ojos, nariz, labios, etc.).
KEYPOINT_NUMBER: Introduce el índice de un punto entre 0–477.
Haz clic en la imagen de abajo para ver la numeración completa de los puntos de referencia:

PERSON_NUMBER: Selecciona qué rostro seguir (1–4). "1" corresponde al primer rostro detectado.
Devuelve un valor vacío si no se detecta ningún rostro.

Devuelve el número de rostros detectados actualmente (0–4).

📏 Mediciones #

Ángulo (en grados) entre dos puntos de referencia en un mismo rostro – ideal para detectar la inclinación o el asentimiento de la cabeza.

Distancia en píxeles de la pantalla entre dos puntos de referencia (landmarks) — perfecta para detectar la apertura de la boca o el parpadeo de los ojos.

Devuelve la distancia, en píxeles del escenario, entre dos puntos de referencia. Es perfecta para detectar si la boca está abierta o si una persona ha parpadeado.
RETURN_TYPE: Mantiene las últimas coordenadas encontradas o devuelve un valor vacío.

Notas:
Puntos predeterminados: 454 (mejilla izquierda) y 234 (mejilla derecha).
Las coordenadas están centradas en el escenario (X ≈ −240…240, Y ≈ −180…180).
Cuando el video está reflejado, los valores de la coordenada X también se invierten para coincidir con lo que ves en pantalla.

⚙️ 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.

😊 Puntos clave comunes (números útiles) #

Usa estos puntos clave rápidos para regiones faciales comunes. También puedes introducir manualmente cualquier índice desde 0–477.

Los números coinciden con los índices de puntos de referencia (landmarks) utilizados por MediaPipe Malla Facial.

🎓 Usos educativos #

• Explora visualmente conceptos de inteligencia artificial y visión por computadora – comprende cómo las computadoras reconocen y siguen los rostros.
• Enseña sistemas de coordenadas relacionando el movimiento de la cabeza o los ojos con posiciones de sprites en el escenario.
• Aplica matemáticas y geometría para medir ángulos, distancias y simetría facial.
• Crea arte interactivo o proyectos de accesibilidad que respondan a expresiones o gestos.

🎮 Proyectos de ejemplo #

• Sprite parlante: Mide la distancia entre los labios para animar una boca o activar el habla
• Controlador por inclinación de cabeza: Inclina tu cabeza hacia la izquierda o derecha para controlar un sprite o un coche.
• Parpadear para saltar: Detecta el cierre de los párpados y haz que tu personaje salte: ¡un controlador divertido sin usar las manos!
• Juego de contador de caras: Comienza solo cuando se detecte una cara. ¡Puntos extra si aparecen dos caras al mismo tiempo!
• Sonríe para ganar: Crea un juego que recompense las sonrisas o expresiones felices.
• Coincidencia de emojis: Copia la expresión del emoji mostrado para conseguir puntos.

🧩 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.
  • Durante la carga de la extensión, si no se detectan cámaras, la entrada cambiará automáticamente a la imagen del escenario para que puedas seguir probando las funciones de Malla Facial.
• ¿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.

😎 Consejos específicos de Malla Facial #

• ¿No detecta ninguna cara? Asegúrate de que toda tu cara sea visible y tenga buena iluminación. Evita la luz de fondo proveniente de ventanas.
• ¿El seguimiento es inestable? Mantén la cabeza estable y mira directamente a la cámara para obtener la mejor precisión.
• ¿Hay varias caras? Usa person no: 1–4 para seleccionar qué cara seguir. La persona 1 normalmente corresponde al rostro más grande o más cercano.
• ¿Los puntos de referencia tiemblan? Aumenta el intervalo de clasificación (por ejemplo, 150–200 ms) para suavizar cambios rápidos.
• ¿Necesitas seguimiento preciso de ojos o iris? Usa los puntos clave 468–477 para centros y bordes del iris. Son ideales para dirección de mirada o detección de parpadeos.
• ¿La boca no se abre? Mide la distancia entre los puntos clave: 0 (labio superior) 17 (labio inferior) Valores mayores significan que la boca está abierta.
• ¿Detectar inclinación de cabeza? Calcula el ángulo entre: 454 (mejilla izquierda) 234 (mejilla derecha) Una desviación de 0° indica inclinación.
• ¿Detectar asentimiento (arriba/abajo)? Mide la distancia vertical entre: 10 (frente) 152 (barbilla) La distancia es mayor cuando miras hacia delante y disminuye cuando inclinas la cabeza arriba o abajo. Es útil para gestos de asentimiento o seguimiento de atención.
• ¿Detectar sonrisa? Mide la distancia entre las comisuras de la boca (puntos clave 61 y 291) – más ancho = sonrisa.
• ¿Modo escenario con fotos? Recuerda que los puntos de referencia no están reflejados en el modo escenario – izquierda/derecha son 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 pueden descargarse una vez para uso sin conexión.
• Siempre pide permiso a un profesor o padre antes de usar la cámara.
• Puedes apagar el vídeo en cualquier momento activar vídeo [apagado].

🧪 Información técnica #

• Modelo: MediaPipe Malla Facial
• Framework: TensorFlow.js (última versión) – funciona completamente en el navegador usando aceleración WebGL2.
• Caras: hasta 4
• Landmarks: 478 total (0–477)
• Coordenadas: píxeles centrados en el escenario (X derecha, Y arriba)
• Reflejo: “on” = vista reflejada “on-flipped” = vista real
• Entradas: cámara o lienzo del escenario
• Puntos predeterminados: 454 (mejilla izquierda), 234 (mejilla derecha)
• Requiere: WebGL2 para mejor rendimiento.

🔗 Extensiones relacionadas #

• 🖐️ Posición de Mano - detecta puntos de referencia de la mano.
• 🕺 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.

↔ Desliza hacia la izquierda o hacia la derecha para ver la tabla completa en dispositivos móviles.

💡 ¿Por qué elegir Malla Facial? #

Malla Facial ofrece una comprensión mucho más rica y precisa de los rostros. Va más allá de detectar que existe un rostro: te dice qué está haciendo ese rostro.

• Vincula expresiones y movimientos directamente al comportamiento de los sprites.
• Mide ángulos, distancias y posiciones para lecciones de STEM e IA.
• Crea juegos basados en gestos o personajes que reaccionen a emociones — todo dentro de Scratch.
• Aprende conceptos reales de visión por computadora que se aplican a marcos de IA profesionales como MediaPipe.

En resumen:
La detección facial de MIT es excelente para introducciones simples y divertidas.
Pishi.ai Malla Facial es para creadores que quieren un seguimiento de expresiones realmente impulsado por IA – sigue siendo fácil, pero considerablemente más potente.

📚 Más información #

• Ayuda con las extensiones de IA en pishi.ai
• Referencia de MediaPipe Malla Facial
• Ideas para rascar