Uploaded October 2024 | Updated September 2026, 1 week ago
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: thecodingtrain.com/tracks/ml5js-beginners-guide/ml5/hand-pose
🚀 Watch this video ad-free on Nebula nebula.tv/videos/codingtrain-hand-pose-detection-with-ml5js
p5.js Web Editor Sketches:
🕹️ HandPose - Keypoints: editor.p5js.org/codingtrain/sketches/o5wnL6esQ
🕹️ HandPose - Painting: editor.p5js.org/codingtrain/sketches/LCEHJm6PA
🕹️ Simple painting: editor.p5js.org/codingtrain/sketches/3VcKxx_GY
🕹️ HandPose Painting - Stroke Weight: editor.p5js.org/codingtrain/sketches/-C3Og5Wzs
🕹️ HandPose Painting - Color: editor.p5js.org/codingtrain/sketches/InzaVXI-R
🕹️ HandPose - Thumbs up or Thumbs Down: editor.p5js.org/codingtrain/sketches/0_qPHtsF_
🕹️ HandPose - Particles: editor.p5js.org/codingtrain/sketches/t7l5pYDDI
🎥 Previous: youtu.be/T99fNXTUUaQ?list=PLRqwX-V7Uu6YPSwT06y_AEYTqIwbeam3y
🎥 Next: youtu.be/2h8VArJ3gnQ?list=PLRqwX-V7Uu6YPSwT06y_AEYTqIwbeam3y
🎥 All: youtube.com/playlist?list=PLRqwX-V7Uu6YPSwT06y_AEYTqIwbeam3y
References:
💻 ml5.js: ml5js.org
🏫 Introduction to ML for the Arts: github.com/ml5js/Intro-ML-Arts-IMA-F24
📺 Jack B. Du's YouTube channel: youtube.com/channel/UCUP34ETx7nvIbd4ypkR02hg
🎨 Jack B. Du's Instagram: 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: 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: thecodingtrain.com
👾 Share Your Creation! thecodingtrain.com/guides/passenger-showcase-guide
🚩 Suggest Topics: github.com/CodingTrain/Suggestion-Box
💡 GitHub: github.com/CodingTrain
💬 Discord: thecodingtrain.com/discord
💖 Membership: youtube.com/thecodingtrain/join
🛒 Store: standard.tv/codingtrain
🖋️ Twitter: twitter.com/thecodingtrain
📸 Instagram: instagram.com/the.coding.train
🎥 youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA
🔗 p5.js: p5js.org
🔗 p5.js Web Editor: editor.p5js.org
🔗 Processing: processing.org
📄 Code of Conduct: github.com/CodingTrain/Code-of-Conduct
This description was auto-generated. If you see a problem, please open an issue: github.com/CodingTrain/thecodingtrain.com/issues/new
#machinelearningml #webcam #posedetection #ml5js #handpose #ml5js #javascript
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: thecodingtrain.com/tracks/ml5js-beginners-guide/ml5/hand-pose
🚀 Watch this video ad-free on Nebula nebula.tv/videos/codingtrain-hand-pose-detection-with-ml5js
p5.js Web Editor Sketches:
🕹️ HandPose - Keypoints: editor.p5js.org/codingtrain/sketches/o5wnL6esQ
🕹️ HandPose - Painting: editor.p5js.org/codingtrain/sketches/LCEHJm6PA
🕹️ Simple painting: editor.p5js.org/codingtrain/sketches/3VcKxx_GY
🕹️ HandPose Painting - Stroke Weight: editor.p5js.org/codingtrain/sketches/-C3Og5Wzs
🕹️ HandPose Painting - Color: editor.p5js.org/codingtrain/sketches/InzaVXI-R
🕹️ HandPose - Thumbs up or Thumbs Down: editor.p5js.org/codingtrain/sketches/0_qPHtsF_
🕹️ HandPose - Particles: editor.p5js.org/codingtrain/sketches/t7l5pYDDI
🎥 Previous: youtu.be/T99fNXTUUaQ?list=PLRqwX-V7Uu6YPSwT06y_AEYTqIwbeam3y
🎥 Next: youtu.be/2h8VArJ3gnQ?list=PLRqwX-V7Uu6YPSwT06y_AEYTqIwbeam3y
🎥 All: youtube.com/playlist?list=PLRqwX-V7Uu6YPSwT06y_AEYTqIwbeam3y
References:
💻 ml5.js: ml5js.org
🏫 Introduction to ML for the Arts: github.com/ml5js/Intro-ML-Arts-IMA-F24
📺 Jack B. Du's YouTube channel: youtube.com/channel/UCUP34ETx7nvIbd4ypkR02hg
🎨 Jack B. Du's Instagram: 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: 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: thecodingtrain.com
👾 Share Your Creation! thecodingtrain.com/guides/passenger-showcase-guide
🚩 Suggest Topics: github.com/CodingTrain/Suggestion-Box
💡 GitHub: github.com/CodingTrain
💬 Discord: thecodingtrain.com/discord
💖 Membership: youtube.com/thecodingtrain/join
🛒 Store: standard.tv/codingtrain
🖋️ Twitter: twitter.com/thecodingtrain
📸 Instagram: instagram.com/the.coding.train
🎥 youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA
🔗 p5.js: p5js.org
🔗 p5.js Web Editor: editor.p5js.org
🔗 Processing: processing.org
📄 Code of Conduct: github.com/CodingTrain/Code-of-Conduct
This description was auto-generated. If you see a problem, please open an issue: github.com/CodingTrain/thecodingtrain.com/issues/new
#machinelearningml #webcam #posedetection #ml5js #handpose #ml5js #javascript
