My name is John Barton. I am a creative technologist with 14 years of experience in interactive. I spend my time exploring the intersection between the physical and digital realms. For the past two years as Interactive Director at Sub Rosa, I have held responsibility for the technology and user experience practices along with providing strategic guidance for clients. In this role, I also take a very hands-on approach designing and building interactive hardware and contributing application code for client projects. Prior to joining Sub Rosa, I held technology leadership positions as a software architect and vice president at large digital agencies including HUGE, Razorfish and Schematic. In those positions I serviced high-profile clients such as British Airways, Microsoft, JetBlue, ABC/Disney, Nokia, MTV, Target, SanDisk and many others. In addition to my technical background, I also have a strong creative background and was creative director and partner at a boutique advertising agency, where I led copywriting and creative for clients like ATI, Children’s Museum of Denver and the Denver Mayor’s Office. I have spoken at a variety of conferences such as Flash in the Can (FitC), RFID in Fashion at the Fashion Institute of Technology and taught classes in 3D capture and printing technologies. I've also received a bunch of awards for my work, but that's not really that important.

Speaking Engagement


Three.js / 3D Printing / Foursquare API / Ruby / MongoDB / Visualization

Given the amount of work I've done with 3D printing and MakerBot over the past 14 months, MakerBot extended an invitation to speak at their retail store. The topic of the presentation was open-ended, so rather than speak about what I've done in the past, I decided to up the ante and create something entirely new that I had been thinking about for a while. Despite what I have learned about 3D printing, my 3D design skills are still pretty lackluster. As a result, I wanted to see if I could use three.js to create visualizations that I could then print.

I first coded up a geospatial visualization of my Foursquare checkins using 2d indexing in MongoDB and Google Maps to create a sort of heatmap to ensure my data was sound. Then, using three.js, I transformed that data into a 3D visualization. The challenge came as I realized was that there aren't any exporters to go from three.js to an STL file, the lingua franca of the MakerBot. So, I wrote a JavaScript library to do exactly that in addition to creating an STL file viewer. Currently, I am in the process of cleaning up the source code and writing documentation. I plan on releasing it on GitHub shortly.

Open Source JavaScript Library


Reconnecting Websocket Library for Javascript

Recently, I was working on a project for an installation that required long-running connections between a kiosk-based web client and an Eventmachine websocket server. I realized that having to physically open up and reach inside the installation to restart the kiosk client if the connection failed would probably get old very quickly. To avoid this, I wrote the Recon library. Recon is a lightweight wrapper for the native JavaScript WebSocket object that reconnects to the websocket server should the connection be severed.


Target SXSW

NFC / Android / Arduino / Ruby / Sinatra / Redis / MongoDB / Eventmachine / WebSockets / Foursquare Push API

To coincide with the Target Retail Accelerator and Fast Company's Co.Labs partnership launch at SXSW, Target commissioned an installation in the Fast Company Grill. Guests checked into the location using Foursquare and with the help of a touchscreen card vending kiosk, were issues a personalized NFC card pre-loaded with 10 credits. They could then take their personalized cards and swipe them at the one of five custom-built video game cabinets.

The technology solution utilized the Foursquare Push API to push to a Redis pub/sub server which was then integrated into a real-time interface built using Ruby EventMachine, WebSockets and Sinatra. This application interfaced over low-level serial communication with the card dispenser hardware and an NFC reader to vend the cards. Each video game cabinet contained an NFC reader that communicated with a central database and then communicated with Arduino to add credits to the game. A small serial LCD was also integrated to display messages to users such as number of credits remaining.

Guests were invited to hack their cards by decoding the data encoded on the card and rewrite the data for bragging rights and Target gift cards. All the high scores, game metrics and hackers were displayed in real-time using WebSockets and CSS3 3D transformations to create a dynamic experience. The project was a tremendous success with even Dennis Crowley giving us a shout-out on Twitter.

iOS App / Physical Installation

TED / Defiance Need Want App

Ruby / Sinatra / MongoDB / Websockets / Eventmachine / iOS / Twitter + Facebook APIs

To celebrate the upcoming launch of the new show and video game Defiance, Syfy engaged in a sponsorship of the 2013 TED conference as a promotion. In conjunction with a large-scale installation that brings Defiance to life through physical set pieces emblematic of the show, a digital experience was created as well. Set in the Need Want bar from Defiance, the digital experience allowed users to enter their needs and wants into an iPad application and saved via a REST API to a database. These messages were then broadcast to two large LCD displays using a websocket connection to allow real-time display of interaction with the iPad app.



Ruby / Sinatra / MongoDB / Eventmachine / Redis / Twitter Firehose API / Responsive

To prepare for the launch of Kate Spade's new line, Saturday, a teaser site was commissioned to build brand awareness and social buzz prior to the launch of the e-commerce site. A fully responsive site was built to answer the question "Saturday is..." In addition to allow users to enter their answer, real-time Twitter Firehose API and Instagram data was integrated via Mass Relevance to aggregate hashtagged social media.


Nike Flyknit Collective

Ruby / Rails / MongoDB / Custom CMS

To complement on-the-ground installations to launch Nike's new line of Flyknit shoes, a Rails CMS was built to manage content, PDFs, video and images. Leaning on the flexibility offered by MongoDB, the site went from design to launch in just two weeks.

Physical Installation / Web App

Greenpoint / Sandy

Arduino / Bluetooth / Weather Meters / Ruby / Sinatra / Eventmachine / Websockets / MongoDB / Design

With Hurricane Sandy bearing down on the East Coast, I decided that if I was going to weather this storm out, I better have some data. With about 12 hours left prior to Sandy's landfall, I took out my soldering iron and created some Arduino hardware that I could link up with some weather meters that I had laying around. The Arduino app would send readings from the anemometer, wind vane, rainfall gauge, thermometer, barometer and light sensor to a computer I set up with an application built on the Ruby Serial library. Once receiving the data, that application persisted it to a local database and sent the data to Pusher. A separate web application was deployed with a Pusher client to allow anyone visiting the site to get real-time updates on the current hurricane conditions.

Physical Installation


Arduino / Java / CAD / 3D Printing

The most recent installation of the GE Garages was finally on home turf at Story in NYC. Rather than being housed in our usual shipping containers, we had the luxury of being indoors. However, that didn't make me soft. As a matter of fact, being surrounded by all those 9-foot windows, gave me an idea to use some of that glass as a canvas. Using an Arduino, a couple steppers motors with an Adafruit motor sheild, a bunch of parts from McMaster and 7 custom-designed parts printed on a Makerbot. This hardware was wired up with an application developed in Java that would take both vector and raster images, convert the drawings to Gcode and send them to the Arduino to be drawn on the window with erasable markers.


Nike+ Fuel API Client


Honestly, I just clicked on the "Agree to Terms and Conditions" when I created an account on the Nike+ site. I'm not totally certain what it said regarding creating software like this, since I didn't read that long stream of legalese. Given that, I went ahead and created this Fuel API proof-of-concept for Ruby. I was planning on turing this into a Gem and using it for a Nike project, but instead ended up interfacing with the hardware directly. So, if you have a Nike Fuel-generating device, and know how to get your access token and device ID, you can plug those into this app and get started with liberating your data.

Physical Installation


Arduino / Processing / Ruby / MongoDB / OSC / Eventmachine / Twitter Firehose API / Natural Language Processing

GE was looking for a centerpiece for the installation we were doing for them in London for the 2012 Olympics. The idea was to figure out a way to display the pulse of the Olympics in real-time. Taking inspiration from the same architectural LED lighting products GE used to light the Tower Bridge earlier in 2012 and marrying those up with Arduino to control their dimmer units the concept was born. Using the full Twitter Firehose API, tweets were filtered for relevance to the 2012 Olympics using hashtags and keywords. The tweets were then pipelined through a custom NLP routine to measure positive and negative sentiment. The results were mapped to two colors on the physical construct, which was constructed of 640 LED lighting strips controlled by OSC sent from the server to 8 Arduino microcontrollers. The overall dimensions of the Constellation were 32 feet x 16 feet x 20 feet. Over 10,000,000 tweets were visualized during the course of the 2012 Olympics.

Ruby Gem



After hearing about TED's API 50 program, where they were giving out API keys to 50 users, I knew that I had to get access. I wrote up a crazy proposal and then submitted it. Long after I had forgotten about my submission, I received word that it was accepted. I recognized that one of the first things I'd need for my project was a nice Ruby wrapper to interface with the TED API - so I wrote this Gem. TED are eventually going to open up public access to the API, so I released this as a Ruby Gem. It's written using Faraday for HTTP requests and Rspec for testing. Once I've completed the TED project, I will share the source code for that too, but in the meantime, what it does is secret.

Physical Installation

GE Garages

Strategy / Program Development / Teaching

Coming out of a research and strategy engagement with GE where the nature of innovation within the company was examined, the GE Garages program was created to bring advanced manufacturing to the people. Designed as a classroom, fabrication and electronics lab and housed in 6 custom recycled shipping containers, the program officially kicked-off at SXSW in 2012. Partnerships were formed with Techshop, Quirky, Sparkfun, Skillshare and Makerbot to support programming, non-stop workshops and talks ranging from basic soldering to advanced robotics and 3D printing. Aside from the formal workshops, the public was invited to experience 3D printers, CNC mills, laser cutters, injection molding, metalwork and welding all in a completely free, hands-on manner. In addition to overseeing much of the GE Garages program itself, building applications for digital signage and iPad signups, I also taught classes in how to create 3D models from digital photographs, 3D printing, basic Arduino and creating 3D structures from laser cut parts. The project has been an immense success, leading to additional installations in Houston at Rice University, San Francisco for Maker Faire, New York City at Story.


Levi's x Urban Outfitters Bike Shop

Photo Booth / Facebook App

During August and September 2011, the Levi's® Bike Shop traveled across America encouraging everyone to "get in the saddle." A custom photo booth experience allowed the tour staff to easily document participants and enable cyclists to proudly share their recently tuned bikes. The custom photo booth included an uploader application that I developed, enabling an automatic upload and display of photos to the Urban Outfitters Facebook Page. Integration with Facebook enabled users to "claim" themselves which displays their name and automatically posts the image to their account.


Levi's Photo Workshop

HTML5 / JavaScript / PHP / Multitouch / Photography

Following up the success of the Levi's® Print Shop in San Francisco, the Levi's® Photo Workshop was launched in the heart of Manhattan. To showcase content created in the Photo Workshop, a digital experience was created that aggregated photo and video content from Flickr and Vimeo online. To supplement the online experience, an HTML5 and JavaScript multitouch display was built to house a curated selection of Flickr photographs from the various collaborators on-site. A photo booth installation was also designed and built to facilitate traditional photo booth photographs in addition to digital capture. The digital captures were then curated and turned into a printed yearbook of those who participated.


Kiehl's 160th Anniversary

Video Booth / Photo Booth / iPad App / Arduino / Hardware Design / Facebook App

Very few retailers get the chance celebrate a 160th anniversary. When Kiehl's 160th rolled around, I built a number of in-store experiences for their original retail location on 3rd Avenue in NYC. A video booth was designed and built to allow customers to record an anniversary wish for Kiehl's using a touchscreen Flex app backed with an Amazon EC2 Flash Media Server for real-time recording. An internet-enabled photo booth allowed customers to create digital copies in addition to traditional photo booth prints. The videos and photos that were captured were aggregated on Facebook and customers that participated on-line and in-store were given special promotions.

To illustrate the rich history of the Kiehl's brand, and interactive experience was also build using purpose-built lighting components in a physical timeline installation. The lighting components were controlled via an iPad application that would light up a corresponding node on the wall according to what content was selected in the iPad interface.

Mobile Web Application

HTML5 Tablet App

PHP / Yii / JavaScript / Streaming Video / WebSockets / Web Services / Product Development

With the cost of tablets plummeting and internet access being primarily available via shared wireless networks, Brazilian, as well other Latino web users, have been adopting tablets en masse. Terra Networks, being the largest content portal in Latin America, decided to capitalize on this trend. I led the team that adapted existing content feeds from 20 different content management systems across the enterprise, wrote algorithms to adapt the content to forty view templates. In addition to text-based content, photo galleries, video streams, live narration and commenting for sports and breaking news were all layered into a rich, interactive experience in which the website behaved as a native app, utilizing dynamic transitions and never once performing a full page refresh.


FreshDirect iPhone App

Native iOS / J2EE / Spring / REST API / Product Development

Distilling a rich and complex shopping site down into a native app on a small screen presents numerous challenges for user experience and technology. Without an API to build upon, complex business rules had to be reverse engineered from Java source code in order to establish a Spring-based REST API to provide web services for the iPhone application. The iOS app translated many of the core features from the website to enable users to create new orders, add to existing orders, re-order items and schedule deliveries while maintaining a high degree of order customization that FreshDirect cutomers demand.

Project Type: Physical Installation
Year: 2010

Cannes Lions Touchscreen

Flex / Flash Remoting / .NET / RFID / FTIR Touch / Edge-Blending

Partnering with the Cannes Lions festival organizers, I led a team that designed and built a 12' by 5' multi-user, multi-touch wall to serve as the information and connection hub for the 2009 festival. The touchwall allowed festival delegates to explore 3D maps of Cannes and an expandable map of the festival hall. People could also send themselves emails about restaurants and bars in the surrounding area as well as directions from the venue. Along the top of the screen there was a visualization of the entire week's schedule. Each event was expandable into a event detail view and sharable via email. Additionally, a real-time indicator communicated which events were currently taking place. The touchwall also gave users the ability to connect with one another. User could search for other attendees by name, and then send an email request to exchange information. Or, if they were standing side-by-side, they could exchange contact details on the spot. Perhaps the most striking and innovative element of the touchwall was the use of RFID technology. By embedding RFID tags in the delegate badges, the wall was able to identify and authenticate users as they approached and offer them a personalized and unique experience alongside others. The overall specs for the wall were quite impressive with 6 projectors edge-blended for an overall resolution of 3840 x 1600. There were 3 IR cameras that were also edge-blended for the FTIR interface, 24 IR lasers and 4 RFID antennas. The interface was built in Flex 4 and utilized purpose-built .NET applications to triangulate RFID tags across the 4 antennas, provide real-time updates using Flash Remoting and provide a CMS platform.


OpenSkies Website

Java / J2EE / Web Services / Alfresco / Product Development

With the relaxation of rules regarding flights between the EU and US, British Airways decided to launch a new business-class only airline named after the agreement - OpenSkies. A challenging timeline of three months to go from identity development to site launch was imposed along further pressure of the website being the only outlet by which to purchase tickets. A full-featured commerce site was designed and built from the ground-up with a reservation system, online ticketing, seat selection, payment processing, user accounts, content management, security and all the other operational and legal intricacies that go into launching an startup airline.