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

Cool Sci/Tech News in my Local Paper! (Links, videos, and more)

My local paper, the Charlotte Observer, has a great Science & Technology section every Monday.  Each week, it includes a wealth of interesting news. Although some of the information is culled from other sources,  there usually is a local twist.  For example, on Sunday, our newspaper came with 3D glasses, just in time to view 3D pictures in print, and online.

Below is a sample of recent "Sci/Tech" related articles in the Observer, along with related links.  (At the end of the post, I've added a few more links to other interesting "scie/tech" items of interest that recently crossed my path.)

3D and the Charlotte Observer

Why 3-D? Just because it could be fun (Rick Thames, Executive Director, Charlotte Observer)

Charlotte Observer's 3-D Gallery  (Online and in the paper.)

Graphic:  Fooling your mind with 3D printing

Article: Toshiba unveils glasses-free 3-D TV  (Associated Press, 10/5/10)

Thin skin for sensitive robots

"Engineers have developed a pressure-sensitive electronic material that could one day serve as skin for general purpose human-like robots".  The skin is made from a mesh of pressure-sensitive electronic nanowires made out of germanium-silicon. The mess provides information about force to sensors under the "skin". 

Original press release: Engineers make artificial skin out of nanowires (Sara Yang, UC Berkely News, 9/12/10)

(Images: Ali Javey and Kuniharu Takei, UC Berkeley)

NELL :  Never-Ending Language Learning System

Computer teaches itself on the Web (Steve Lohr, NY Times)

NELL is a collaboration between Carnegie Mellon University, the U.S. Defense Advanced Research Projects Agency, and Google.  The project uses Yahoo's research supercomputing cluster to do the heavy work. The research goal of this project is to "build a never-ending machine learning system that acquires the ability to extract structured information from unstructured web pages. If successful, this will result in a knowledge base (i.e. relational database) of structured information that mirrors the content of the web."


The project's progress and knowledge base is available on-line: http://rtw.ml.cmu.edu/rtw/resources Tom Mitchell, the Fredkin Professor of A.I. and Learning at Carnegie Mellon, is involved with this research.  

Below is a demonstration of Tom Mitchell's work in the area of "thought reading" with his colleague, Marcel Just: "We are specifically interested in algorithms that can learn to identify and track the cognitive processes that give rise to observed fMRI data."

"Professor of psychology Marcel Just and professor of artificial intelligence Tom Mitchell demonstrate how they are using brain imaging and machine learning to predict a subject's thoughts." -Carnegie Mellon University YouTube Channel

HTML 5

Latest Web code offers far more ways to track what you do online (Tanzina Vega, NY Times)

HTML 5 will make it easy for "them" to track your every Internet move, and raises concerns about online privacy and security.  

Charlotte Observer/Scitech    Highlighted Blogs:

He looks into the minds of animals, kids (T.DeLene Beeland, Charlotte Observer 10/10/10)

This article is about Jason Goldman and his research in the area of developmental psychology.  His research focuses on social cognition, which he writes about in his blogs:

Thoughtful Animal Blog:  http://scienceblogs.com/thoughtfulanimal

Childsplay Blog:  http://scientopia.org/blogs/childsplay

OTHER INTERESTING LINKS

Navigating the Aural Web
"The PI's goal in this project is to establish advanced design strategies for the aural navigation of complex Web information architectures, where users exclusively or primarily listen to, rather than look at, content and navigational prompts. Conventional on-screen visual displays may not work well, if at all, in many situations. The most obvious instances occur when persons who are blind or visually impaired need to use technologies designed for sighted users. A much more common situation, however, occurs with users of mobile devices. These users are often engaged in another activity (e.g., walking around a city or driving a car) where it is inconvenient, distracting or even dangerous to continuously look at the screen...." -Award Abstract #1018054

Digital Graffiti Wall, by Cyan Design
Twenty Things: More Awesome and Geeky Graffiti

Digital Graffiti Wall at Ingenuity Fest 2010 from Chris Yanc on Vimeo.

New Grants Aim to Boost Computer Science (Education Week, 10/8/10)

"Two federal grants that were just announced will together provide nearly $27 million to advance computer science education. The announcements come the same week that a new report was issued raising concerns that the subject is getting short shrift in schools. The National Science Foundation is providing a $12.5 million grant to UCLA to promote new and innovative computer science instruction in high schools through the use of mobile phones and Web technology. (The effort will also use that technology for standards-based math and science classes.) The project, dubbed MOBILIZE: Mobilizing for Innovative Computer Science Teaching and Learning, is a partnership between two UCLA centers and the Los Angeles Unified School District."  MOBILIZE website

Updated: Coding for Multimedia Interaction On ( and Around) Screens of All Sizes - with some interesting links

The last time I created an application for a mobile device was about four years ago.  It was in the olden days when most of us knew nothing about multi-touch interaction on any size or sort of display.  Soon after that, I focused my work on large displays, and tried not to get too distracted by the iPhone when it was introduced.

I can't ignore the iPad, as I think it holds a ton of potential for education and supporting people with special needs.

I can't ignore Android, since I have an Incredible. (I'm tethered to a never-ending family contract with Verizon.)

I have to figure things out during my summer break, right?  Brushing up on my "old" coding skills won't move me forward. Soooooo.......

On top of everything else* I'm trying to pack in,  I plan to take a peek at Sencha Touch  http://www.sencha.com/products/touch/, an HTML 5 mobile application framework that allows for Apple iOS and Google Android touchscreen devices.

I am searching for the magic solution that will allow the development of applications that allow for smooth interaction across screens of all sizes, from smartphones to huge displays.

Summer is a great time for dreaming and searching, but it is so short.  Time-saving advice from my readers would be greatly appreciated!  I'm also looking for good information about programming for stereoscopic 3D games for my series of posts about 3D innovations.

*What I'm trying to pack in:
Volunteering for the Society for Information Display, working on a SMARTTable app, exploring ideas for a multi-dimensional  interactive timeline, etc.

RELATED
Parallel Timelines


SOMEWHAT RELATED
FYI:  Recent posts on The World Is My Interface blog
WSJ's Interactive Graphics:  China's Housing Markets, via Innovative Interactivity
The First Self-replicating Cell with a Computer for a Parent:  Synthetic Life
More TED Talks:  Chip Conley's discussion about measuring what makes life worthwhile
Fractals in our world:  "I'm a mathemetician and I'd like to stand on your roof" - Ron Eglash on African Fractals

Coding for Multimedia Interaction On (and Around) Screens of All Sizes

Here is the updated version of post:

http://interactivemultimediatechnology.blogspot.com/2010/06/updated-coding-for-multimedia.html

Android Tablet Prototype Runs Flash (Video and quick links)

It is interesting to watch how this unfolds:

Part I

Part II


The above videos can be found on ZedoMAX's YouTube channel.
(Thanks to Justin Ireland for the link.)

RELATED
More videos about Adobe products and new forms of tablets can be found on TheFlashBlog. (Thanks to Christian Moore for the link.)

YouTube HTML 5 Video Player Info
Google Chrome 5 Beta: The Top Five Features 
Ian Paul, PC World Blog, 5/5/10
"HTML 5, the new programming standard for Web pages, may not be officially ready yet, but that hasn't stopped Google from implementing some of its new and exciting features. Google Chrome 5 beta introduces file drag-and-drop capabilities, Geolocation (such as Google's MyLocation feature), and offline application caching (Google Gears replacement ). The new version of Chrome beta also offers Web sockets, which make it easier and faster for Web-based applications to communicate with their host servers." -Ian Paul

The Opposite of Interactive Media: The Pretty Loaded Archive of Preloaders (Are we really movin' up to HTML 5?)

According to a recent article by Garrick Schmitt, preloaders might become history in the very near future. Schmitt discusses HTML 5 and related topics, and included a link to the Pretty Loaded website, an archive of interesting web-site preloaders from our recent past - 2002 to 2009, to be exact. You can download a screensaver for PC or Mac from the site.

For more information, read Schmitt's article, and take also a look at the related links I've posted below.

Things are changing.

Are You Ready for a Flash-Free Future: How HTML 5 and Open Video will Deliver a Faster, Plug-in Free Internet
Garrick Schmitt, Ad Age, 8/12/09

RELATED AND SOMEWHAT RELATED

HTML5 Canvas Experiment

HTML 5 Doctor

Mozilla's Canvas Tutorial
"canvas is a new HTML element which can be used to draw graphics using scripting (usually JavaScript). It can for instance be used to draw graphs, make photo compositions or do simple (and not so simple) animations. The image on the right shows some examples of implementations which we will see later in this tutorial..."

O3D Demos (Google Code Site)

Open Video Project

Open Video Player Initiative

Advancing Open Video