From music videos to animations – here are just some of the examples of how new technologies allow artists, designers and programmers to fuse their creativity with code in order to come up with unique projects.
Arcade Fire – The Wilderness Downtown
“The Wilderness Downtown” is an interactive interpretation of Arcade Fire’s song “We Used To Wait” and it uses the latest web technologies including HTML5 video, audio and canvas.
As Chrome Experiments website puts it:
“Choreographed windows, interactive flocking, custom rendered maps, real-time compositing, procedural drawing, 3D canvas rendering… this Chrome Experiment has them all.”
If you fire up Chrome, go to The Wilderness Downtown and type in your childhood address. After that you’ll see a musical montage involving streets that you grew up on and multiple windows with running figures and flying birds.
Gigaom website points out, however, that the video is a bit of a “buggy treat” as it requires plenty of processing power and doesn’t always run smoothly.
Sour – Mirror
Inspired by “Wilderness Downtown”, “Mirror” is an interactive musical video from the Japanese band Sour. It integrates your Twitter and Facebook accounts as well as your webcam in order to create an experience like no other.
The video also makes use of browser windows and geographical location, as it displays a Google Map of your location. The video itself involves the lead singer of Sour walking across the map, but you really have to watch it yourself, as its hard to explain what it looks like.
Although the website will ask you to log in to your Facebook and Twitter accounts, it won’t spam your followers and the webcam integration is a whole lot of fun. At the end of the video, you can download the image of yourself. To watch the video you’ll need a browser that supports HTML5.
The Limousines – Very Busy People
Director Mathieu Wothke shows how production works in this creative video for the song “Very Busy People” (which was written by San Francisco electropop band The Limousines). The creation involved a host of programs including Photoshop, Facebook and others. While not as interactive as either “The Wilderness Downtown” or “Mirror”, it should still be mentioned along with the other two for its original look at the production process.
As the Creators Project website puts it:
“Taking place primarily between several Photoshop windows, the video shows the real-time manipulation of images and graphics used to create the visual effects that ultimately make up the video. It’s as if someone recorded the screen capture of a graphic artist at work on the visuals, edited in some live video footage of the band singing, and set the whole thing to music. While we do kind of miss the “wow” factor of the interactivity, the video is still fun and the song is catchy, and we are kind of suckers for seeing the creative process behind a work of art coming together in this way”
The Gamits – This Shell (HTML5 Puzzle Music Video)
In this video for Denver-based band The Gamits, fans were asked to complete a puzzle as they listen to a new track. If they complete the task in time, they can download the track.
OK Go – White Knuckles – HTML5 Project Synchronization
Both videos work like images, so you can stretch and move them around. You also won’t need any plugins, as the video should work in all major browsers, including Firefox, Chrome, Safari (and maybe IE9), but it won’t work with iPhone, iPads or Androids.
Conductor is the brainchild of Alexander Chen – professional violinist, visual artist and Google Labs employee. It’s an interactive display that turns the lines of the subway into a musical instrument.
As trains make their way across town, they cross the line to get to their destinations and that’s when you’ll hear a pizzicato pluck/twang. You can also play the “map” by tugging on a line with your mouse. Chen explains that as a viola player, it was interesting to him to replicate a feeling of tugging on a string. He also says that he was influenced by Massimo Vignelli’s New York Subway Map, which Vignelli created in 1972.
According to Chen:
“The map is not wholly accurate — so, New Yorkers, we don’t suggest using it to get to work on time or anything. The train launch time in the lower left is apparently on par with reality, but the map is mostly an exercise in creativity. For example, the 8 train and K train, which exist on Vignelli’s map, don’t exist anymore,” Chen says. “So in my world, I run them from 12 a.m. to 2 a.m., like ghost trains.”
Still, this project can cheer up even the most jaded of subway riders.
HTML5 Canvas Experiment
Each particle represents a tweet and if you click on one of them, you’ll see the tweet itself. The music will be played only if the browser supports the audio tag, with audio/canvas feature detection being carried out by modernizr library.
This is an animation sequence that was inspired by the “The Spider-Man” cartoon show from the 60s. It was created by Anthony Calzadilla. Creation of the sequence involved extensive work with CSS3 and Jquery as well as HTML5.
In this article, Calzadilla talks about inspiration and how the character and background art for the animation were created, among other things.
So there you have it – this is just the tip of the iceberg in terms of what could be accomplished with the new technologies like HTML5 and CSS3. Have you seen any other interesting sites that have made use of the mentioned technologies? Please share with us in the comments below.