MondoGonzo

En el mismo enlace a DailyJS que ponía en la entrada de ayer mencionaban también un nuevo proyecto de Chris Milk (véanse menciones anteriores aquí y aquí) en colaboración con la gente de Google.

El resultado de esta unión se llama “3 Dreams of Black“, un vídeo musical compuesto por dibujos y animaciones tradicionales intercalados por escenas interactivas en 3D. A lo largo del vídeo se presentan oportunidades para guiar la cámara con el ratón e incluso se pueden crear modelos 3D para incorporar a los contenidos. Y existe la posibilidad de que dichos modelos sean integrados permanentemente en el vídeo.

La canción, “Black”, está sacada del disco ROME, presentado por Danger Mouse y Daniele Luppi y con la participación de Jack White y Norah Jones. El disco todavía no está a la venta pero se sabe que está inspirado en las bandas sonoras italianas de los sesenta y del spaghetti western. De hecho, en el propio blog de Google destacan que el album se grabó con la orquesta orginal de las películas del oeste de Sergio Leone.

Para lograr todo esto utilizan WebGL con lo que se requiere un navegador capaz de soportarlo, como Google Chrome. Yo no he conseguido activarlo para Chromium en 64bits (cualquier howto será bien recibido) En Chromium tendría que usar la opción –ignore-gpu-blacklist, que puede tener resultados inesperados, pero sí he podido verlo con un rato con un Google Chrome Canary. Además, han recopilado algo de información sobre la tecnología utilizada y el código fuente para que cualquiera pueda meterle mano.

Anatomy of a Mashup, de Cameron Adams, es un análisis audiovisual de una remezcla de seis minutos de temas de Daft Punk que él mismo hizo que mencionaban hace unos días en DailyJS. En la entrada de su blog al respecto, Anatomy of a Mashup: Definitive Daft Punk visualised, el señor Adams dice:

[…] By dividing up the sound data for each song and computing its appearance in realtime, the resulting visualisation gives you an understanding of the unique anatomy of this particular mashup.

The entire piece is composed from the latest HTML5 and CSS3 technology (canvas, audio, transforms & transitions) so you’ll need a newer browser to view it in. I recommend Chrome because it pulls off the best performance with my mangled code. All of the waveform and spectrum visualisation is performed in realtime, so your browser is rendering a music video on the fly!

Hopefully it gives you a new insight into the artform of the mashup, otherwise you can just stare at the pretty shapes.

El código fuente de la parte principal parece bastante legible, así que le echaré un vistazo en cuanto tenga un hueco.

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:

Habrá que darle un tiento.

A principios de mes mencionaba The Wilderness Downtown y hace unos días Mr.doob publicaba un artículo en su blog dando algunos detalles de cómo surgió y se llevó a cabo este proyecto de desarrollo. Una lectura más que recomendable para los interesados en la materia.

Hace una temporada que sigo Chrome Experiments con cierto entusiasmo. Si seguís mis elementos compartidos de Google Reader es posible que también lo conozcáis. La propuesta del sitio es bastante sencilla:

[…] we created this site to showcase cool experiments for both JavaScript and web browsers. These experiments were created by designers and programmers from around the world using the latest open standards, including HTML5, Canvas, SVG, and more.

Si todavía no conocéis esta colección de proyectos os recomiendo echarle un ojo, hay algunos que son realmente espectaculares. Ayer, en el blog de Google Chrome, destacaban uno de estos experimentos, The Wilderness Downtown:

Choreographed windows, interactive flocking, custom rendered maps, real-time compositing, procedural drawing, 3D canvas rendering… this Chrome Experiment has them all. “The Wilderness Downtown” is an interactive interpretation of Arcade Fire’s song “We Used To Wait” and was built entirely with the latest open web technologies, including HTML5 video, audio, and canvas.

El resultado es, como poco, muy curioso. Es una lástima que los caminos de diseño y desarrollo que abren las nuevas funcionalidades de los navegadores se vean perjudicados por el uso de otros navegadores totalmente desfasados.

A veces los bugs no son algo malo.

Hace unos días meniconaba los experimentos de Jacob Seidelin apoyados en un trabajo previo de un grupo de programadores que aprovecha un bug presente en una versión de desarrollo de Firefox. Pues bien, a finales de mayo David Humphrey publicaba la décima entrega de los experimentos con el audio desarrollados por dicho grupo de desarrolladores:

Since my last post, quite a few new people have joined our group, a lot has changed in our implementation, and we’ve achieved a few things worth writing about. I also can’t keep these demos under wraps any longer, so it’s time for another post.

Lo vi en Ajaxian, como en las ocasiones anteriores.

Un artículo titulado “Bizarre Websites On Which You Can Kill Time With Style” puede que no sea lo más indicado para un viernes de “puente” en el que hay que trabajar. Entre todas las chorradillas que señalan una llama la atención:

Labuat

Labuat is the most beautiful and enjoyable time-killer in our selection. It’s a song illustrated by an interactive brush that reacts to music, and the lyrics won’t leave you cold.

No he tenido tiempo ni necesidad de ver todas las páginas que mencionan pero parece que merece la pena echarle un ojo a unas cuantas. En cuanto tenga tiempo que perder echaré otro vistazo.

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:

A principios de año veía un ejemplo de visualización de sonido con una versión parcheada de Firefox. Hace un mes, Jacob Seidelin revisitaba uno de sus experimentos apoyándose en esta solución:

[…] a few people have been hacking away at Firefox, attempting to provide just that functionality for the audio element. Some documentation of the new API is available here and if you’re interested, you can follow the development in this bugzilla thread.

Anyway, I’ve been wanting to mess around with this and I figured that retro-fitting my “Pocket Full of Canvas” experiment to use HTML5 audio would be a fairly easy task. You can check out the result here.

Los resultados son bastante bonitos, como se puede ver:

En Ajaxian hablan de como un grupo de programadores ha utilizado un navegador implementado partir de la versión de desarrollo de Firefox 3.7 para experimentar con el procesamiento y visualización de la información de un objeto <audio> con JavaScript. Los resultados se pueden ver en este vídeo [02m01s], aparte de utilizando la versión del navegador desarrollada por esta gente.

Y ya que estamos con el mundo de JavaScript, aquí dejo una versión un tanto especial del Pong vista en Kotaku: Browser Pong.