Drag and drop objects on canvas with your hand using ml5 and p5js
Learn how to use machine learning (ml5 Handpose) to detect hand poses to drag and drop an object on the canvas in p5.js. Learn how to make a basic VR procedure with a machine learning model that tracks 21 hand landmarks.
Timestamps:
00:00 Introduction
00:39 How to load ml5 library in JavaScript
01:33 Code for global variables
02:51 Code for setup function
04:19 Code for draw function
05:54 Code to draw position of ends of finger and thumb
06:08 What are the 21 hand landmarks?
06:22 How to get location predictions from the machine learning model to draw them
Resources:
ml5: https://ml5js.org/
mediapipe hands: https://google.github.io/mediapipe/so...
p5 web editor: https://editor.p5js.org/
The Coding Train: https://thecodingtrain.com/
