A fun HTML5 interactive music video: Evelyn, performed by ABBY, coded by Bleech

ABBY's recent music  video, Evelyn, was created in HTML5 to support an interactive experience. As the band plays, you can select one of three paths for each musician, and switch them around in real-time to see what unfolds. The interactive version of the video can be found at http://evelyn-interactive.searchingforabby.com/ 


Steffen Bewersdorff and Dominik Tranklein are the developers who created the video. Their web agency, Bleech, based in Berlin, Germany, focuses on providing innovative services to music and media industry clients.  (More information about the nuts and bolts of the development process can be found in a post on the Web Designer Depot site:  "An awesome HTML5 interactive music video".)


Note:  The interactive musical video performance requires a fast computer. You'll need a browser that has extended HTML5 support, such as a Safari browser if you have a Mac, or a Chrome browser if you are using Windows. Be sure to close your running applications, and enjoy creating/playing with the band! 


Below is the non-interactive version of the video, which provides a walk-through of one possible interactive musical experience:
 

UPDATE:  I used this interactive video, displayed on a SMARTBoard, with students who have special needs, in several classrooms, and it was a great hit.  They especially liked the drummer.  For some reason, we couldn't get the fifth section to show a musician.  The students didn't mind.

RELATED/SOMEWHAT RELATED
The Wilderness Downtown (Arcade Fire, Chris Milk)
OK Go's Interactive HTML5 Music/Dance/Message Video, Featuring Pilobolus
ROME: "3 Dreams of Black" An Interactive Film by Chris Milk, Music by Danger Mouse, Daniele Luppi & Norah Jones
ROME: "3 Dreams of Black" The Technology
Creating Responsive HTML5 Touch Interfaces (Stephen Woods)
Popcornjs.org (open source HTML5 media framework)

Web goes pop: HTML5 is rejuvenating music videos online
Madhumita Venkataramanan, Wired UK
Behind the Scenes: The Interactive Music Video Game built in HTML5 (MSDN - includes link to code samples, including a frame code reader to sync video and interactive elements.)

User Experience and Windows 8, link to Steven Sinofsky's post.

Steven Sinofsky is an author of an informative MSDN blog. His recent post about user experience and the new Windows 8 operating system provides an interesting, detailed "back-history" of the development of the Windows UI over the ages. Steven's post is worth setting aside a chunk of time to read and reflect!

Creating the Window 8 User Experience

 

BTW, the numerous comments from readers of Steven's post are worth skimming.

Johnny Chung Lee's Recent Words of Wisdom & Google's Open-Source Ceres Non-Linear Least Squares Solver

I have been a fan of Johnny Chung Lee since 2007 or 2008, before he finished his Ph.D in Human-Computer Interaction.  Johnny went on to work at Microsoft (Kinect) and then Google, where he works as a Rapid Evaluator. 


Johnny is known for his experiments with the Wii Remote, which he introduced to the world during a TED Talk in 2008.  He continues to maintain his Procrastineering blog, and from time-to-time, uses his blog to share his take on the world of technology.  The following quote is a good example of his viewpoint, taken from his post, "Technology as a Story":


"...what saddens me is when I encounter technologists with the brilliance to create new and wonderful things, but lack a sense of what is beautiful to people. Technology is most often known for being ugly and unpleasant to use, because technologists most often build technology for other technologists.
...But to touch millions of people, you have to tell a story - a story that they can believe in, a story that can inspire them. Technology is a tool by which new stories can be crafted." - 



Today, I came across Johnny's most recent post, which asks, "So, what exactly is a "non-linear least squares solver"?  And why should you care?   Take a moment to read his post, "Ceres: solving complex problems using computing muscle".  Google just open sourced the Ceres Non-Linear Least Squares Solver.


If Johnny Chung Lee thinks that this is "probably the most interesting code library" that he's had a chance to work with, it probably has some value. 


Even if if you don't have a clue about the Ceres Non-Linear Lest Squares Solver,  you might appreciate Johnny's examples of how would it would useful. In today's rapidly-accelerating technology-supported world, you just might need it in your future!


Here are a few examples:
---Making sense of sensor data from multiple locations (see video "SLAM 1: Viewed at 6X speed")
---Figuring out the position of a camera and the objects in view (see video "Parallel Tracking and Mapping for Small AR Workspaces")
---Combining GPS data with vehicle sensors in cars. (see video "Street View Sensor Fusion with Ceres")


RELATED
Johnny Chung Lee's Website
Excerpt from a post I wrote about Johnny Chung Lee four years ago:
I wish I could be Johnny Chung Lee for a Day! 3/2/08
I've mentioned in previous posts that I am a fan of Johnny Chung Lee, a Ph.D. student in the Human-Computer Interaction department at Carnegie-Mellon University. Johnny expects to complete his Ph.D this year. Johnny recently presented his innovative work at TED 2008. 


What impresses me about Johnny is the way that he has documented his intellectual journey in a very accessible way, by using YouTube and his well-organized, appealing website. Johnny has taken interesting ideas that most would dismiss as silly or impractical, and transformed them into useful, usable applications that hold great promise for future work. 


 In my opinion, many of Johnny's "hacks" will spark ideas related to the design and development of universally designed technologies and applications that will meet the technology needs of a wider range of people. This is important, especially now that an increasing number of "connected" interactive displays and kiosks (known by the marketing industry as interactive digital signage) in public spaces.


January 2011 post:
"Hi, Google. My name is Johnny Chung Lee": Johnny Chung Lee Leaves Microsoft. (I still wish I could be Johnny Chung Lee for a day.)

CHI 2012 SlideShow (quick)

Here are some pictures from CHI 2012:


 I'll be sharing about innovative, interesting interactive technologies in some of my future posts.

URBAN MUSICAL GAME: Play with musical-sensor sports balls and friends (Real-Time Musical Interactions team at IRCAM)

One of my favorite things at CHI 2012 was the Interactivity sessions.  I especially liked the  Urban Musical Game, played with musical sports balls.  I didn't want to stop playing!


This just might transform P.E. and recess.


Below is a version of the game from 2011 created for the Future en Seine festival by the Real-Time Musical Interaction team at the IRCAM, in collaboration with NoDesign, Phonotonic, and composer Andrea Cera:

The balls in the game contain wireless sensors, which trigger sounds and interactive music.  It is supported by MO  (Modular Musical Object) technology, and Max/MSP. Below is a video of the balls in action (in French).

Nicolas Rasamimanana - Phonotonic, Paris, France 
Frederic Bevilacqua - IRCAM, France 
Julien Bloit - IRCAM, France Norbert Schnell - IRCAM, France 
Emmanuel Flety - IRCAM, France Andrea Cera - IRCAM, France 
Uros Petrevski - NoDesign, France 
Jean-Louis Frechin - NoDesign, France


Comment:
This would be a great activity for the large therapy room at Wolfe, a program for students with significant disabilities (including autism), where I spend most of my work days as a school psychologist.  I'd love to have it demonstrated in-person for students at the CATA (Central Academy of Technology & Arts), the high school I also serve, to inspire students about the creative aspects of technology.


I would also like to create my experiments with this sort of technology, based on a number of interesting ideas that have popped up in my mind over the past decade or so.  I'm especially curious to know how this could work in environments that also have multiple large interactive visual displays....


How can I make it so?
(Update:  It is a small world.  I looked up one of the people involved in the Urban Musical Game on Facebook and found that we share three mutual FB "friends".)

FYI: Google's Knowledge Graph

RELATED
Google calls Knowledge Graph first baby step towards "Star Trek computer".
The above article originally appeared on theverge.com as Google launches Knowledge Graph, a new intelligent search platform, by Nathan Ingraham (5/16/12)