04_face

Presentation: Slides

Coding session:

• Face-api
• Face Mesh

Examples

• Face-api
  • FaceApi_Image_Landmarks
  • FaceApi_Video_Landmarks
• Face Mesh
  • Facemesh_Image
  • Facemesh_Webcam
  • Cat face filter, code

Resource

• ml5js - faceapi
• ml5js - faceMesh source
• tfjs - faceapi-js
• tfjs - faceMesh

Projects

• LipSync game using Face Mesh model
• Customizable AR face masks - Made with TensorFlow.js
• Cat filter, code

Assignment 4

Reading

• Face and hand tracking in the browser with MediaPipe and TensorFlow.js
• face-api.js — JavaScript API for Face Recognition in the Browser with tensorflow.js

Coding exercise

• https://editor.p5js.org/yining/sketches/u80fdnoxN (emoji face)
• https://editor.p5js.org/yining/sketches/oen4j13Ip (face mesh with lines)
• Mouth + particle system https://github.com/yining1023/100days/blob/master/day34-facetracking-mouth/sketch.js

Pick one of the models (Face api, Face mesh), and following the examples and ml5.js documentation experiment with controlling elements of a p5.js sketch (color, geometry, sound, text) with the output of the model. (You may also choose a ml5.js model not covered here if you like!)

Document your p5.js sketch in a blog post and add a link to the post / your p5 sketch on the homework wiki. In your blog post, include visual documentation such as a recorded screen capture / video / GIFs of your sketch.