😊 Face Sensing – Detección facial sencilla en Scratch #
La extensión Face Sensing incorpora a Scratch una detección facial fácil de usar.
Permite que tus sprites reaccionen a la posición, inclinación y tamaño del rostro, todo en tiempo real, directamente en tu navegador y sin necesidad de configuración.
Perfecta para principiantes y proyectos interactivos rápidos. 🎭
🌟 Descripción general #
- Detecta 1 rostro: Detección sencilla de un solo rostro para proyectos más simples.
- 8 Key Points Sigue rasgos faciales esenciales (ojos, nariz, boca, orejas y más).
- Control Sprites: Haz que los sprites se muevan hacia partes del rostro, se inclinen con tu cabeza o cambien de tamaño según el tamaño del rostro.
- Face Events: Activa acciones cuando se detecta un rostro, cuando se inclina o cuando los sprites tocan rasgos faciales.
- Sencillo y rápido: Detección ligera optimizada para el aula y la creación rápida de prototipos.
- Basado en el navegador: Funciona completamente en tu navegador, sin necesidad de servicios externos.
✨ Características principales #
- Seguimiento de un solo rostro con 8 puntos clave esenciales.
- Bloques fáciles de usar para interacciones faciales comunes.
- Detección de inclinación en tiempo real (izquierda/derecha).
- Medición del tamaño del rostro para crear animaciones adaptativas.
- Funciona completamente en el navegador – seguro y privado.
- Ideal para principiantes que están aprendiendo conceptos de IA.
🚀 Cómo usar #
- Ve a: pishi.ai/play
- Abre la sección Extensiones.
- Selecciona la extensión Face Sensing.
- Permite el acceso a la cámara cuando el navegador lo solicite y verifica que aparezca la vista previa del video.
- Una vez que la extensión se carga correctamente, la detección facial automática comienza a aproximadamente 15 fotogramas por segundo.
- Ahora puedes usar los bloques de comando para hacer que los sprites sigan tu rostro, imiten tus movimientos o reaccionen cuando inclines la cabeza.
Consejos
- Una buena iluminación ayuda al modelo a detectar mejor tu rostro.
- Mira directamente a la cámara para obtener la mayor precisión.
- La extensión funciona muy bien en la mayoría de los dispositivos, incluidos ordenadores antiguos y Chromebooks.
- Prueba a combinar la detección facial con otras funciones de Scratch para crear proyectos creativos.
🧱 Bloques y funciones #
📍 Command Blocks #
Mueve el sprite a un rasgo facial específico.
PART: elige en el menú desplegable (nariz, boca, ojo izquierdo, ojo derecho, entre los ojos, oreja izquierda, oreja derecha o parte superior de la cabeza).
El sprite seguirá esa parte mientras tu rostro se mueve por la pantalla.
Ajusta la dirección del sprite para que coincida con el ángulo de inclinación de tu rostro.
Perfecto para crear efectos de espejo o controles dirigidos con la cabeza.
Ajusta el tamaño del sprite para que coincida con el tamaño del rostro detectado.
Acércate a la cámara para agrandar los sprites y aléjate para hacerlos más pequeños.
👋 Bloques de eventos (bloques de sombrero) #
Se activa cuando inclinas el rostro hacia la izquierda o la derecha.
DIRECTION: elige «izquierda» o «derecha».
La inclinación debe superar los 10 grados desde el centro para activarse.
Se activa cuando el sprite toca un rasgo facial específico.
PART: elige cualquiera de los 8 puntos clave faciales.
Ideal para crear juegos interactivos de «atrapar el rasgo».
Se activa cuando aparece un rostro en la vista de la cámara.
Perfecto para iniciar animaciones o mostrar mensajes de bienvenida.
📊 Reporter Blocks #
Boolean reporter that returns true cuando se detecte un rostro, false otherwise.
Úsalo en sentencias condicionales para controlar el flujo del programa.
Informa del ángulo de inclinación del rostro en grados (0–180).
90 = mirando de frente, menos de 90 = inclinado a la izquierda, más de 90 = inclinado a la derecha.
Informa de la altura del rostro detectado en píxeles.
Los valores mayores indican que el rostro está más cerca de la cámara o que ocupa un área mayor.
😊 Partes del rostro disponibles #
La extensión Face Sensing puede detectar 8 rasgos faciales clave:
- nose – punta de la nariz
- mouth – centro de la boca
- left eye – centro del ojo izquierdo
- right eye – centro del ojo derecho
- between eyes – midpoint between both eyes
- left ear – posición de la oreja izquierda
- right ear – posición de la oreja derecha
- parte superior de la cabeza – parte superior estimada de la cabeza (calculada a partir de la posición de los ojos y la boca)
Nota: «izquierda» y «derecha» se refieren a tu izquierda y derecha al mirar la pantalla (vista reflejada).
🎓 Usos educativos #
- Introduction to AI: Muestra a los estudiantes cómo los ordenadores pueden reconocer y seguir rostros en tiempo real.
- Coordinate Systems: Enseña el posicionamiento X/Y vinculando partes del rostro con ubicaciones de sprites.
- Event-Driven Programming: Practica el uso de bloques de sombrero que responden a eventos de detección facial.
- Accessibility Projects: Crea controles manos libres para estudiantes que se benefician de métodos de entrada alternativos.
- Creative Expression: Crea arte interactivo que responda a la presencia y al movimiento del usuario.
🎮 Proyectos de ejemplo #
- Face Follower: Haz que un sprite siga tu nariz por la pantalla; ¡es un excelente primer proyecto!
- Tilt Racer: Inclina la cabeza a la izquierda o a la derecha para conducir un coche entre obstáculos.
- Size Mirror: Crea un sprite que crezca y se reduzca cuando te acerques o te alejes de la cámara.
- Face-Activated Game: Start gameplay only cuando se detecte un rostro – perfect for multiplayer games.
- Catch the Feature: Controla un sprite e intenta tocar diferentes partes del rostro para conseguir puntos.
- Copycat Animation: Haz que un personaje se incline y se mueva junto con tu rostro para crear efectos de espejo.
- Magic Mirror: Combina partes del rostro y cambios de disfraz para crear efectos de realidad aumentada.
🧩 Pruébalo tú mismo: pishi.ai/play
🔧 Consejos y solución de problemas #
🎯 Face Sensing Specific Tips #
- ¿No se detecta ningún rostro? Asegúrate de que tu rostro esté bien iluminado y completamente visible para la cámara. Evita sentarte con ventanas muy luminosas detrás de ti.
- ¿El seguimiento es inestable? Intenta mantener la cabeza relativamente quieta. La extensión incluye suavizado integrado, pero los movimientos bruscos pueden causar una breve inestabilidad.
- ¿Las partes del rostro no aparecen donde esperabas? Recuerda que la vista de la cámara está reflejada: tu izquierda aparece en el lado derecho de la pantalla.
- ¿La inclinación no se activa? Debes inclinar la cabeza al menos 10 grados hacia la izquierda o la derecha desde el centro para que se active el bloque de sombrero.
- ¿El tamaño del rostro parece incorrecto? El tamaño del rostro se mide en píxeles de la pantalla. El valor será mayor cuanto más cerca estés de la cámara.
- ¿La extensión tarda en cargar? La primera carga descarga el modelo de IA. Los usos posteriores serán más rápidos gracias a la caché del navegador.
- ¿El sprite no sigue el movimiento con suavidad? Usa bloques de «deslizar» en lugar de comandos instantáneos de «ir a» para conseguir un movimiento más fluido.
- ¿Hay varias personas frente a la cámara? La extensión solo sigue un rostro, normalmente el más grande o el que está más centrado en la imagen.
🔒 Privacidad y seguridad #
- Toda la detección facial se ejecuta localmente en tu navegador.
- No se suben ni almacenan imágenes ni vídeos.
- La extensión solo detecta movimientos faciales sencillos y no identifica a las personas.
- Pregunta a un profesor o a uno de tus padres antes de usar la cámara.
- Puedes apagar la cámara en cualquier momento usando otras extensiones basadas en cámara (como Video Sensing o FaceMesh).
🧪 Información técnica #
- Modelo: MediaPipe Face Detector
- Framework: TensorFlow.js with @tensorflow-models/face-detection – runs fully in-browser
- Caras: máximo 1 rostro
- Keypoints: 8 puntos faciales (nariz, boca, ojos, orejas, entre los ojos y parte superior de la cabeza)
- Detection Rate: ~15 fotogramas por segundo (se ajusta según el rendimiento del sistema)
- Smoothing: suavizado integrado de 5 fotogramas para evitar falsos positivos
- Tilt Threshold: desviación de 10 grados desde el centro
- Coordenadas: píxeles centrados en el escenario (X hacia la derecha, Y hacia arriba)
- Video Format: resolución de análisis de 480×360
- Requiere: un navegador moderno compatible con WebGL y permisos de acceso a la cámara
🔗 Extensiones relacionadas #
- 😎 FaceMesh – detección avanzada de 478 puntos faciales para un seguimiento detallado de expresiones
- 🖐️ Posición de Mano – detecta y sigue posiciones y gestos de las manos
- 🕺 PoseNet – detección y seguimiento de la postura de todo el cuerpo
- 🏫 Máquina de enseñanza de Google – entrena y utiliza modelos de IA personalizados
- 🖼️ Image Trainer – build your own image recognition models
| Característica | MIT Scratch Face Sensing | Pishi.ai Malla Facial |
|---|---|---|
| Tipo de detección | Detección simple de rectángulo facial (solo caja delimitadora). | Detección avanzada de puntos faciales 3D con 478 puntos clave. |
| Caras soportadas | 1 cara | Hasta 4 caras simultáneamente |
| Puntos clave / de referencia | Ninguno (solo posición y tamaño generales). | 468 puntos de referencia estándar + 10 puntos clave del iris (ojos, labios, mentón, nariz, etc.) |
| Seguimiento de expresiones | Limitado: solo detección de “rostro presente” o “movimiento”. | Geometría facial completa - puede medir sonrisas, parpadeos, apertura de boca, inclinación, asentimiento o elevación de cejas. |
| Fuente de entrada | Solo cámara | Cámara o imagen del escenario (para analizar fotos o capturas de pantalla). En el modo escenario, la cámara y el escenario también pueden clasificarse juntos para un análisis combinado. |
| Controles de video | Encender video, encender e invertir, apagar y cambiar la transparencia de la vista previa del video. | Compatible con selección de cámara, además de encender video, encender e invertir, apagar solamente, y cambiar la transparencia de la vista previa del video. |
| Ajuste de rendimiento | Velocidad fija. | Modos de detección flexibles: intervalo ajustable (cada 50–2500 ms), detección continua o detección al hacer clic en el bloque. La clasificación también puede activarse o desactivarse en cualquier momento para controlar el rendimiento o realizar demostraciones didácticas. |
| Privacidad | Se ejecuta localmente en el navegador. | 100% local, sin subidas: mismo nivel de privacidad, pero funciona incluso sin conexión tras cargar el modelo. |
| Enfoque educativo | Introducción sencilla a la detección facial. | Exploración profunda de conceptos de IA y visión por computadora: geometría, matemáticas y diseño de interacción. |
↔ Desliza hacia la izquierda o hacia la derecha para ver la tabla completa en dispositivos móviles.
💡 Cuándo elegir Face Sensing #
Face Sensing es perfecto cuando quieres una detección facial sencilla y rápida, sin complicaciones.
- Comenzando con la IA: Los bloques sencillos lo hacen perfecto para principiantes e introducciones en el aula.
- Prototipos rápidos: Configuración rápida para probar ideas de interacción controladas por el rostro.
- Interacciones básicas: Seguir rostros, reaccionar a inclinaciones y efectos basados en el tamaño vienen integrados.
- Dispositivos más antiguos: La detección ligera funciona sin problemas incluso en Chromebooks y computadoras antiguas.
- Proyectos simples: Cuando no necesitas seguimiento detallado de puntos faciales, Face Sensing es más rápido y fácil.
En resumen:
Face Sensing es ideal para proyectos simples y amigables para principiantes, y para aprender los conceptos básicos de la detección facial.
FaceMesh es para creadores que necesitan seguimiento detallado de puntos faciales y análisis avanzado de expresiones.
📚 Más información #
- Ayuda con las extensiones de IA en pishi.ai
- Documentación de MediaPipe Face Detector
- Modelo de detección facial de TensorFlow.js
- Ideas para rascar
