Assignment One Overview

Due: Monday, September 17th before class time.
Worth 16.5% of your course grade.

All assignments in this class will be emphasizing the theme of tangible interactive computing. We'll start small at first, and grow outward throughout the semester. :) With assignment1, we will begin with experimenting with tangible interactions on the mobile phone. Unlike a few years ago, modern mobile phones (and tablets) are flush with interesting sensors including accelerometers, gyroscopes, location-aware sensors (via WiFi localization algorithms and GPS), and, yes, even the front- and back-facing cameras and microphones. Such emergences create new types of interaction opportunities that extend beyond traditional touch interactions. For example,

What To Do

Whereas some of the examples above required native code running on the device to work, your assignment is to create a novel tangible interaction experience utilizing these sorts of sensors without programming any native code. That is, your assignment must rely solely on HTML5 + CSS + Javascript (and any other web compatible technologies). This is enabled by recent new specifications adopted by HTML4 (e.g., the W3C DeviceOrientation Spec). Note: it's OK if you use device-specific APIs that are only exposed on certain platforms (e.g., iOS only or Android only code) but you should not write any native code for these devices.

Here are some examples using the Device Orientation and Motion API:

Put simply, the requirements for this assignment are quite broad:
  • Do something novel/fun with mobile phone sensor APIs exposed via HTML5. Could be a game, a piece of digital art/music, an interesting visualization, etc.
  • Must be real-time interactive

Tools/Library Usage

You can use whatever dev tools you like and whatever libraries you like as long as you only produce HTML5, CSS, and Javascript code that can run on your target mobile platform. For example, PhoneGap is OK because it generates HTML, CSS, and Javascript; however, in contrast Sencha Touch is not OK because it requires its native application framework to be installed on the device beforehand. You must document the libraries you use in your two-page PDF report.

You should also include citations (with URLs) in your code via comments to all code that you borrowed from or extended from blogs, forums, open source, etc. If I find code that was copied and not appropriately cited, I will consider this a direct violation of the UMD Academic Integrity policy. You will not be penalized for re-using or re-appropriating cool things in this class, you will be penalized for not properly attributing them.

Assignment Deliverables

Assignment deliverables are due sometime before lecture begins (please consult the particular assignment for details). You will post your deliverables to the bottom of this Wiki page.
  • Utilize github to store and post your code. This should be publically viewable and accessable. You are welcome to use any license you like on the code itself (including no license at all--e.g., None). When you use other people's code, you must cite your source--even if it's just a blog post and a small snippet. I believe github provides academic accounts (for additional features, please check the website).
  • Post a two-page ACM formatted writeup to your webpage as a PDF. Please try your best to keep to two pages or less (with figures). Download the paper template here:

    Here are some examples using this template:
  • Upload a video demoing your submission to YouTube. You should include the link to the YouTube video in your PDF. I will create a YouTube playlist for each assignment containing each team's video.

Assignment Grading and Rubric

Most, if not all, assignments in this class will be graded on novelty, aesthetic, fun, creativity, technical sophistication, and engagement. All assignments (including the project) will be peer-reviewed by everyone in the class including me. Everyone, including me, will fill out the same feedback form. The feedback form will conclude with asking you to pick your favorite top two assignments based on the PDF and YouTube video (and, in some cases, in class presentation). The top two will be announced and receive a bonus.

Completed Assignments

This page is editable by all members of the class (once you login to wikispaces). If you cannot edit this page, please send me an email or post to Piazza for help. The format is as follows:

<Team Name/>

<Team member1 name, degree program/>
<Team member2 name, degree program/>

<Two or three sentences about project./>


Cheuk Yiu Ip - PHD Computer Science
Nick Gramsky - PHD Comuter Science

FanSense looks to help coordinate, encourage and track user participation of spectators in coordinated events at sporting events and concerts. Items like the wave and card stunts are tracked and signalled to users when they need to participate in the event. The accelerometer API helps track is users are complying or not and scores are kept.

Dream Machine

Adil Yalcin, Ph.D. Computer Science
Darren Smith, Masters of Computer Science

Dream machine is an online digital drum kit built as a proof of concept for making digital drum kits intuitive again by making notes triggered by motion like swinging a real drumstick.

Frogger for Accelerometer

Tansy Peplau, HCI masters
Rajan Zachariah, HCI masters

This game is meant to simulate the arcade game "Frogger" using the Accelerometer instead of arrows on a keyboard. Touching the blocks, or "cars", results in "death" as does running off screen.


Lee Stearns, Computer Science, masters
Cheng Fu, Geography, PhD

Headhunter is a 3D virtual reality game for the iPhone/iPad in which baseballs are flying at you from all directions. You control the game using only the device's orientation, aiming it at the balls to hit them away. The game becomes more difficult the longer you survive.


Allan Fong, CS PhD
Harish Vaidyanathan, HCIM

In this project, we tried to simulate conducting different instruments through a handheld mobile device, similar to how a conductor conducts an orchestra with a baton.

Where Is My State?

Preeti Bhargava, Computer Science, Ph.D
Kotaro Hara, Computer Science, Ph. D

We describe a mobile application, developed using the HTML5 Device Orientation API, to improve the geography skills of students and adult alike.

PacMan and The Crazy Snakes

Zahra Ashktorab, Human-Computer Interaction, Masters
Leyla Norooz, Human-Computer Interaction, Masters

In our project, we have recreated PacMan with a little device-motion twist. Instead of his usual adversaries, he must try to chase a red snake that moves randomly on the screen. However, when the phone is tilted to the left, more snakes with random colors are generated to distract the player of the game. The challenge is to find the red snake who is now camouflaged in a sea of multi-colored snakes.