El Futuro de los Entornos Virtuales Controlados por IA
¿Te imaginas controlar un bólido futurista solo con la inclinación de tu cabeza o un gesto de tu rostro? Bienvenidos, una experiencia de desarrollo ágil donde la programación de entornos virtuales se encuentra con la Inteligencia Artificial de vanguardia.
En este post, encontrarás todo lo necesario para armar un PMV en los próximos 60 minutos, donde transformarás código estándar en una experiencia sensorial única.
Objetivo de Aprendizaje
Al finalizar este reto, el estudiante será capaz de integrar modelos de inteligencia artificial (TensorFlow.js/MediaPipe) con motores gráficos web (Three.js) para crear una interfaz de usuario natural (NUI) funcional, demostrando habilidades de resolución de problemas bajo presión y despliegue en la nube.
Guía de la Actividad: Paso a Paso
No necesitas Unity ni software pesado. Con solo HTML, CSS y JavaScript, construiremos el motor de juego.
Temáticas para Equipos: Elige tu Vibe
Cada equipo deberá seleccionar una de las siguientes estéticas para su Prototipo Mínimo Viable (PMV):
Concepto: Estás huyendo de una erupción volcánica o un depredador.
IA de Control:
- Velocidad: Se mide por la distancia a la cámara. Si te echas hacia adelante (agresivo), el auto quema llanta.
- Giro: Inclinar la cabeza hacia los hombros (no solo girar la nariz).
Estética: Tonos naranjas, rojos y suelo de “lava” (grid rojo).
Concepto: Un entorno digital que se rompe.
IA de Control:
- Frenado: Si el usuario abre mucho la boca (un “grito”), el escenario se detiene.
- Efectos: Si el usuario mueve la cabeza muy rápido (agitación), el fondo cambia de colores aleatoriamente y aparecen obstáculos de la nada.
Estética: Colores neón estridentes (rojo, verde ácido) y efectos de parpadeo.
Concepto: El auto debe flotar suavemente en un espacio lleno de estrellas.
IA de Control: * Giro: Movimiento lento de cabeza.
- Aceleración: Solo ocurre si el usuario mantiene los ojos cerrados (usando los landmarks de los párpados) o mantiene una expresión neutral/relajada.
Estética: Colores azules, pasteles y música Lo-Fi.
- Interacción IA: Al menos dos gestos faciales deben afectar el entorno
- Renderizado 3D: Uso de Three.js con un loop de animación fluido.
- Despliegue: El proyecto debe estar en vivo (se recomienda github page).
- Pulsa aquí para acceder a un código de muestra
- Pulsa acá para ver la ejecución
- Despliegue en GitHub Pages
- Sube tu archivo index.html a un repositorio público en GitHub.
- Ve a Settings > Pages.
- En la sección “Build and deployment”, selecciona la rama main y guarda.
- Tu juego estará disponible en https://tu-usuario.github.io/tu-repo/.
Para más detalles:
Guía de Mapeo de Gestos
| Gesto (Landmark) | Valor de la IA | Acción Sugerida |
| Giro de Cabeza | landmarks[4].x | car.position.x (Movimiento lateral) |
| Cercanía (Z) | Distancia entre 454 y 234 | velocidad (Adelante / Atrás) |
| Boca Abierta | Distancia entre 13 y 14 | turbo o escudo |
| Cejas Levantadas | Distancia entre 10 y 151 | salto del auto |
| Ojo Cerrado | score de parpadeo | cámara lenta o pausa |
animate()¿Estás listo para que tu rostro sea el próximo joystick? ¡Nos vemos en la pista de código!