let video;

let predictions = [];

​

function preload() {

    // Preload the handpose model

    handpose = ml5.handPose({ flipHorizontal: true }, modelReady);

}

​

function setup() {

    createCanvas(640, 480);

    // Create the video element

    video = createCapture(VIDEO);

    video.hide();

  handpose.detectStart(video, gotResults);

    textAlign(CENTER, CENTER);

}

​

function draw() {

    image(video, 0, 0, width, height);

    if (predictions.length > 0) {

        const thumbTip = predictions[0].thumb_tip;

        const indexTip = predictions[0].index_finger_tip;

        const d = dist(thumbTip.x, thumbTip.y, indexTip.x, indexTip.y);

​

        // Display a random digit when fingers are close enough

        if (d < 20) {

            fill(255, 0, 0);

            textSize(32);

            const randomDigit = int(random(10)); // Random digit between 0-9

            text(randomDigit, (thumbTip.x + indexTip.x) / 2, (thumbTip.y + indexTip.y) / 2);

        }

    }

}

​

function modelReady() {

    console.log('Model ready!');

    // Start detection with the video stream

}

​

function gotResults(results) {

    predictions = results;

    // Continue detection without needing to call detect again, detectStart handles looping

}

​