laugh is ON|OFF
by Jieun Oh
https://www.stanford.edu/~jieun5/CS193C/project/laugh-is-onoff.html
CS193C Final Project, Summer 2011
Collaboration, Resources, and Outside Support
I worked by myself for this project, and did not receive help from anyone aside from web
resources. I had to look through the documentations and sample code for Google Earth API and
YouTube API chromeless player. Here are the sites from which sample codes were taken:

http://code.google.com/apis/ajax/playground/?exp=earth#hello,_earth

http://code.google.com/apis/youtube/youtube_player_demo.html

http://code.google.com/apis/ajax/playground/?exp=youtube#simple_embed
Videos are taken from YouTube, and the red push-button image was taken from
http://www.psdgraphics.com/psd/3d-red-push-button/. Sample playlist on laughter with location
data was compiled by hand using a Google Maps + YouTube mashup found in
http://www.jotpix.com/Map.aspx. No special web development tools were used; I developed using
Fraise on my Mac.
Project Objectives
My goal was to create an interactive web application to create an interface to collect data
from users, in the spirit of games with a purpose1 (“GWAP”) -- like the ESP Game or Google Image
Labeler. As a student in computer music, I am interested in how social/mobile technology facilitates
self-expression (through sound), and one instance of such phenomenon is through laughter. In order
to collect sounds of laughter, I created an interface through which users can annotate when laughter
occurs in video clips.
The project does not have the server-end implemented; the data people input are not
persistent at the moment, and the data from “partner” is being simulated (faked). I wanted to focus
on the client-side interactions, to make the interface clean and fun-to-use (such that people are
willing to spend time annotating videos, disguised as a game).
How to Play
For each video, hold down mouse on the red button based on your current goal: if the
current goal is laugh-is-ON, then hold down whenever you hear laughter; if the current goal is laughis-OFF, then hold down whenever you do not hear laughter. Your partner has the opposite goal as
you, and you will be awarded points for the duration of mouse-down that did not overlap with your
partner's. Continue until your power runs out or until the last video in the playlist.
1
http://www.gwap.com
Interesting Features
1. navigator.geolocation
User’s location is queried using HTML5’s navigator.geolocation. Geographical
location of the user, the partner (simulated using random number to be somewhere within
the US, but to be fetched from a server database in the future), and the laugh-er in video
(available through YouTube Data API) are represented as red, blue, and green placemarks,
respectively, on Google Earth. As we move onto the next video, the camera on Google Earth
updates to show the laugh-er location.
2. <canvas>
HTML5’s <canvas> element is used to create real-time visualization of the user’s and
partner’s laughter annotations. Once a video starts playing, the user’s canvas (denoted by
red border) gets filled in while the mouse is held down on the push button, provided that the
user has not used up the power (100 seconds). The partner’s canvas (denoted by blue
border) gets filled in based on the data fetched from server (for this project, simulated using
hard-coded array of time-stamps representing mouse-down events). In the future closedloop design of the system with the server-end implemented, user’s time-stamped
mousedown events, stored in a Javascript Array object, are to be sent to the server, and acts
as a “partner” data for a future user. (If the partner’s annotation was for laugh-OFF, then the
user will be asked to press the button for laugh-ON, and vice-versa.)
3. window.setInterval
The function updatePowerScoreCanvas() is called every 10ms using
window.setInterval to quickly update current score and remaining power, and to
visualize them along with the canvas annotations. In addition, Javascript is heavily used to
manipulate DOM based on the game state.
Browser Compatibility (IMPORTANT!)
Code was tested on Firefox 5.0. (Google Earth Plugin—ironically—behaves unpredictably
on Chrome…) Latest versions of modern browser are necessary, as this application relies on various
HTML5 features.
You will need to install Google Earth Plugin, if you do not already have one.
Allow the browser to obtain your location, as it is used to load the Google Earth with
locations of you, your partner, and the laugh-er in video.