Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

YouTube

Hand Pose Detection and Interactive Painting with ML5.js

Coding Train via YouTube

Overview

Explore hand pose detection and interactive painting in this 16-minute video tutorial that demonstrates how to implement the HandPose model using ml5.js. Learn the technical foundations of the model, track hand keypoints, and detect multiple hands including left/right identification. Build an interactive painting application that responds to hand gestures, utilizing createGraphics() layers and position tracking to create dynamic drawings. Master techniques for converting from BodyPose to HandPose, implementing gesture-based controls, and storing hand positions for continuous line drawing. Access multiple code examples including keypoint tracking, painting applications with varying stroke weights and colors, thumbs up/down detection, and particle effects. Perfect for developers interested in combining machine learning with creative coding through practical, hands-on demonstrations.

Syllabus

Introduction
Technical background of the model
Convert BodyPose to HandPose
Detecting more than one hand
Detecting handedness left or right
Creating a painting sketch with index and thumb
Add a layer using createGraphics
Storing previous hand position to draw a line
Exercise ideas for you!
Goodbye!

Taught by

The Coding Train

Reviews

Start your review of Hand Pose Detection and Interactive Painting with ML5.js

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.