Some HTML 5 Works

I've been seriously trying to learn JavaScript, CSS, the DOM (document object model) and jQuery recently, hopefully toward the production of some HTML 5 art thangs down the road. It's going fairly well. Anyway, I've also been looking at work people are doing with HTML 5. The best site I've come across so far that posts links to HTML 5 work is canvasdemos.com. There's considerable dreck here, of course, but there are a few pieces worth looking at.

HTML 5 has been publicized as an open source replacement for Adobe's proprietary Flash. In truth, HTML 5 is far less featureful than Flash concerning audio, video, imaging, text and much else. And there are currently no tools available for non-programmers to work comfortably in HTML 5. It will take HTML 6 or 7, which will be some years, perhaps a decade, for HTML to approach the current featurefulness of Flash. But it's coming along.

The most notable thing about HTML 5 is the  <canvas> tag, which provides the ability to do interesting graphical operations. There are various programmerly commands available to draw stuff. HTML 5 also introduces a few audio commands, but nothing with the sophistication of Flash’s audio capabilities.

What we're going to do is have a look at four recent pieces that use HTML 5 in interesting ways. And that work. Yes, some HTML 5 works. When new programming possibilities are introduced to a mass audience, you can bet there's going to be more than a few blue screens. I've only had one today looking at new HTML 5 work. But not from any of the below pieces. These pieces ran well and were very rewarding to view.

The most interesting one, from an artistic perspective, is Arcade Fire's interactive music video of their song "We Used to Wait" from their album The Suburbs, which won the Grammy for album of the year in 2011. The HTML 5 piece is called The Wilderness Downtown . This is quite impressive, really, both from a technical and artistic point of view. And it goes along perfectly with the suburbs, if that's where you're from. I've seen online videos that use multiple browser windows for video before, such as in the work of Peter Horvath, but The Wilderness Downtown is also quite sophisticated in other ways. The programmed birds, for instance, and the way they move between windows. And alight on what you have drawn in the interactive writing piece. And the way they use Google Earth. Very strong work indeed. And, o yes, the music is pretty darn good too. Moreover, the touches I've mentioned are not gratuitous wiz bang programming effects, but tie into a vision of the suburban experience that Arcade Fire has developed so very beautifully.

The video is by Chris Milk. This is not his first work for the web. Nor is this Arcade Fire's first piece of net art. The Montréal band produced a Flash interactive version of their song Neon Bible.

The Wilderness Downtown is apparently built to run in Google Chrome. I didn't use Chrome but Firefox; it ran fine in Firefox. If it's insufferably slow for you, try Chrome or Firefox.

The second piece is a game called Canvas Rider, an unusual game by Maxime Simon from France and "Pete". The hand drawn look of it is unusual. And the programming allows users to create and upload their own hand drawn 'skins'. The piece is quite responsive via the keyboard. It feels right; the physics are good. And it's challenging, as a game of eye-hand coordination. And it performs very well in fullscreen mode. I found it played well on my PC in Firefox but was rather slow in Internet Explorer. Which is a little bit surprising in that the hardware-accelerated nature of Microsoft's implementation of HTML 5 in Internet Explorer has been much publicized. So you'd think this piece would go lickety split in Explorer. I don't understand.

Apparently there was an earlier version of this game in Flash. They say "Flash has been dropped for the newer & interoperable HTML5 features." It's really quite an ambitious project, what with not only the game but the ability to create skins. With pencil drawings. And it's from France. It doesn't have that 'computer gamey' look to it at all. Very impressive work indeed.

And it's been very popular with the kids. It seems people have added hundreds of maps. And the discussion forums are active and gabby with teens. This game really is fun. Some of the maps, better than others, capture a sense of flying through the air on the bike. Which of course is exhilarating whether you are really doing it or just in a computer game. The maps vary a great deal not only in their playability, but in the vision of life they present. Some are outdoorsy. One is a little girl's room. We ride along the bed, her dressing drawers, her nightstand, and so on. Others are quite abstract. The game offers great scope for artistic invention in creating skins. Gotta say I'm almost hooked on this one. No skin from me yet though.

The third piece is the Wikipedia Knowledge Map by Ingo Straub from Germany. You type something in that has a Wikipedia article title associated with it, and the app shows you a visualization of links to related topics, with working links. This sort of piece is not new, really. The first one of its type I saw was back around 1996; when the Java applet was being launched, the SDK came with code to create these sorts of structures. And there have been many since. Still, I haven't seen one for Wikipedia before, and it works quite well. It's an interesting visual representation of knowledge, as it were.

The last piece I want to bring to your attention is an interactive audio piece called the Tenorion by Joshua Koo from California. And it's a Flash/HTML 5 hybrid. The visuals are HTML 5. The audio engine is Flash. The audio commands and features available in HTML 5 are quite minimal, really. But this piece uses a Flash audio library of code called Sion. I've seen a strongly related and earlier piece by Andre Michelle, the Flash audio guru. But it's very charming nonetheless. You click on squares to toggle the audio for that square on/off, and when the note for a square plays, colored circles radiate from the square, interesecting with those of other squares. You can also select among several instruments and record your piece.

So there you have it. Four pretty good HTML 5 works. If you're interested in the programming possibilities of the canvas tag, have a look at mozilla.org's tutorial on the canvas tag.


4 Responses to “Some HTML 5 Works”

  • Jim Andrews: July 13, 2011 at 2:34 am

    Here is another innovative music video: http://sour-mirror.jp

    Now, is this HTML 5 or Flash? Well, if you right-click on a window (um, Ctrl+click, I think, on Macs) a menu pops up. If the piece is done with Flash, the menu that pops up will tell you the piece was done with Flash.

    And, indeed, that’s what happens with the above piece; it was done in Flash.

    But you can also tell it’s done with Flash in another way. In the piece, you see many images of web pages. Note that the links in these pages are not working. The reason why the links aren’t working is because what we’re looking at are *bitmap images* of web pages, not web pages themselves. Flash can retrieve web pages, on the fly, and create bitmap images of the pages it retrieves. You can’t do that in HTML 5. Hence the piece is done with Flash.

  • Jim Andrews: July 14, 2011 at 6:16 pm

    A friend pointed out that while the content of http://sour-mirror.jp is done in Flash, the various windows are almost certainly browser windows; the moving of the browser windows around is done with JavaScript. So this piece is a hybrid of Flash/JavaScript.

  • netpoetic.com > New on Netartery: (2011 link broken in 2024) July 20, 2011 at 1:43 am

    […] Some HTML 5 Works by Jim Andrews A review of four new HTML 5 works including an innovative, interactive music video by Montréal’s The Arcade Fire, 2011 winners of the Grammy for album of the year (The Suburbs). […]

  • Aleph : Null | contradicções: (2011 link broken in 2024) September 25, 2011 at 7:32 pm

    […] Andrews também publicou uma resenha sobre trabalhos recentes feitos em HTML5, vale conferir: http://netartery.vispo.com/?p=1061. Para quem se interessa pelo assunto, há outros trabalhos interessantes compilados […]