Augmented Reality using Javascript

Neil Nand
2 min readAug 31, 2015

--

Demo

  1. Download this image to your phone: neilnand-access-bizcard.gif
  2. Scroll to “London Career Campaign” on neilnand.com using Chrome or Firefox on desktop
  3. Press Click here to Activate Webcam
  4. Show the neilnand-access-bizcard.gif image to the webcam

Source Code

The codebase has been ported from an old Flash library FLAR (Flash Augmented Reality)Toolkit and updated by Ilmari Heikkinen.

I’ve taken it a few steps further and wrapped the project within a Node/NPM and Express environment for easy use of examples and demo creation. I have added the following examples:

- Multiple ID Marker Demo
- Single ID Marker Demo
- Single Custom Marker Demo
- Inverted Biz Card Demo

A pattern generation app has also been included for creation of Custom Markers.

Backstory

This idea originally came to me during the heyday of Flash whilst working as a successful Flash developer in 2010.

I have this philosophy of ensuring anything I create has purpose. In this digital era business cards had became a formality and its reason for existence declining — without purpose.

I have this other issue of things being boring. I had my public facing portfolio, however I needed restricted access to certain projects — automatically you would think password protection — boring!

Augmented Reality created some hype since the introduction of the FLAR Toolkit on the Adobe Flash platform. Its uses were somewhat gimmicky and appeared on the occasional advertising campaign. However there is a deeper operation within Augmented Reality for it to work — image pattern matching. Bingo! Here’s our answer.

I created a pattern on my Business Cards that could be used to pattern match and unlock the restricted content on my website.

I’m from Australia and I wanted to kick-start a career in London. I didn’t want to send out the boring “hey can I have a job” emails. Capitalising on the reason to have my business cards, I Googled a few digital production agencies and found the names of their respective creative directors on LinkedIn. I now had a physical address and name to post (snail-mail) beautifully made “greeting cards” to my potential employers from Australia to drive even more curiosity.

I opened my email shortly after landing in London with job interviews lined up for the following week!

Greetings cards to digital advertising agencies in London

--

--

Neil Nand

Product focused Digital Creative, Technologist, Crypto Enthusiast — www.neilnand.com