This Exquisite Forest: Join this massive online, creative, interactive, participatory, collaborative narrative animation project, by Chris Milk and Aaron Koblin

"Right here, in your web browser, you may contribute to anyone's creation and steer it in any direction you choose, or start a story of your own, by creating a seed animation for a new tree. Our hope is through the collective creativity of the web, an ever-expanding forest of narrative paths will grow." -Chris Milk/Aaron Koblin

This Exquisite Forest is a collaborative art project by Chris Milk and Aaron Koblin, creators of the online Johnny Cash collaborative project. The Johnny Cash Project was a crowd-sourced music video for Johnny Cash's final album (see below).

What I like about this project is that it provides viewers with the opportunity to create animations that link with those of other people, online.  All of the tools to create animations and music are on the website, along with  clear instructions and FAQs.  You can even curate your own tree.

For those who take a less participatory approach to art, the project's website offers something called "The Endless Theater", where viewers can watch the most popular branches of This Exquisite Forest.



The project makes use of Google's App Engine. Google's Cloud Storage handles the accounts and data storage.   To access the project, you need Google's Chrome browser, as the project takes advantage of JavaScript and HTML5.

RELATED 

This Exquisite Forest Project

The Making of This Exquisite Forest

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

Creating Responsive HTML5 Touch Interfaces (Stephen Woods -Video and Slides)

Here is an interesting video I came across during my HTML5 explorations - Stephen Woods, from Flickr, shares his words of wisdom about HTML5 and touch interfaces:


Stephen Woods (Flickr): Creating Responsive HTML5 Touch Interfaces




Here are a few links from the presentation:


Slides:  Creating Responsive HTML5 Touch Interfaces
http://www.slideshare.net/ysaw/creating-responsive-html5-touch-interfaces

Responsive Web Design 
http://www.alistapart.com/articles/responsive-web-design/

Link to article about HTML5, web "apps", and the future, from a "Yahoo" perspective

I thought I'd share a link to an article about HTML5 and the future from a "Yahoo" perspective:


Why ambitious developers need more than just HTML5
Bruno Fernandez-Ruiz, CNET News, 3/1/12


Think "Cocktail".

Is the answer Voronoi? Looking for possible solutions to an art+dance+music+tech idea from a recurring dream....

If you are a long-time reader of this blog, you probably know that I sometimes have some unusual dreams about technology.  I don't blog about my dreams very often, but last night, I had another technology dream, a continuation of a dream I had one night last week.  
Voronoi Diagram (Wikipedia)

I'm pretty sure that the last two dreams were sparked by playing an online interactive demonstration of a Voronoi application before going to sleep one night, and also reading an article about "extracting ordered patterns from a triangular mesh surface" in the Novemeber/December IEEE Potentials magazine before turning in last night. 

The dance probably was influenced by my recent viewing of the North Carolina Dance Theater's performance of Innovative Works with my mom, someone who encouraged my  study of music, art, and dance at an early age.

Some of my tech dreams are sort of...practical. For example, in one recurring dream, I find myself coding for a flexible mesh/grid application. Sometimes the mesh/grid has something to do with wireless sensor networks on curved terrain, perhaps related to something like the Smart Grid, and sometimes I find myself working on an application that analyzes streaming data from a variety of sources, for security prediction purposes.  At other times, I'm coding for something more artistic, my preference.

Last night, my dream focused on creating a flexible mesh fabric that used in a multimedia dance/graphic arts/music performance.  I was coding for this performance using a Voronoi-like algorithm.


This is the best I can do to explain this: The fabric is carried by the dancers, and is both reactive and generative. In essence, the fabric is intertwined/embedded in the dance, the music, and the graphics. In my dream, everything looked/sounded/felt awesome and otherworldly, and the music that merged and morphed during the dance was so beautiful, not only the melodies, but the sounds.  (In a previous dream, the mesh contained a "nanotechnology" component, but I'll save that quest for the future.)


I thought I'd look at some of my web book marks and search a bit more for information related to this topic.  For now, here is the "brain dump".  I have more to add to this post, and plan to port it to a reference page for this blog in the future.  I hope that this post will be useful to some of my art/music/dance/tech readers!

RELATED AND SOMEWHAT RELATED


Update:  Right after uploaded this post, I came across a link to a WebGL demo for a 3D music video of pop singer Ellie Goulding's song, 'Lights', by HelloJoy.   Visitors to the webpage can click to interact with the environment. If you keep the button pressed, you fly faster.  If you tweet the link, you'll see your name crop up as you fly around in the soundspace.  For more information about the making of 'Lights' - take a look at  Behind the scenes of 'Lights": the latest WebGL sensation!  (Carlos Ulloa, 11/9/11)


After I watched the 'Lights' video, I recalled Radiohead's 'House of Cards' video, which I wrote about back in 2008: 
 "We were rolling computers all day"...The Making of Radioheads House of Cards using imaging and info visualization software.   The process behind the making of the House of Cards video was described in detail in Chapter 10 of the book, Beautiful Data.

Bradley, E., Capps, D., Luftig, J, & Stuart, J.M. Toward Stylistic Consonance in Human Movement Synthesis.(pdf)  The Open Artificial Intelligence Journal, 2010, 4, 1-19
Bradley, E., Stuart, J.  Using Chaos to Generate Variations on Movement Sequences (pdf) Chaos, 8:800-807 (1998)
Bradley, E., Stuart, J.  Learning the Grammar of Dance.(pdf)  Proceedings Fifteenth International Conference on Machine Learning, Madicson, WI, 1998
E. Bradley, D. Capps, and A. Rubin, "Can computers learn to dance?," Proceedings International Dance & Technology (IDAT), Tempe AZ, Feb 1999.
Chaotic Dance: Using mathematics to generate choreographic variations
Schedl, M., Hoglinger, C., Knees, P. Large-Scale Music Exploration in Hierarchically Organized Landscapes Using Prototypicality Information (pdf)
Fournel, N. Procedural Audio for Video Games: Are we there yet? (pdf) GDC 2010


Voronoi Cells, created by Nathan Nifong.  A version of this interactive work was used in a DanceDraw performance

Patterns in the Noise (Nathan Nifong's site - FYI, Nathan worked with Celine Latulipe with the Dance.Draw project while completing his bachelor degree in computer science at UNC-Charlotte)
Voronoi Dance (Christian Gross, using OpenFramework)
Voronoi art: Slow Trip (Oktalist/Mat)


The above video, by Mat/Oktal, was inspired by his viewing of Thomas Ruff's Substrat images. 
Scott Snibbe Studio (Intearctive art, music, and animation for iPhone, iPad, iPod, and Mac)

Interactive Voronoi Diagram Generator with WebGL (Alex Beutel)
 
The above video was found in Alex Beutel's blog post, "Interactive Voronoi Diagrams with WebGL"

Posts about DanceDraw and related work at UNC-Charlotte:
News from the HCI lab at UNC-Charlotte- Creative Interactions (Videos)
Exploring the Design Space in Technology-Augmented Dance at CHI 2010:  Celine Latulipe's team from UNC-Charlotte
Interactive Surveillance:  Live digital art installation by Annabel Manning and Celine Latulipe

SIGCHI  Digital Arts and Interaction Community:  Building Bridges
The Interdisciplinary World of Dance and Interactive Technology

HTML5Voronoi  (HTML5Code website)

HTML5 Voronoi, Live Version
Update to code to compute Voronoi diagrams (Raymond Hill, 5/22/11)
William Forsythe's "Synchronous Objects-One Flat Thing, Reproduced" - Multidisciplinary online interactive project: Translating choreography into new forms.
BCS HCI 2011 Workshop: When Words Fail:  What can Music Interaction tell us about HCI?
Woven Sound (Alex McLean)
Real DJs Code Live (Robert Andrews, Wired, 7/3/06)
Visualization of Live Code (Alex McLean)
Voronoi diagrams of music (pdf)  (Alex McLean, 2006)
WebGL
Sylvester: Vector and Matrix Math for JavaScript
Generative Art Links (Mikael Hvidtfeldt Christensen)
Schacher, J.C. Motion to Gesture to Sound:  Mapping For Interactive Dance (pdf) Proceedings of the 2010 Conference on New Interfaces for Musical Expression (NIME 2010), Sydney, Australia
Code & Form:  Computational Aesthetics (Marius Watz)
Werghi, N. Extracting ordered patterns from a triangular mesh surface.  IEEE Potentials, Nov/Dec 2011
Last night I dreamt about haptic touch-screen overlays


Hyun-Seok Kim's Voronoi Yacht

Taking a look at CreativeJS: "The very best of creative JavaScript and HTML5" -

I came across the CreativeJS website while searching for HTML5/JavaScript resources suitable for creative multimedia projects.  The team at CreativeJS includes Seb Lee-Delisle, Val Head, Paul Neave, Rob Hawkes, Hakim El Hattab, and Lisa Larson-Kelley.


What a talented team!


RELATED
Recent blog post from CreativeJS:  Spherical Harmonics Mesh Builder
Seb Lee-Delisle
Neave Interactive
Rob Hawke's book:  Foundation HTML5 Canvas
Hakim El Hattab's Experiments
Lisa Larson-Kelley's Website:  Learn from Lisa (Web video publishing)

SOMEWHAT RELATED
Interactive Digital Fireworks

Digital Fireworks in Brighton from Seb Lee-Delisle on Vimeo.

OK Go's Interactive HTML5 Music/Dance/Message Video, Featuring Pilobolus - behind the scenes and more. Delight.

Not long after the earthquake and nuclear disaster in Japan, the creative team at Google Japan collaborated with the band OK Go and Pilobolus, a dance troupe,  to explore the capabilities of HTML5 and multimedia, while at the same time providing people from all over the world a means to send a message to others, including the people of Japan.  


I encourage you to visit the link to the interactive version of All Is Not Lost.   For your convenience, here is the traditional version:

Before the video begins, viewers can enter a message in a text box.  At the end of the video, the message will appear, with a few options for sharing the message. At a loss for words, I quickly typed "I love summer", and was delighted to see how the dancers gathered to form my message, as pictured in the screen shot.


Quite a bit of creative thinking went into the making of All Is Not Lost, as described in following article and video clips:
Behind the Work: Trish Sie on OK Go's "All Is Not Lost"
Shareen Pathak, Creativity, 7/27/11
"The trifecta also partnered with Google to create an HTML5-powered interactive experience, which leverages the Chrome browser to showcase the clip through 12 separate windows of dances that shift along with the music. Users can also type in messages in Roman letter or Japanese and watch the band create the letters with their bodies. The result? A visually arresting intersection of dance, technology and direction." -Shareen Pathak

A LOVE LETTER TO JAPAN....


THE MAKING OF ALL IS NOT LOST


RELATED
All Is Not Lost lyrics
OK Go's Human Kaleidoscope, All Is Not Lost, And How It Translates Into Sales
Teressa Iezzi, Fast Company, 7/28/11
O.K. to Go Dance Crazy
Tony Gervino, NY Times Magazine 7/31/11

Quicklinks: Cute video about need for Google+, Spielburg on 3D, Tactile Pixels, Touch Screen Steering Wheel, and More

Here are a few interesting links  and a couple of videos.  Enjoy exploring!


Comic-Con 2011: Steven Spielberg Gives His Thoughts on 3D
Jason Barr, Collider, 7/22/11

Tactile Pixels Will Make It Easy To Read Braille on Touchscreens

Kwame Opam, Gizmodo, 7/9/11

Gestural Input on a Touch Screen Steering Wheel in the Media

Albrecht Schmidt, User Interface Engineering Blog, 7/17/11

Potential to improve some user experiences, using HTML 5
HCI 596 Course Blog, Iowa State University, 7/11/11


PBS Launches LearningMedia, a New Digital Repository for Educational Content
Audrey Watters, Hack Education, 6/27/11


Link to Microsoft Surface 2.0 SDK and Resources
Luis Cabrera, Surface Blog, 7/12/11


AI (Artificial Intelligence) Demonstrates Natural Learning, Applies New Skills To Civilization
Devin Coldewey, Tech Crunch, 7/13/11


21 Google+ Privacy Tips: the Ultimate Guide
Craid Kanalley, Huffington Post, 7/21/11


iPad K-12 Sales Outpace Mac Products
Ian Quillen, Education Week, 7/20/11


Wearable lab coat TV packs thousands of LEDs, heads for Burning Man
Zach Honig, Engaget, 7/13/11

(I'd like a job where I can do tech experiments, silly ones, too!)

JavaScript HTML5 iPad Multi-touch Game Controller "How-To" by Seb Lee-Delisle

I'm glad I decided to glance at Twitter today and find a tweet with a link to Seb LeeDesilse's Creatively Digital website.  If you are interested in learning more about HTML5, Canvas, the iPad, multi-touch, etc, the site might be worth taking your time to explore. Here is the link:
Multi-touch game controller in JavaScript HTML5 for iPad (Seb Lee-Delisle, Creatively Digital, 4/15/11)


Seb's post includes the following video, plus sample code:

About Seb Lee-Delisle: "Seb is a digital media consultant and founding partner at award-winning agency Plug-in Media. He specialises in programming creative visual effects and interfaces for games, physics, motion detection, 3D and visual effects (like particle systems). His work has pushed the boundaries of what is possible both on and off the web, and won a BAFTA for the Plug-in Media project Big and Small for the BBC."

"He lectures and runs training courses world-wide and speaks at conferences worldwide such as iDesign, FMX, FITC, Droidcon, Adobe MAX and many others. He blogs at sebleedelisle.com  and tweets at @seb_ly."


RELATED
Touching and Gesturing in the iPhone
nroberts, Sitepen, July 10, 2008

For more "how-two" information, check out Seb's tutorials and guides - it looks like his website is a treasure trove of information -  here are a couple of gems:
3D engine in 10 lines
HTML5 Canvas 3D Particles
HTML5 canvas sprite optimisation


Don't forget to listen to the "Creative Coding" podcasts, a collaboration between Seb Lee-Delisle and Iain Lobb: 
Podcast episode 6: openFrameworks, Adobe CS5.5, and multi-touch gaming

Thanks to Alpay Kasal for the tweet about this link!

Quick Link: Eight Inspirational Interactive HTML5 Sites, plus "how-to" links, via Innovative Interactivity (II)-Tracy Boyer

I'm moving up from HTML to HTML5, and I'm pretty sure that I'm not the only one in the world that is doing so... for that reason, I'm sharing a link to great HTML5 resources.


Enjoy exploring the HTML5 creations! 


Eight Inspirational Interactive HTML5 Sites
Tracy Boyer, Innovative Interactivity (II), 2/8/11  


For your convenience, I've borrowed a few links from Tracy's post:
HTML5 Gallery
12 Fun & Clever Examples of HTML5
10 Addictive Games That (ACTUALLY) Demonstrate The Power Of HTML5 Technology
HTML5 – Examples of interactive graphics, infographics and interactivity
Presenting an HTML5 Interactive Infographic

Mindy McAdam’s series over at Teaching Online Journalism, via Tracy Boyer:

Tips for HTML5, part 1

Tips for HTML5, part 2

Tips for HTML5, part 3: Tags we won’t see anymore

Tips for HTML5, part 4: New tags

Tips for HTML5, part 5: A closer look at selected tags

Tips for HTML5, part 6: A look at CSS3Video for HTML5: The latest update

If you are really serious about this topic, take a look at Dive into HTML5, by Mark Pilgrim.

State of Information Visualization, 2011 InfoVis in HTML5 "how-to", and more (Thanks to Robert Kosara)

Take a look at Robert' Kosara's recent post on his eagereyes blog:
 
The State of Information Visualization, 2011

In this post, Robert reviews of some of the important trends in information visualization in 2010, discusses the potential of HTML5 for creating information visualization experiences on the web, and makes a few predictions about the near future.  Robert is pretty sure that the world is ready for "truly interactive, browser-based visualization".  He notes that the Protovis Primers he shares on his website are quite popular.

Most of the following resources and links were taken from the eagereyes website:

Information Visualization, HTML5, and JavaScript Resources (more to come)
HTML5 and Visualization on the Web

Robert Kosara, eagereyes, 12/21/10

Canvas Tutorial (HTML element used to draw graphics using scripting)
HTML5 Canvas Cheat Sheet

Dive Into HTML5 Tutorial (canvas element)

HTML5 Games/Interactive Experiments  (Hakim El Hattab)

node.js: (How to run JavaScript on a server.)
JavaScript: The Key to In-Browser Visualization
Robert Kosara, eagereyes, 2/11/10
PROTOVIS
A Protovis Primer, Part 1
A Protovis Primer, Part 2
A Protovis Primer, Part 3
"Protovis is a very powerful visualization toolkit. Part of what makes it special is that it is written in JavaScript and runs in the browser without the need for any plugins. Its clever use of JavaScript's language features makes it very elegant, but it can also be confusing to people who are not familiar with functional programming concepts and the finer points of JavaScript." -Robert Kosara

The Year of InfoVis Theory

Robert Kosara, eagereyes, 3/10/10

Telling Stories with Data:  Using visualization to create narratives and engage audiences

VisWeek 2010

Embedding Information Visualization Within Visual Representation (pdf)

Caroline Ziemkiewicz and Robert Kosara

Thanks, Robert, for sharing these very useful resources!

Joy of Stats: Hans Rosling's information visualization show, plus more. Enjoy!

RELATED
GAPMINDER:
GAPMINDER World
Information Visualization

SOMEWHAT RELATED
HTML5 and Visualization on the Web
Robert Kosara, Eager Eyes, 12/21/2010