Jun 2, 2011

Interactive Multimedia: Music, Videos and Ads -Choose your POV, Scenes, Timelines, and More -HTML5, JavaScript, WebGL

I thought I'd share some examples of interesting interactive multimedia sites on the web.  It seems that artists, musicians, and ad agency folks have been experimenting with tools such as HTML5, SVG, Canvas, and Web GL.  Some of this work is featured on Google's Chrome Experiments website, and other examples can be found on websites promoting Wrangler Jeans or Ikea furniture.   This sort of content is great on a larger display.


Take some time to watch the videos and explore the links below.  Enjoy!


"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."


ROME:  "3 Dreams of Black", an Interactive Film by Chris Black (The link leads to the interactive site.)


WRANGLER
















Wrangler: WORN ACROSS AMERICA (Interactive multimedia 
map - go to "Choose Scenes")


















Demo of interaction on an iPad

Interactive Ad for IKEA: "A Better Sleep for Everyone"
The website for this amusing and creative ad campaign was created using HTML5. Here is a description of what you'll find if you follow the above link:


"IKEA is now launchig the Kokokaka produced A Better Sleep for Everyone campaign site, which features IKEA's bedding catalog.  6 different mattresses are shown by 6 Swedish artists, each interpreting a classic lullaby performed in a dreamy and surreal music video.  By scrolling up and down the user can change between the artist's music videos and the different mattresses.  Experience, for instance, a soulful Tingsek having problems falling asleep.  ust like the princess from the famous fairly tale he gets annoyed by something hard under the pile of mattresses.  But guess what? It's not a pea, it's Tingsek's band!  Let yourself fall asleep to beautifully performed lullabies!" 


Agency: Forsman and Bodenfors;  Film Production: Social Club;     Director: RBG6;   
Music: Music Super Circus;  Web Production: Kokokaka;   Photographer: Carl Nilsson


Below are videos of two of the lullabies featured in the interactive ad:





Here is a video from the interactive IKEA Come Into The Closet  website from a year or two ago:



"This is a campaign to promote IKEA's wardrobe solutions. IKEA wanted to show their huge range of styles and all the smart features on the inside. All the movements on the web site are controlled by sound and music. So change songs, upload your own music, play on your keyboard or sing into the microphone."


RELATED
Cacophony: An interactive video player in HTML5 and Javascript
"The basic elements of a Cacophony video are: An HTML5 Video on the base layer, a series of HTML5 Canvas layers above that, a timeline of effects to be triggered to the beat of the song, images and other elements to be used by the effects"
Post a Comment