added uwu detector

2025-10-05 03:34:43 -07:00
parent 4fbee579f2
commit cebf9b2d6b
2 changed files with 76 additions and 0 deletions
@@ -0,0 +1,35 @@
 <!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>
    <h1 style="color: white;" id="detector">No uwu detected</h1>
    <h2 id="debug"></h2>
 </body>
 </html>
@@ -0,0 +1,41 @@
 let video;
 let handPose;
 let hands = [];
 function preload() {
    handPose = ml5.handPose({ flipped: true });
 }
 function setup() {
    noCanvas();
    video = createCapture({
        video: {
        },
        audio: false,
        flipped: true,
    });
    handPose.detectStart(video, (results) => { hands = results; });
    video.hide();
 }
 function draw() {
    let fDist = null;
    if (hands.length == 2) {
        let leftHand = hands[0];
        let rightHand = hands[1];
        fDist = dist(
            leftHand.index_finger_tip.x, leftHand.index_finger_tip.y,
            rightHand.index_finger_tip.x, rightHand.index_finger_tip.y
        );
        if (fDist < 50 && leftHand.thumb_tip.y < leftHand.wrist.y && rightHand.thumb_tip.y < rightHand.wrist.y) {
            detector.innerText = "uwu\n👉👈";
        } else {
            detector.innerText = "No uwu detected";
        }
    }
    // debug.innerText = `Hands detected: ${hands.length}\ndistance: ${hands.length == 2 ? fDist : "N/A"}`;
 }
 const clamp = (min, num, max) => Math.min(Math.max(num, min), max);