Beginners Guide to Machine Learning in JavaScript - Face Mesh Detection with ml5.js

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/uv_unwrap_full.png 📄 Destructuring Assignment: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment ☁️ Clouds From Plane Window: https://en.wikipedia.org/wiki/File:Cloud_From_Plane_Window.jpg Videos: 🎥 https://youtu.be/FlBRSIz5AcQ 🚂 https://youtu.be/nMUMZ5YRxHI Related Coding Challenges: 🚂 https://youtu.be/Bxdt6T_1qgc 🚂 https://youtu.be/JunJzIe0hEo Timestamps: 0:00 Introduction 1:15 Technical background for the model 2:30 Related projects and inspiration. 3:01 Adapting handpose example to facemesh. 5:29 Keypoints and parts of the facemesh. 11:28 Face bounding box. 13:36 What is a mesh? Rendering the triangles 21:19 Texturing mapping with UV coordinates 30:48 FaceMesh in 3D 31:10 Goodbye! Editing by Mathieu Blanchette Animations by Jason Heglund Music from Epidemic Sound 🚂 Website: https://thecodingtrain.com/ 👾 Share Your Creation! https://thecodingtrain.com/guides/passenger-showcase-guide 🚩 Suggest Topics: https://github.com/CodingTrain/Suggestion-Box 💡 GitHub: https://github.com/CodingTrain 💬 Discord: https://thecodingtrain.com/discord 💖 Membership: http://youtube.com/thecodingtrain/join 🛒 Store: https://standard.tv/codingtrain 🖋️ Twitter: https://twitter.com/thecodingtrain 📸 Instagram: https://www.instagram.com/the.coding.train/ 🎥 https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH 🎥 https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA 🔗 p5.js: https://p5js.org 🔗 p5.js Web Editor: https://editor.p5js.org/ 🔗 Processing: https://processing.org 📄 Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct This description was auto-generated. If you see a problem, please open an issue: https://github.com/CodingTrain/thecodingtrain.com/issues/new #machinelearningml #facemesh #ml5js #texture #uvcoordinates #ml5js #javascript