Summary

Mapperino is your own personal map of the city, showing the parts of town you frequent, the parts you haven't explored yet, and the epic 50 mile bike ride you did that one weekend in an immersive 3D environment.

Demo

Portland (7MB) • San Francisco (14MB)

Overview

Mapperino is a project I'm currently incubating (hence the giant data files). It was born out of the desire to visualize everywhere I've ever wandered on my bike. Explore the map in 3D by scrolling with your trackpad.

Workout Backup

The data that feeds Mapperino has been collected from a variety of sources, including Strava, Endomondo, miCoach, runstar, Motion-X, and EveryTrail.

In the process of creating Mapperino, I've also built a handful of tools to enable users to back up their data from these providers. The initial prototype for Workout Backup was an Android app that queried the SQLite databases of Strava and Endomondo, generating both GPX files and a JSON feed for the Mapperino prototype. I'm currently working on a browser extension that listens in the background for new rides to be uploaded, backs them up, and posts them to Mapperino. It's like Time Machine, but for your ride history.

Summary

Cognicube is a puzzle game for tablets and mobile phones. It uses the same play mechanics as a Rubik's Cube, but presents the faces in two dimensions.

Download

Android Market • Nook Store • Amazon Appstore

Accolades

Cognicube HD was featured by Barnes and Noble at the launch of the Nook Tablet, and by Sony at the launches of the Tablet S and Tablet P.

Overview

Cognicube is my experiment in the mobile application marketplace. Frequently lauded for both its aesthetic polish and mental challenge, Cognicube has been played by nearly 9000 people.

Responsive Design to Fit Many Devices

I originally developed Cognicube as a phone game in the summer of 2010. The following year, I released Cognicube HD, which added support for tablets as well. The tablet edition utilizes a split screen design, with the original puzzle in the bottom pane and an MC Escher-style representation in the top. This design works well on both traditional tablets (like the Barnes and Noble's Nook Tablet) and on clamshells (like Sony's Tablet P). Both vendors featured Cognicube HD at the launch of their respective devices. In fact, Sony highlighted my game at CES.

Orientationless

When Cognicube was first released, Android was still finding its design footing. I wanted the game to feel at home on the platform, but also to go beyond the weak conventions that had been established so far. To that end, I made sure that the game feels natural no matter how the player decides to hold the device. The only time words are encountered is in a modal dialog that appears the first time you play the game or after you complete a puzzle. The dialog is always oriented to be easily read from the player's point-of-view. If the device is rotated while the dialog is open, the dialog will swing around to match the player's new perspective.

Summary

All artists care about is telling entertaining stories. To create a cartoon, they are currently stuck with clumsy paper-based storyboards, which are not only difficult to organize, share, and store, but are also vulnerable to accidental destruction. Story Stash frees them from paper clutter, enabling them to do what they do best - create enchanting stories.

Demo

I created a prototype of the service during my senior year at USC. To demonstrate its potential, I've prepared the following samples using artwork other artists have shared online. Neither artist has used or endorsed Story Stash. (sources: Heroes, Venture Bros)

Heroes demo • Venture Brothers demo

Accolades

Story Stash was awarded Top Undergraduate Business Plan, 2008 by the University of Southern California's Grief Center for Entrepreneurial Studies.

Design Overview

Story Stash was designed from the beginning to be used on a pen tablet. Multitouch was also explored (see eyePoke), but was not mature enough in 2007 to be included in the initial prototype.

I worked very closely with Dan Povenmire and Swampy Marsh, creators of the Disney Channel's Phineas and Ferb, to ensure that Story Stash's interface and feature set both enabled professional artists to be more productive.

Sketchpad Layout and Tools

The sketch panel in Story Stash is the same size as one on a traditional storyboard, while the note area is as wide as a Post-It note. The tools in-between them are digital representations of the most popular tools in the field: a pencil, marker, eraser, and sticky note. Paper storyboards are littered with sticky notes, which like layers in the digital world, enable artists to quickly try something new without having to erase the underlying artwork.

Color Well

With one seamless motion, the artist can select any desired color without fiddling with sliders. Simply tap the well, slide over the desired tone, and release. It's like having the entire color wheel built into your pen.

Sequences

To group a set of cards into a sequence, click the first card in the group, hold shift, and click the last. In a multitouch environment, this would be accomplished with the pinch gesture. Though not implemented in this prototype, sequences should be able to collapse into a single card in the card drawer. Not only would this make it easier to skim a storyboard, but it would also enables multiple authors to work contemporaneously on different acts without one's changes distracting the other.

Cloud Marking Menu

To avoid cluttering the workspace, file management tasks are consolidated into a marking menu, represented by the cloud icon. The menu is disabled in this demo.

Backwards Compatible with the Paper Workflow

These text fields represent dialogue, locale, action, and miscellaneous, the four standard text areas on a paper storyboard. Story Stash is designed to adapt to the user's context. Story Stash can be shared across the network, presented with a projector, or hung on the wall with sheets of paper.

Download

Fork on Google Code
Install from the Chrome Web Store

Summary

Marking Menu makes browsing the web more fluid by enabling you to navigate with just a flick of your wrist.

Overview

As a Wacom tablet user, I was a fan of the easyGestures extension for Firefox, but had long since grown tired of Firefox's tendency to leak memory. When Chrome added its extensions API, I decided to develop a gestures extension as a weekend project, and Marking Menu was born.

Marking Menu was exclusively available for Chrome for the first couple years of its existence. In the summer of 2011, I decided to give Safari another try as my default browser, and I brought Marking Menu along for the ride. At the same time, I open-sourced the extension. The same codebase supports both Chrome and Safari, through a small abstraction layer that provides implementations of the Chrome APIs I relied on in Safari. You can explore for yourself at the Marking Menu Google Code project.

Summary

360video uses a pixel shader to remap any video recorded with the 0-360 Panoramic Optic into an equirectangular viewport in real time. It is comprised of two pieces. The 360video Unwrapper Studio allows anyone to easily create a 360° video that can be embedded into a web page with the 360video Player. Because the desktop application uses AIR and the embeddable player uses Flash, both can share the PixelBender shader.

Demo

360video Sample

Overview

The 360video Unwrapper Studio is designed to create 360° videos as quickly as possible. Creating a 360video is as simple as dragging a video into the Unwrapper Studio. The tool automatically creates a Street-View-style video virtual tour ready to be embedded online. Videographers can crop, color correct, and sharpen the video by applying additional real-time filters without leaving the Unwrapper.

Automatic Calibration

The Unwrapper Studio algorithmically detects the edges of a wrapped 360video donut and crops the video accordingly. With no user intervention, a source file is unwrapped the instant it is added to a 360video scene.

Drag-In, Drag-Out

Well-integrated with the surrounding system, the 360video Unwrapper Studio plays nicely with other applications. To add a new shot to a scene, the user simply drags the source media from the camera into the Studio. When the scene is completed, it's dragged from the Unwrapper Studio into an HTML file. An embed tag will be generated and inserted into the page's markup.

Easy Uploading

The files making up a 360scene are bundled into a package, which appears as a single file on the user's computer but as its constituent parts on a web server. To post a 360video online, all the user has to do is drag the 360scene package into an FTP client.

Summary

Restaurants spend thousands of dollars on advertising to bring new customers in the door, while a single diner's disappointing experience can haunt them for years as an online review. I'm a Regular gives patrons an opportunity to engage directly with the restaurant owner before resorting to venting their frustration on Yelp. It also incentivizes occasional diners to return more frequently.

Demo

El Cholo survey

Overview

At the end of 2008, I was chatting with the proprietor of a restaurant marketing company called Insight Dining. Insight Dining provides diners with the opportunity to complete a brief survey at the end of their meals, in exchange for a free appetizer the next time they come in. The business model was well-received by restaurants, but the survey system he was using left much to be desired.

I'm a Regular emerged from this conversation to help companies like Insight Dining. It's a white-label survey system with a very user-friendly design and a client-facing dashboard that allows restaurant owners to see how each of their locations are treating their customers.

When I started building I'm a Regular, the ink on the HTML5 specification was still drying. It included many useful enhancements to HTML forms that had not yet been implemented by the browsers. Rather than design proprietary APIs for the enhanced functionality I needed, I implemented the ones described by the new spec and wrote polyfills to bring support for things like form validation to existing browsers.

Because I'm a Regular was one of the first sites to implement the HTML5 forms API, it has been a fertile testing ground for browser implementations of the spec. To that end, I have identified, written reductions for, and successfully had fixed half a dozen WebKit bugs.

Summary

eyePoke is an open-source multitouch event dispatcher for the Flash platform. It uses a webcam to watch an FTIR table for lit fingers, which are mapped to TouchEvents in Flash. Because TouchEvents extend MouseEvents; taps, clicks, and drags can all be handled by the same code regardless of which input method the user prefers.

Overview

In the summer of 2007, I was interested in adding multitouch interaction to Story Stash, but was unable to find a straight-forward way to do so. There was not yet a standard way to implement multitouch in Mac OS, Windows, or Flash; a few open-source libraries existed, but they all required running a separate application in the background and were wholly incompatible with the MouseEvent API already present in ActionScript.

Inspired by Jeff Han's TED Talk and the experimentation of the homebrew multitouch community, I read patents voraciously, learned about different methods that had been previously used to enable multitouch, and studied the physics behind them. I built a multitouch table using the FTIR phenomenon and set to work taking advantage of the device in Flash.

During my research, I discovered NUI Group, a community of other enthusiasts investigating natural user interfaces. Like many of my peers, at the time I had a limited background in computer programming but was fascinated by the potential of this new paradigm. I spent many hours in forums and chat rooms learning object-oriented programming from more experienced community members. Ultimately, I became a NUI Group administrator, guiding others on their journeys into touchscreen tables, FTIR, and ActionScript 3 programming.

eyePoke was praised for both its speed and its simplicity. Before eyePoke, other NUI Group developers doubted that a performant computer vision library could be written in a scripting language; they were excited and impressed to be shown otherwise.

I was drawn to the multitouch community not only because I was fond of the concept of tangible information, but because the researchers were able to create such amazing things through clever applications of otherwise simple technology. They gave people superpowers using a camera, a sheet of acrylic, and a handful of LEDs. I continue to be inspired by their work, but quickly realized that I simply didn't have the resources to create both a digital storyboarding system and a multitouch framework in my spare time. Furthermore, I expected technology vendors like Apple and Adobe to create more generic frameworks to enable multitouch that would make eyePoke obsolete. eyePoke was put on hiatus just a few months after it started, but its source code is still available for others to study:

eyePoke project on RIA Forge

Note: eyePoke served as my introduction to both ActionScript 3 and object-oriented programming in general. I've learned a lot in the years since. Please don't view this as a code sample.