Retrato interactivo halftone
Experimento de renderizado en canvas: un retrato compuesto por miles de puntos que cambia de expresión y gesto según la posición del mouse en toda la pantalla.
Mejor experiencia en computadora: esta interacción responde al mouse
No se pudieron cargar los datos del retrato interactivo. Probá recargar la página.
Del video a un retrato que reacciona a vos
Grabación y selección de frames
Grabé un video corto con distintas expresiones y direcciones de mirada, y de ahí extraje 17 fotogramas: una mirada frontal neutra, ocho direcciones de mirada (arriba, abajo, izquierda, derecha y sus diagonales), tres muecas puntuales sobre la boca y el ojo, y una secuencia de cuatro frames para un gesto de click.
De foto a datos de puntos
Cada imagen la pasé por half-toned.vercel.app, una herramienta que convierte una foto en un campo de puntos de semitono (halftone): miles de círculos cuyo tamaño y posición representan el brillo de cada zona. Ajusté ahí el tamaño de grilla, el radio de los puntos y el modo de color por punto, y exporté cada frame como JSON.
De JSON a interacción
Con los 17 JSON armé un componente en Canvas 2D (sin librerías de WebGL) que dibuja los puntos del frame activo. La posición del mouse en toda la pantalla define hacia dónde "mira" el retrato, calculando el ángulo respecto al centro del canvas. Hay zonas ocultas sobre la boca y el ojo derecho que disparan gestos al pasar el mouse, y un click en cualquier parte del retrato dispara una secuencia animada de cuatro frames.
Optimizar el peso sin perder calidad
El JSON original pesaba ~4.5MB para los 17 frames. Lo pasé a un formato binario compacto (coordenadas en 2 bytes, color en RGB565) y después detecté que el 99% de las posiciones de los puntos se repite entre frames: solo cambia el radio y el color, no la grilla. Separando esa grilla compartida del resto, el peso final bajó a ~0.71MB sin tocar el resultado visual.