Contenidos con la etiqueta programación

Notación musical con JavaScript, Canvas y SVG

Hace unos meses apuntaba una solución basada en JavaScript y Canvas vista en Ajaxian. Últimamente Ajaxian está algo muerto pero en WebAppers me encuentro con VexFlow:

VexFlow is an open-source web-based music notation rendering API. It is written completely in JavaScript, and runs right in the browser. VexFlow supports HTML5 Canvas and SVG.

En la propia página convierten esto:

tabstave notation=true
notes :q (5/2.5/3.7/4) 5h6/3 7/4 |
notes :8 [ t12p7p5h7/4 ] :q 7v/5 :8 [ 3s:16:5-7/5 ]

tabstave notation=true
notes :q (5/4.5/5)s(7/4.7/5)s(5/4.5/5)
notes :8 [ (5/4.5/5)h(7/5) ] |
notes :8 [ t(12/5.12/4)s(5/5.5/4) 3b4/5 ] :h 5V/6

en esto:

VexFlow

Habrá que darle un tiento.

Letras bailarinas

Siguiendo un poco con el tema de la composición tipográfica por aquí dejo un experimento de Román Cortés:

Dancing typography
Dancing Typography

Como idea está muy bien pero la solución de puro JavaScript/CSS resulta mucho más espectacular.

Notación musical con JavaScript y Canvas

Veo en Ajaxian:

Mohit Muthanna has implemented music notion in Canvas. He has the beginnings of it right now, and still needs to tie in a nice DSL to write it out.

La demo que se señala en el blog del autor muestra resultados como este:

Retoques en el blog: fondos personalizables

He hecho una actualización más sobre la presentación del blog. Si alguien sigue entrando en la página y se fija, abajo a la derecha, en el apartado de “chorradas”, hay una opción para definir un esquema de color personalizado. Pinchando sobre ella se puede parametrizar el aspecto que queréis que tenga el fondo de este blog. No es que sea especialmente intuitivo pero os animo a que hagáis pruebas.

Lo más sencillo es cambiar el color, a verde atómico, por ejemplo. Pinchando sobre “Paleta de colores” podéis seleccionar el color que más os apetezca de una forma sencilla. También se pueden poner imágenes en segundo plano, como en éste fondo con Summer Glau. La imagen es bastante pesada y la original se puede encontrar aquí.

Las imágenes grandes dan bastante buen resultado (una vez almacenadas en cache, por supuesto). Utilizando material de aquí se puede tener un fondo con una puesta de sol o ver elefantes paseando. También se pueden usar imágenes con repetición y mantener el fondo fijo.

Si hacéis cualquier cambio en los parámetros que están dentro de la personalización debéis pinchar sobre “Recordar personalización” si queréis que el navegador lo recuerde. El enlace de “Exportar” genera enlaces como los anteriores.

Por supuesto, nada de esto funciona en Internet Explorer 6 y no sé cómo se comportará con Internet Explorer 7. Tampoco lo he probado con Opera ni con Safari, así que ya me diréis por dónde chilla.

Y eso es todo. Agradeceré cualquier comentario/crítica/sugerencia sensata. Estas chorradas se han comido más tiempo del previsto, así que mañana vuelta a la programación habitual.

Geometría armónica

Mientras vuelvo a escuchar la canción del vídeo de este post de Fer me pongo a pensar cómo encaja la progresión que subrayan dentro de esta tabla armónica (nada que ver con la pieza del piano):

Harmonic Table Note Map

Este mapa de notas describe la distribución de las mismas en este controlador MIDI. En la misma página muestran algunos ejemplos de construcción de acordes, que me hacen recordar el modelo de armonía que señalaba hace casi un año.

Todo esto viene porque hace un par de semanas veía en el blog de MAKE un simulador del aparatejo MIDI citado desarrollado por Grant Muller “utilizando las librerías Processing, junto con la librería ControlP5 y la librería Ruin & Wesen’s rwmidi para la funcionalidad midi”. El resultado es un ejecutable JAR que podéis encontrar en su página web.

Viendo estas cosas me dan ganas de revisar mi vetusto mezclador de escalas para rehacerlo con Processing.js de John Resig y SoundManager 2. Lo sé, soy un degenerado.

1839 entradas