Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation.

For the best experience please use the latest Chrome, Safari or Firefox browser.

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

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

Link

Link

Link

Link

Pokemon Go

Link

Link

Link

Link

clmtrackr is a javascript library for fitting facial models to faces in videos or images. It currently is an implementation of constrained local models fitted by regularized landmark mean-shift, as described in Jason M. Saragih's paper. clmtrackr tracks a face and outputs the coordinate positions of the face model as an array.

Link

headtrackr is a javascript library for real-time face tracking and head tracking, tracking the position of a users head in relation to the computer screen, via a web camera and the webRTC/getUserMedia standard.

Link

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.

I saw a couple articles about facial recognition in Python and I wanted to see if this data-science-y technology could be easily adapted to the front-end of a project. I'm also interested in the intersection of art and code, and augmented reality seems like a really interesting medium for that.

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.

@aspittel

/in/aspittel

alispit.tel

@ali_writes_code

aspittel