feat: add hand tracking and painting functionality using ml5.js handPose model

- Implemented hand tracking with real-time video capture - Added GUI controls for canvas background, keypoints, connections, and hand settings - Enabled painting with hand gestures, including pinch to draw and clear gesture - Configured rendering options for keypoints and connections - Introduced bounds visualization for detected hands
2025-10-05 02:00:01 -07:00
commit 4fbee579f2
5 changed files with 23445 additions and 0 deletions
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <title>handtracking</title>
+    <style>
+        body {
+            background-color: #1d1d1d;
+            width: 100%;
+            height: 100%;
+            overflow: scroll;
+            margin: 0;
+            padding: 0;
+        }
+
+        canvas {
+            padding: 0;
+            margin: 0;
+            border-color: #f00;
+            border-width: 1px;
+        }
+    </style>
+    <script src="./libraries/p5.min.js"></script>
+    <script src="./libraries/ml5.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/lil-gui@0.20"></script>
+</head>
+
+<body>
+    <script src="sketch.js"></script>
+</body>
+
+</html>