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);
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.