How to use JavaScript to detect faces and apply filters

Its been really fun to work on this project and I hope you enjoy it too.

This is very important when were building the filters.

But enough theory, lets start working on something cool.

What are we building?

Here is the demo of the app on codepen.

It may not be perfect but it looks amazing.

Now, lets break the code down and explain what we are doing.

Similarly to some game engines.

Heres what it looks like:

As it’s possible for you to tell, its very simple.

Here things get a bit more interesting as its in here where we load the UI.

We will break down the code executed in this event into four parts.

After we know the dimensions for our canvas, we can create one with the P5 functioncreateCanvasas shown next.

Fortunately, P5 makes it very easy to do so with thevideoCapturefunction.

The tracker needs to be set up once for a given video source.

In our case thedrawfunction will be very simple, pushing the complexity into each filter definition.

Building filters can be both a easy or a very complex task.

It will depend on what the filter is supposed to do.

To do that, we first verify our faceTracker object actually detected a face by usingfaceTraker.getCurrentPosition().

There are a few considerations though that we did not cover in this tutorial.

For example, what happens if the face is not straight to the camera?

How do we distort our filters so that they follow the curvature of the face?

Or what if I want to add 3D objects instead of 2D filters?

This article was originally published onLive Code StreambyJuan Cruz Martinez, founder and publisher of Live Code Stream.