r _Web.log

tag: web

The Markup Melodium

I was recently invited by Mozilla to be a fellow on their Webmaker program, an excellent initiative to foster web literacy. As part of the fellowship, I was asked to create something which exploited the affordances of their maker tools.

I was drawn to the immediacy of Thimble, a browser-based interface to write web code and immediately see the results. I began pondering the potential for using Thimble as a kind of live coding environment: could an HTML document be translated into a piece of music which could be edited on-the-fly, hearing an immediate reflection of its structure and contents?

The outcome is this: The Markup Melodium. Using jQuery and Web Audio, it traverses the DOM tree of an HTML page and renders each type of element in sound. In parallel, it does likewise for the text content of the page, developing the phoneme-to-tone technique we used in The Listening Machine.

In way of example, hear Lewis Carroll's Jabberwocky as rendered by the Melodium. To explore the basic elements, here is a short composition for the Melodium. And the really exciting part: using Thimble's Remix feature, you can clone this basic composition and immediately begin developing your own remix of it in the browser, before publishing it to the world.

As the Markup Melodium is implemented through pure JavaScript, it's also available as a bookmarklet so that you can sonify arbitrary web pages.

Drag the following link to your browser's bookmark toolbar: Markup Melodium.

And, of course, all of the code is available on github.

The name is in tribute to The Melodium, a 1938 musical instrument created by German physicist Harald Bode, whose pioneering modular designs anticipated today's synthesizers by many decades

Jones/Bulley portfolio

James and I have just finished a radical overhaul of the portfolio for our collaborative practice.


It now features full documentation of our existing works, plus some previews of our schedule heading into 2014.

Procedural HTML5 drawing with Harmony

K http://mrdoob.com/lab/javascript/harmony/

This online procedural drawing interface (click + drag in the big white space beneath the bar) simultaneously inspires awe and unease in its instant transformation of scribbles into intricate drawings.

It's made possible by the new HTML version 5 and its <canvas> tag, which allows for images to be dynamically created and modified within a web browser -- here using the JavaScript port of Processing. Exciting (and occasionally unnerving) times ahead.

delicious/twitter digest #2

It feels like there's been a particular surge lately of quality digital art hyperlinks, which make the cut over on my twitter/delicious feeds but I don't quite have time to blog about. To save them from the abyss of social network ephemerality, here's a digest of the highlights.

  • The Mandelbulb, breathtaking renderings of 3D fractal forms - frightening in their organicness. Eerily reminiscent of the Romanesco cauliflower.
  • Jonathan Zawada is an Australian designer and illustrator, incorporating influences both psychedelic and mathematical. He also makes the masterly move of explicitly acknowledging these influences in his "cliffnotes" sidebar. Win!
  • Osmos is a really, really sexy-looking ambient game based on particle interactions. Soundtracked by Loscil, Gas, Biosphere and more.
  • When naming the mascot for their much-vaunted Go language, Google obviously weren't aware of 1980s UK kids TV. Compare: Gordon the Gopher vs Gordon the Gopher. Oops.
  • The parallax-glitch interface to Daniel Leyva's portfolio needs to be experienced. Great concept, and executed with no use of Flash whatsoever.
  • Continuing the psychedelia note, Fred Tomaselli creates explosions of colour and multiplicity which threaten to do strange things to your consciousness. Really want to see these paintaings in the flesh.





K http://www.temporary.cc

temporary.cc is a marvellously concise piece of netart by prolific openFrameworks contributor Zach Gage. Each unique visitor causes a single fragment of the page's HTML to be deleted, resulting in an irreversibly degenerative piece of online space. Each visit is inevitably further decayed than the last, and any attempts to archive or document are futile.

Reminds me of Feliz Gonzales-Torres' beautiful candy-pile pieces, though with very different conceptual intent.


edit: Alex kindly pointed me at Dust, a projected created by Geoff Cox way back in 2000 which applied the same idea to a digital image. Particularly striking right after a conversation we'd been having about art and the fallacies of originality.

Hackpact 2009/09/#3: Interactive London sound map


Remember Luke Jerram's wonderful Play Me, I'm Yours, in which 29 pianos were distributed around the streets of London for public usage? Using this as their basis, James Bulley and pianist Keir Vine went on a tour of each of the sites, playing and recording each of the pianos in order to create a city-wide composition. The challenge -- and appeal -- is that most of the pianos sit in sonic environments quite atypical for a recording setup; the atmospheres of Smithfields Market, Camberwell Greeen etc thus define the piece as much as the musical composition itself.

I proposed to James that it might be nice to open up the recordings for public remix and recomposition, with an interactive soundmap akin to that of the Fragmented Orchestra (currently dormant). The idea is that the points are geographically distributed in a 2D space mapping their real location in the city, which the user can then mix in real-time by moving the cursor around the virtual space. Due to the orientation of the distribution of pianos around the City of London, a non-geographical map seems like a logical approach, and what better than Harry Beck's original tube map?

I've spent some time today developing a sketch for this idea, which should hopefully be completed and published very soon.

chiptune.com: A web-based Amiga Workbench emulator

K http://www.chiptune.com/

chiptune.com is a stunning, fully-functional web-based emulation of the classic Amiga Workbench OS. It's entirely written in Javascript by Christophe Résigné, as part of the new Chrome Experiments showcase of dynamic web apps intended for Google's Chrome browser. Despite this, it also works happily in Firefox and Safari, which is just as well given Chrome's continued lack of OS X support.

I was particularly happy to discover it even includes this old friend...

Chiptune failure

Hackster Runoff

K http://www.hipsterrunoff.com/2009/02/2553.html

For those interested in internet and meme culture, there's a strangely enjoyable minidrama playing out at Hipster Runoff, triggered by a purported hack of the site. It's now spawned a hilarious video post responding to the comments of the hacker's critics. Whether it is genuine or not is debatable — surely this is another Hipster Runoff heteronym? — but, either way, the video is something to behold. It reads like a painfully accurate take on anti-cultural pop-philosophical nihilism, referencing the likes of Fight Club and soundtracked by Linkin Park's "In The End".

From the comments:

"are hackers gunna be the new thing of 2k9??
Maybe they are more relevant than we knew."

— wut

New Media Meeting


For those on the other side of the North Sea, a new video recording of AtomSwarm is being shown at this weekend's New Media Meeting festival, in Norrköping, Sweden. Aside from an impressive roster of media artists by day, and some hot European techno by night, they've also got a damn fine website - apparently created as part of a web development training exercise!

delicious digest #1

There's been a veritable blizzard of bookmarks swarming through my browser tabs over the past few days — convenient, as I'm enjoying the relative lull after the hectic weeks around Futuresonic.

For example,
this wall-bound bestiary;
this tongue-tripping delight;
this Gallic trove;
this subaquatic cartography;
this delving profile;
this bit-pop artistry.

I'm intending to post some photos and video of the Futuresonic work in the next few days. In the meantime, please enjoy this image of a bird in wellingtons, sent to me by my brother.

bird in wellingtons bird in wellingtons bird in wellingtons bird in wellingtons bird in wellingtons bird in wellingtons