Face Mesh Detection with ml5.js
About this lesson
In this video, I explore the FaceMesh model using ml5.js. I demonstrate how to track all 468 face landmark positions as well as texture map an image onto the triangular mesh with uv coordinates. Code: https://thecodingtrain.com/tracks/ml5js-beginners-guide/ml5/facemesh 🚀 Watch this video ad-free on Nebula https://nebula.tv/videos/codingtrain-facemesh-with-ml5js p5.js Web Editor Sketches: 🕹️ FaceMesh - Keypoints: https://editor.p5js.org/codingtrain/sketches/KHm9CI2RJ 🕹️ FaceMesh - Part: https://editor.p5js.org/codingtrain/sketches/HaGkT63qG 🕹️ FaceMesh - Custom List (Lips): https://editor.p5js.org/codingtrain/sketches/CYL9bQtvc 🕹️ FaceMesh - Centered Face: https://editor.p5js.org/codingtrain/sketches/DGEuFKf87 🕹️ FaceMesh - Triangles: https://editor.p5js.org/codingtrain/sketches/EjIrb89WY 🕹️ FaceMesh - Texture Map: https://editor.p5js.org/codingtrain/sketches/zUKp9n4MW 🕹️ FaceMesh - 3D: https://editor.p5js.org/codingtrain/sketches/zUKp9n4MW 🕹️ FaceMesh - Blow Bubbles: https://editor.p5js.org/codingtrain/sketches/Mf74RjP92 🕹️ FaceMesh - Stretch and Skew: https://editor.p5js.org/codingtrain/sketches/tS6bxPzmE 🎥 Previous: https://youtu.be/vfNHdVbE-l4?list=PLRqwX-V7Uu6YPSwT06y_AEYTqIwbeam3y 🎥 Next: https://youtu.be/2h8VArJ3gnQ?list=PLRqwX-V7Uu6YPSwT06y_AEYTqIwbeam3y 🎥 All: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6YPSwT06y_AEYTqIwbeam3y References: 💻 ml5.js: https://ml5js.org/ 🎹 Mouth Controlled Synteszier: https://jackbdu.com/blog/mouth-controlled-synthesizer/ 📄 Face and hand tracking in the browser with MediaPipe and TensorFlow.js: https://blog.tensorflow.org/2020/03/face-and-hand-tracking-in-browser-with-mediapipe-and-tensorflowjs.html 📄 Real-time Facial Surface Geometry from Monocular Video on Mobile GPUs: https://arxiv.org/pdf/1907.06724 📄 Face Mesh Model Card: https://drive.google.com/file/d/1VFC_wIpw4O7xBOiTgUldl79d9LA-LsnA/view ▵ Face Mesh UV Keypoints Map: https://developers.google.com/static/ml-kit/vision/face-mesh-detection/images
DeepCamp AI