EP-RC
REPIQUE CODE
Lab · Cómo se hizo ▶ Probar

Instrumento · Cámara · Gestos

Repique Code
cómo lo armamos

Repique Code es un instrumento musical que se toca moviendo las manos frente a la cámara: no tocás ninguna tecla ni pantalla. Esta página explica, en simple, cómo lo hicimos: cómo reconoce tus manos, de dónde salen los sonidos y con qué está construido.

▶ Probar el instrumento

Se abre la cámara (con tu permiso). Todo pasa en tu dispositivo: la imagen nunca se sube a internet.

01 — La idea

Tu cuerpo es el instrumento

La cámara te mira las manos. Según cómo las movés —subirlas, bajarlas, juntarlas, abrirlas, barrer hacia un lado— se dispara música y aparecen efectos visuales en la pantalla. Es como un theremín moderno: tocás el aire.

Tiene tres modos: instrumento (un ritmo de fondo y notas según la forma de las manos), pintura (dibujás con los dedos) y baile (cada movimiento dispara un sonido que vos podés elegir).

02 — Reconocer las manos

El algoritmo que ve tus dedos

El algoritmo que reconoce la mano es MediaPipe Hand Landmarker, un modelo de inteligencia artificial de Google. Mirando la imagen de la cámara, encuentra 21 puntitos en cada mano (la muñeca, los nudillos y la punta de cada dedo), hasta en dos manos a la vez.

Lo hace unas 60 veces por segundo y corre en la placa de video (GPU) de tu propia compu o teléfono. Por eso es rápido y, sobre todo, la cámara nunca sale de tu dispositivo: no hay ningún servidor mirando.

Con esos puntitos, el programa calcula cosas como: qué forma hacen las manos, cuánto se abren, a qué velocidad se mueven y para qué lado. Eso es lo que se traduce en música.

03 — Los sonidos

De dónde sale la música

La biblioteca de sonidos que usamos es Tone.js (sobre la Web Audio API del navegador). Lo interesante: casi todo el sonido no son archivos grabados, sino que se genera en vivo mientras tocás (síntesis). Eso permite que cada nota se afine al ritmo y reaccione al instante.

En el modo baile, cada gesto dispara un sonido, y podés elegirlos entre tres familias de timbres:

Familia
Crazy

Efectos electrónicos de fiesta: drops, risers, stabs, láseres, barridos. La onda festival.

Familia
Mate

Órgano grave y espacial. Cada gesto es una nota (Do-Re-Mi-Fa-Sol-La-Si-Do): se puede tocar una melodía.

Familia
Butiá

Timbres agudos y cristalinos: campanas, vidrios, carillones, chispas.

Para el ritmo candombero hay también una grabación real de tambores (del dataset abierto de Jure & Rocamora, licencia CC-BY) y un secuenciador editable. Y un looper: graba lo que tocás durante dos compases y lo deja girando en bucle, en tiempo con el ritmo.

04 — El recorrido

Cómo se conecta todo

Sesenta veces por segundo, el programa repite este recorrido:

01
Cámara

Capta la imagen de tus manos.

02
MediaPipe

Encuentra los 21 puntos de cada mano.

03
Gestos

Interpreta forma, movimiento y velocidad.

04
Sonido + imagen

Tone.js genera la música y el canvas dibuja los efectos.

05 — La tecnología

Con qué está hecho

Visión
MediaPipe

El modelo de Google que detecta las manos, en la GPU del dispositivo.

Audio
Tone.js

Genera y secuencia el sonido en vivo, sobre la Web Audio API.

Gráficos
Canvas 2D

El video espejado y los efectos del modo baile (estela, fuego, galaxia…).

Programa
JavaScript

Hecho a mano, sin frameworks: liviano y con control total del tiempo real.

Build
Vite

Empaqueta todo en una página estática, sin servidor que procese nada.

Publicación
Astro + Vercel

El instrumento vive embebido en este sitio y se publica con un simple git push.

¿Lo probamos?

Necesitás una cámara y permitir el acceso. Movés las manos y empieza a sonar.

▶ Abrir Repique Code
REPIQUE CODE · ESTUDIOPROMPT LAB Hecho con manos, cámara y código