Hand Pose Detection with ml5.js

Subscribers:
1,740,000
Published on ● Video Link: https://www.youtube.com/watch?v=vfNHdVbE-l4



Duration: 0:00
31,599 views
1,355


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 - Paintinghttps://editor.p5js.org/codingtrain/sketches/LCEHJm6PA..
🕹 ️ Simple paintinhttps://editor.p5js.org/codingtrain/sketches/3VcKxx_GY...
🕹 ️ HandPose Painting - Stroke Weighttps://editor.p5js.org/codingtrain/sketches/-C3Og5Wzss...
🕹 ️ HandPose Painting - Cohttps://editor.p5js.org/codingtrain/sketches/InzaVXI-R/s...
🕹 ️ HandPose - Thumbs up or Thumbs https://editor.p5js.org/codingtrain/sketches/0_qPHtsF_n/s...
🕹 ️ HandPose - Parthttps://editor.p5js.org/codingtrain/sketches/t7l5pYDDIin/s...

🎥 Previous:    • Pose Estimation with ml5.js  
🎥 Next:    • ml5.js 1.0 and Guest Conductor Patt Vira  
🎥 All:    • Beginners Guide to Machine Learning i...  

References:
💻 mhttps://ml5js.org/js.org/
🏫 Introduction to ML for thehttps://github.com/ml5js/Intro-ML-Arts-IMA-F24-Art...
📺 Jack B. Du's YouTube channel:    / @mycodingshow  
🎨 Jack B. Du's Insthttps://www.instagram.com/jackbdu/ckbdu  
💻 On-Device, Real-Time Hand Tracking with Medihttps://research.google/blog/on-device-real-time-hand-tracking-with-mediapipe/evic...
📄 3D Hand Pose with MediaPipe and TensorFlhttps://blog.tensorflow.org/2021/11/3D-handpose.html11/3...

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

🚂 Wehttps://thecodingtrain.com/in.com/
👾 Share Your Crehttps://thecodingtrain.com/guides/passenger-showcase-guide/pas...
🚩 Suggest Thttps://github.com/CodingTrain/Suggestion-Boxgges...
💡 Ghttps://github.com/CodingTrainngTrain
💬 Dihttps://thecodingtrain.com/discorddiscord
💖 Membein/join
🛒 Shttps://standard.tv/codingtraingtrain
🖋 ️ Twhttps://twitter.com/thecodingtraintrain  
📸 Insthttps://www.instagram.com/the.coding.train/train  

🎥    • Coding Challenges  
🎥    • Start learning here!  

🔗 https://p5js.org/5js.org
🔗 p5.js Web Ehttps://editor.p5js.org/js.org/
🔗 Procehttps://processing.org/ing.org

📄 Code of Cohttps://github.com/CodingTrain/Code-of-Conductde-o...

This description was auto-generated. If you see a problem, please open an https://github.com/CodingTrain/thecodingtrain.com/issues/newecod...

#machinelearningml #webcam #posedetection #ml5js #handpose #ml5js #javascript