Creating face filters

November 1, 2017

I was really interested in creating face filters like those you can find on commonly used applications like snapchat or snow. I have always wondered how they can achieve those animated features and have it tracked on to your face. 


Prior to this, you would need to know how to set up a camera for camera detection on your p5.Js. To allow camera camera detection on your p5Js, you would need to insert this code in your sketch, 


// setup camera capture
  var videoInput = createCapture();

// determine the video size
  videoInput.size(400, 300);

//determine the position
  videoInput.position(0, 0);


I recently discovered an article regarding face tracker using a library called clmtracker.js which you can find it on this link . The library basically allows detection of the face with points that has already been created for you, allowing you to alter whatever you like. Before diving into the sketch, you would need to understand the different points that has been structured (see image below)


By using the if (statement) and allocating the desired point, you would be able to drop an image or any of your asset and assign it to any of the given points on the face. Lauren McCarthy has created a good example of this image detection, you may find her sketch here. In her sketch, she has created ellipses mapped to each of the points and using a slider to increase the size of the ellipses to further emphasise on the location of each points (see gif for example).


Once we have fully understand the logic behind the face recognition points, we could now begin to consider making our assets and plan to locate them according to the points given from the reference. In the spirit of halloween, I wanted to create face filter of an evil clown. I created my illustrations and save each images as png for me to upload it on to p5Js. 


 You may find my sketch here



Share on Facebook
Share on Twitter
Please reload

Featured Posts

HelloComputer (Final) - BreakUp Aid

October 25, 2018

Please reload

Recent Posts

February 1, 2019

December 11, 2018

November 6, 2018

October 23, 2018

Please reload

Follow Me
  • Facebook Basic Square
  • Twitter Basic Square
  • Google+ Basic Square