annotatAR lo-fi augmented reality for the mobile web

Week 1 Summer Progress

In which our hero recounts the details of this summer’s work….

User interaction paradigm

annotatAR was inspired by a project I worked on in Fall 2014, Notes from El Saniyya. As part of DocShop at metaLab, I worked with Egyptian artist Lara Baladi to create a prototype of a living timeline of the Arab Spring. The Notes… event was highly participatory and we wondered what the next steps for engaging with a multi-media archive might be like.

You walk into a gallery space, with a curved wall with a huge timeline, each point on the timeline is an event in the Arab Spring / Tahrir Square 21 days. you want to add your own comment to the timeline, reacting to something on the timeline that triggered a memory or emotion - given any possible technology or material, how would you leave a message?

This is motivation for utilizing an augmented reality platform, and Twitter as a common social interface.

Meteor

The major accomplishment achieved this summer was getting started with Meteor.js. After reading docs and going through an example project tutorial, I was convinced that this was the technology on which I should build annotatAR. What first drew me to Meteor is the ability to code everything in Javascript, the active community, and the well-designed forward-looking codebase. I sat with a friend for an informational session to learn about how to utilize asynchronous external requests in Meteor, through fibers and Meteor.bindEnvironment. I’m starting to see even more value in how Meteor encourages code modularization, which may be quite helpful as the project develops.

Alpha site

With my newly acquired knowledge of Meteor, I built a test application called truthtweets, which connects to the Twitter Firehose API and overlays tweet texts that utilize the hashtag #truth onto a video stream from getUserMedia element. Voilà!

truthtweets app

Next directions

In the short term, the mobile application has a number of refinements to be achieved:

  • twitter api config file - untracked (not shared on github)

    done! - now using settings.json

  • resize navigator to fit device screen
  • use accelerometer data to detect motion and update tweet position
  • turn the stream on and display new tweets
  • change alpha based on tweet createdAt
  • deploy to meteor cloud or other web server
  • what if tweets became colored to reflect the background video feed? - lexigraph

Looking ahead this month

My first project milestone will be next week, when I deploy a beta version of the application on a live server and test it at the New York City Internet Yami-Ichi event by giving the URL out to a (small) number of attendees. This early-stage test will be crucial in refining the user interactions and aesthetics. In addition to the application itself, I will design a brief Google forms survey to collect UX feedback.