by Ali Spittel (@aspittel)
Augmented reality (AR) is a direct or indirect live view of a physical, real-world environment whose elements are "augmented" by computer-generated perceptual information, ideally across multiple sensory modalities, including visual, auditory, haptic, somatosensory, and olfactory.

- Wikipedia

AR allows you to visualize the real world with more added to it, which is really cool.

I like art and code, and I want to show you that you can build AR apps too.

I wrote an article about re-creating SnapChat's filters using a JavaScript library called tracking.js almost two years ago.

  • Art
  • Games
  • Businesses
  • + More!


Pokemon Go


The tracking.js library brings different computer vision algorithms and techniques into the browser environment. By using modern HTML5 specifications, we enable you to do real-time color tracking, face detection and much more — all that with a lightweight core (~7 KB) and intuitive interface.

Let's look at the project...

And the code...

Tracking.js uses the Viola Jones algorithm: which focuses on facial detection. The algorithm focuses on a few facial features, for example:

The algorithm adds up the pixel values in a rectangle and compares them to the sum of the pixels in another rectangle in the image. Light rectangles are positive and dark ones are negative. It uses those differences to classify whether or not a rectangle contains a face.

AR in the browser!

Mozilla Mixed Reality

Face Detection API