De la Emoción a la Velocidad

Vibe Racing JS

Objetivo General

Desarrollar un prototipo funcional de entorno virtual interactivo utilizando Three.js y TensorFlow.js, donde el movimiento de un objeto 3D sea controlado por reconocimiento visual de IA en tiempo real.

Introducción

¿Y si tu estado de ánimo fuera el motor de un auto? En el mundo del desarrollo moderno, las interfaces ya no son solo botones; son experiencias. Hoy van a romper la barrera entre el mundo físico y el virtual. No vamos a construir un juego completo, vamos a construir una interfaz sensorial en tiempo récord. ¡Preparen sus cámaras, que su rostro es el joystick!

• Duración estimada: 60 minutos (Hackathon) + 20 minutos de presentación.
• Materiales: Computadora con navegador (Chrome/Edge), webcam, editor de texto (VS Code o Notepad++).

Instrucciones Paso a Paso

1. El Chasis (5 min): Crea un archivo index.html. Copia una estructura básica de HTML5 e importa vía CDN las librerías: Three.js (para el 3D) y Mediapipe/TensorFlow.js (para la IA).

Nota: Usa CDNs para evitar instalaciones y saltar bloqueos de red de la uni.

2. Encender el Motor 3D (10 min): Configura una escena básica de Three.js con un plano (el suelo), un cubo (nuestro “auto”) y una luz.

Nota: El “Loop de Renderizado” debe estar corriendo para que veamos movimiento.

3. Conectar la Visión Artificial (15 min): Carga el modelo de detección de puntos faciales (Face Landmarker). Pide permiso para usar la webcam y dibuja el flujo de video en un pequeño cuadro lateral.

Nota: La IA necesita “ver” para poder extraer datos numéricos de tus gestos.

3. Mapeo del “Vibe” (15 min): Crea una lógica que diga: Si la inclinación de la cabeza es > X grados, entonces la posición del cubo en X aumenta.

Explicación: Aquí ocurre la magia; convertimos píxeles y confianza de la IA en coordenadas 3D.

4. Pulido de Estética (10 min): Cambia el color del fondo o la velocidad del cubo según la “intensidad” del gesto. ¡Dale el toque Vibe!

Nota: Los efectos visuales son los que comunican al usuario que la IA lo está entendiendo.

5. Pitch de 1 Minuto (5 min restantes): Prepara una demostración rápida de cómo tu gesto afecta el entorno.

Recomendaciones

1. Divide y vencerás: Primero haz que el cubo se mueva con el teclado, luego sustituye el teclado por la IA.
2. No busques perfección: En una hackathon, un cubo que se mueve es mejor que un auto deportivo que no carga.
3. Usa la documentación rápida: Ten abierta la ventana de ejemplos de Three.js para copiar y pegar geometrías.
4. Luz ambiental: Asegúrate de que tu cara esté bien iluminada para que la IA no se confunda.
5. Diviértete: El “Vibe” también es tu actitud al programar.

Problema Común y Solución

• Problema: “La cámara se queda en negro o marca error de permiso.”
• Solución: Verifica que no tengas abierta la cámara en otra aplicación (como Zoom o Teams) y asegúrate de que el sitio corra bajo localhost o https, ya que los navegadores bloquean la cámara en sitios http no seguros por privacidad.