LevFeels – a behind the scenes look

In October a portion of the popcorn-js team went to the Open Video Conference. At the conference we presented two separate demos one – a collaborative effort with Universal Subtitles, and the other – a remake of the Kuleshov Effect.

Check out the Universal Subtitles demo:

  • view the demo
  • read about it from the developer’s perspective here
  • read about it from the filmmakers perspective here

Check out the Kuleshov remake:

  • view the demo
  • read about it from the developer’s perspective here

The Kuleshov remake incorporated many different technologies including: twitter search, Flickr search, HTML5 video audio, and jQuery. The basic idea is to allow people to change the emotion by tweeting #levfeels {and the emotion: sad/angry/happy}. The video, the audio, and the Flickr pictures will all change depending on the current emotion calculated via twitter search.

Twitter

We used jQuery’s $.getJSON function to search through the twitter api for the keyword lefFeels (http://search.twitter.com/search.json?q=lefFeels). This returns 15 most recent tweets from twitter. We verify that we have not received these tweets before (twitter will return the same tweets if no new ones were tweeted) and 1) calculate how many times sad, happy, or angry appeared 2) print the tweets on the screen. If no new tweets exist we use the setTimeout function to call the twitter function every 8 seconds. This is not ideal, ideally we should be able to stream the twitter feed so that the twitter function only executes when new tweets come along.

Flickr

We ensure Flickr start loading right at the beginning via addEventListener(‘DOMContentLoaded’, , function(){…}, false). To get the actual images we once again use the  jQuery’s $.getJSON function to search through the Flickr api in order to find photos with tags: sad, happy, and angry (http://api.flickr.com/services/feeds/photos_public.gne?tags=). Once we get about 5 images of each emotion we start playing the video. The reason we do this is because before we can display the actual images on the canvas, the images needs to be downloaded, which means if we try to display the image before it is downloaded it will not display. To get the right effect of the image fitting on the laptop screen we skew the image before putting it on the canvas.

HTML5 Video

We use 4 separate videos for this demo. Three of them are based on emotion sad, happy, angry. The fourth video (which we refer to as the middle) is of the laptop screen. If you look at the code you will notice that the video tags, although they are used in the code, are not actually visible on the page. We are using the canvas element to display the videos and the Flickr images.

Don’t like the way our code works?

All of our code is available on GitHub. Dont be shy fork the repo and lets see what you can do ;P.

 

View all of my blogs on popcorn-js
View all of my blogs

Advertisements

One thought on “LevFeels – a behind the scenes look

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s