Hace un tiempo nos preguntamos algo simple: ¿se puede tocar un sintetizador sin tocar nada? Sin MIDI, sin knobs físicos, sin plugins raros. Solo una cámara, un navegador, y las manos en el aire.
Así arrancó GESTOSYNTH.
La idea
Un synth gestual que corre entero en el cliente. Nada de instalar apps, nada de drivers. Abrís el navegador, le das permiso a la cámara, y listo: mover las manos genera sonido.
El desafío no era tanto "que suene", sino que la latencia entre gesto y respuesta se sintiera instantánea. Si hay delay, deja de ser un instrumento y pasa a ser una demo.
El motor de tracking: MediaPipe
Usamos MediaPipe Hands para detectar la posición de los dedos en tiempo real, y sumamos Face Mesh para agregar una segunda capa de control gestual usando la cara. La combinación de las dos fuentes de tracking nos dio suficientes "perillas invisibles" como para mapear parámetros reales del synth: distancia entre dedos para el filtro, altura de la mano para el pitch, apertura de la palma para la modulación.
Lo interesante de MediaPipe corriendo del lado del cliente es que no hay ida y vuelta a un servidor. Todo el procesamiento de video y la inferencia del modelo pasa en la máquina del usuario, así que la latencia queda atada solo al hardware de quien lo usa, no a una API externa.
El sonido: Tone.js
Para la parte de audio fuimos con Tone.js, que nos dio el motor de síntesis y el scheduling preciso que necesitábamos para que los gestos se tradujeran en algo musicalmente coherente y no en ruido random. Ahí mapeamos cada gesto detectado por MediaPipe a un parámetro del synth: osciladores, filtros, envolventes.
La parte más laboriosa fue afinar la sensibilidad. Un gesto muy reactivo se siente nervioso y poco musical; uno muy suavizado se siente con delay. Terminamos metiendo un suavizado sobre los valores crudos del tracking antes de mandarlos a Tone.js, para que el sonido respondiera de forma más orgánica.
El rediseño visual: del lab al hardware soviético
Una vez que el motor andaba, encaramos un rediseño visual completo. La referencia: sintetizadores analógicos soviéticos y alemanes de los 70 y 80. Ese lenguaje de hardware real, gastado, funcional.
Algunos de los elementos que sumamos: knobs rotativos con feedback visual real al girarlos, switches tipo rocker con luz ámbar como los interruptores de equipos de laboratorio viejos, pantallas VFD simulando los displays de fósforo vintage, un piano chiclet estilo combo-organ, y un fondo ambiental de motas de polvo cálidas para que la interfaz se sienta como un cuarto con luz de tarde, no como una app fría.
Para la tipografía elegimos Big Shoulders Stencil para los títulos con onda industrial, Oswald para texto general, y JetBrains Mono para todo lo que simula lecturas técnicas — coherente con esa estética de instrumento de laboratorio.
Meter tracking gestual y síntesis de audio en el mismo hilo del navegador obliga a pensar en performance todo el tiempo.
Cada frame de video procesado compite por recursos con el audio en tiempo real, así que hubo que perfilar bastante y ser cuidadosos con cuánto trabajo le pedíamos al hilo principal. Pero el resultado vale la pena: un instrumento que no necesita nada más que una cámara y un navegador, y que se siente — al menos por un rato — como estar frente a una consola real.