Sistema Retro TV: Visión Artificial

1. Conceptualización y Flujo del Sistema

El proyecto nació como una instalación interactiva que explora la relación entre la nostalgia tecnológica y la visión artificial moderna. A través de un modelo 3D de un televisor antiguo (CRT), el usuario se ve reflejado no como una imagen nítida, sino como un flujo de datos y movimiento procesado en tiempo real, transformando su presencia física en una señal estética y efímera.

Búsqueda de Referentes

• Nam June Paik (Videoarte): Pionero en el uso de televisores antiguos como esculturas interactivas, transformando el monitor de un receptor pasivo a un objeto artístico.
• Daniel Rozin (Espejos Interactivos): Sus obras como "Mechanical Mirrors" inspiran la capacidad de un objeto físico para orientarse y "reflejar" el movimiento del espectador en tiempo real.
• Estética Glitch y Analógica: Referencias visuales de la señal de TV degradada y el procesamiento de video temprano.

Diseño de Interacción

• Uso del cuerpo: Movimientos de torso y brazos para dirigir la orientación del TV principal en su eje.
• Ubicación de la cámara: Posición frontal fija (plano medio/corto), capturando al usuario sentado o de pie.
• Zona de interacción: El área central de la cámara web se mapea dinámicamente a los ejes de rotación (X/Y) del entorno tridimensional.
• Lógica de procesamiento subyacente: Algoritmo de Frame Difference con umbral ajustable para calcular el centroide del movimiento.

Imagenes de Referencia

A lo largo de la conceptualización, la premisa principal fue emular texturas de terminal verde fosforescente, desgaste visual propio de los televisores de tubo y consolas clásicas.

2. Arquitectura de Software e Implementación

Para garantizar una ejecución limpia, escalable y mantenible, el código final fue refactorizado y dividido en la siguiente estructura Modular ES6:

sketch.js — El Orquestador General

Es el "cerebro" central de la aplicación. Maneja el bucle draw() de p5.js, importa sub-módulos y administra la captura de la webcam y lógica de visión.

• processCV(): Sustracción de fondo píxel a píxel para identificar las coordenadas (Centroide X/Y) del usuario. Toma el diferencial absoluto métrico RGB entre el backgroundImg (el fondo limpio guardado con la tecla C) y el video en vivo actual; si esta diferencia de color supera un umbral estricto, el algoritmo considera ese píxel "activo" o "en movimiento". Luego, acumula todas las posiciones X/Y activas y las promedia matemáticamente para encontrar el centro físico perfecto de la masa que se está moviendo.
• processGestures(): Algoritmo de detección de velocidad lateral en franjas horizontales. Permite al usuario "deslizar" su mano de Derecha a Izquierda, o viceversa, para cambiar de canal mágicamente sin tocar botones. El algoritmo compara visualmente el fotograma inmediatamente anterior (gesturePrevFrame) con la toma actual, rastreando los píxeles calientes exclusivamente en la banda superior superior de la visión de la cámara. Al calcular velozmente cómo las masas de estos píxeles se trasladan en el eje X, si el salto o derivación (deltaX) supera una velocidad umbral preconfigurada, acciona inmediatamente el canal analógico siguiente con un retardo (Cooldown) de gracia.

channels.js — Renderizado de TV (2D)

Contiene la estética pura y retro. Genera Texturas Dinámicas (lienzo de 256x256) que simulan los canales de la televisión:

• Canal 1: Cámara cruda en alto contraste con superposición roja de "Grabar" (Estética VHS).
• Canal 2: Efecto Glitch y Desincronización con barras de ruido aleatorias (Drift analógico).
• Canal 3: Algoritmo de Motion Blur/Ghosting oscuro calculado por mezcla de cuadros entre prevFrame y el actual.
• Canal 4: Dithering de hardware antiguo usando Bayer Matrix (Paleta de 4 colores verdes clásicos) y cartuchos de Gameboy flotando alrededor.
• Canal 5: Recreación interactiva de Pong completamente jugable usando la gama monocromo del Nintendo Gameboy original y cuadrícula LCD visible.

three_scene.js — El Entorno de Renderizado 3D

Se comunica con el Canvas 2D de p5.js y lo mapea como un material fotoluminiscente (mapa Emisivo) en el modelo GLTF del televisor antiguo.

• Carga modelos `.glb` adicionales en tiempo diferido: Walkman, Audífonos, Coca-Cola y Lápiz, flotando dinámicamente usando fórmulas trigonométricas (Senos y Cosenos atados al tiempo global).
• Interpreta el Centroide Humano desde sketch.js para mover suavemente la cámara flotante (Virtual Camera Model) hacia la posición relativa del espectador en la vida real.

3. Controles e Interactividad

El televisor cuenta con una interfaz de depuración completa y métodos múltiples de interacción pensados para emular un escenario analógico.

Tecla / Interacción	Acción que desencadena
1 - 5	Cambiar manualmente a los canales 1, 2, 3, 4 o 5. Aparecerá el indicador "CH 0X" tipo OSD en pantalla verde superior.
Gesto (Mano)	Desliza la mano en la parte superior frente a la cámara web (izq a der / der a izq) para subir o bajar de canal automáticamente usando Computer Vision.
W - S	Mover Paleta Izquierda (Jugador 1) en el Canal 5 (Pong clásico).
↑ - ↓	Mover Paleta Derecha (Jugador 2) en el Canal 5 (Pong clásico).
N	Reiniciar el juego de Pong (Coloca marcadores a 0 y saca del lateral la pelota).
C	Capturar Fondo (Background). Es obligatorio presionar C al inicio estando fuera de cámara para que el rastreo tridimensional de Three.js empiece de forma precisa frente al usuario en limpio.
R	Resetear / Borrar el Fondo memorizado (En caso de perturbación de luz).
V	Abrir/Cerrar Panel Lateral de DEBUG (Permite ajustar Thresholds visuales).