Beginners Guide to Machine Learning in JavaScript - Hand Pose Detection with ml5.js

In this video, I explore the HandPose model using ml5.js. I'll demonstrate how to track hand keypoints and create an interactive painting sketch using gestures. Code: https://thecodingtrain.com/tracks/ml5js-beginners-guide/ml5/hand-pose 🚀 Watch this video ad-free on Nebula https://nebula.tv/videos/codingtrain-hand-pose-detection-with-ml5js p5.js Web Editor Sketches: 🕹️ HandPose - Keypoints: https://editor.p5js.org/codingtrain/sketches/o5wnL6esQ 🕹️ HandPose - Painting: https://editor.p5js.org/codingtrain/sketches/LCEHJm6PA 🕹️ Simple painting: https://editor.p5js.org/codingtrain/sketches/3VcKxx_GY 🕹️ HandPose Painting - Stroke Weight: https://editor.p5js.org/codingtrain/sketches/-C3Og5Wzs 🕹️ HandPose Painting - Color: https://editor.p5js.org/codingtrain/sketches/InzaVXI-R 🕹️ HandPose - Thumbs up or Thumbs Down: https://editor.p5js.org/codingtrain/sketches/0_qPHtsF_ 🕹️ HandPose - Particles: https://editor.p5js.org/codingtrain/sketches/t7l5pYDDI 🎥 Previous: https://youtu.be/T99fNXTUUaQ?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/ 🏫 Introduction to ML for the Arts: https://github.com/ml5js/Intro-ML-Arts-IMA-F24 📺 Jack B. Du's YouTube channel: https://www.youtube.com/channel/UCUP34ETx7nvIbd4ypkR02hg 🎨 Jack B. Du's Instagram: https://www.instagram.com/jackbdu/ 💻 On-Device, Real-Time Hand Tracking with MediaPipe: https://research.google/blog/on-device-real-time-hand-tracking-with-mediapipe/ 📄 3D Hand Pose with MediaPipe and TensorFlow.js: https://blog.tensorflow.org/2021/11/3D-handpose.html Timestamps: 0:00 Introduction 1:23 Technical background of the model 3:52 Convert BodyPose to HandPose 5:54 Detecting more than one hand 6:14 Detecting handedness (left or right) 6:51 Creating a painting sketch with index and thumb 10:19 Add a layer using createGraphics() 12:40 Storing previous hand position to draw a line 14:17 Exercise ideas for you! 15:27 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 #webcam #posedetection #ml5js #handpose #ml5js #javascript