.

Recuerdo haber visto Euphony, un reproductor y visualizador MIDI para la web, hace unos años y quedarme con las ganas de experimentar con la idea de la representación de MIDI con WebGL. Cierto es que al ver los problemas de sincronización en la reproducción de la Rapsodia húngara n.º 2, además de leer el texto que vi unos días más tarde sobre los problemas del sonido con HTML5, me hicieron archivar la idea.

Lo que no consideré fue experimentar en otros contextos, con software especializado en la creación de gráficos trimensionales, como puede ser Blender. Afortunadamente, hay gente con más imaginación y talento que yo que sí tuvo dicha ocurrencia, como es el caso de Andy Fillebrown. Aunque parece que lleva dos años sin publicar nada, su canal de vídeos en YouTube acumula unas cuantas visualizaciones de este estilo:

Visualización de la Rapsodia húngara n.º 2 de Listz, realizada por Andy Fillebrown [08m58s].

Las interpretaciones no son perfectas, a fin de cuentas no dejan de salir de un fichero MIDI, pero con las representaciones animadas resultan casi hipnóticas.

.

Alexander Chen es un trabajador de Google que hace unos años hizo el doodle dedicado a Les Paul pero no ha sido hasta hace poco que vi otro par de experimentos suyos.

El primero es una visualización interactiva de la primera de las suites para violonchelo solo de Bach.

Se puede ver en baroque.me y tiene una breve descripción en su página pero en Create Digital Music ofrece algo más de información sobre el origen y el concepto tras esta presentación:

When I listened to the opening of the Bach, where it repeats the same bar twice, it made me think of a call and response. So I immediately pictured two wheels that echo each other, instead of just one wheel with four dots.

Figuring out the symbolic string lengths in pixels was a fun research project. I wanted explore the simple math behind string length. I learned that you can derive an entire chromatic scale just by using two fractions: 2/3 and 1/2. These correspond to the fifth and octave intervals. It’s called Pythagorean tuning. I stumbled onto this great little worksheet [PDF link] which seems to be intended for students.

El segundo está en pianophase.com y está basado en una pieza menos conocida, la «Piano Phase» de Steve Reich.

Tanto en la página de Chen como en Create Digital Music comentan la composición original, que ser interpretada por dos pianistas, aunque por ahí la he encontrado tocada por un único intérprete [14m58s].

.

ThreeAudio.js es una librería JavaScript creada por Steven Wittens que permite crear visualizaciones en Three.js, exponiendo los datos del audio como shaders GLSL. Puede leer de una fuente de sonido y proveer datos de tiempo y frecuencia en forma de texturas, al igual que valores derivados de volumen, bajos, medios y agudos. Incluye además un detector de pulsos en tiempo real basado en autocorrelación. Usa MicroEvent.js y DSP.js. Un ejemplo de lo que permite hacer se puede ver en su demo aunque sólo funciona en Google Chrome.

Hace una temporada señalaba un artículo donde se explicaba cómo visualizar sonidos con WebGL, para el que pueda tener interés en este tipo de ejercicios.

.

La imagen anterior es producto de un aparato que he visto denominado como cimascopio o tonoscopio. Este instrumento recoge el efecto de la transferencia de energía de una onda sonora a una superficie, en ese caso de agua de alta pureza. La tensión superficial del agua tiene alta flexibilidad y una rápida respuesta a las vibraciones impuestas, incluso en transitorios de pocos milisegundos. Por lo tanto el agua es capaz de trasladar muchas de las periodicidades sinusoidales de un sonido de muestra a estructuras sinusoidales físicas en su superficie.

Los límites actuales de la impronta de sonido en agua de este aparato se hayan en los armónicos más altos y se deben, principalmente, a que no hay energía suficiente en esta zona del espectro sonoro para causar la variación en la membrana de tensión superficial.

Los detalles del instrumento se pueden encontrar aquí mientras que el estudio de visualización de notas del piano forma parte de un artículo sobre su proyecto MusicMadeVisible.

.

dancer.js es una API de audio de alto nivel, utilizable tanto con la Audio Data API de Mozilla como con la Web Audio API de Webkit con compatibilidad inversa usando Flash, diseñado para hacer dulces visualizaciones.

Visto en Daily JS hace unos meses pero sin tiempo hasta la fecha de echarle un ojo.

.