Hands

Basic hand detection with ml5.js, via your webcam. ML models are loaded via a third party website.

This sketch needs permission to use your camera.

Source Code for this Sketch

// Based on https://docs.ml5js.org/#/reference/handpose

let handpose
let video
let hands = []

function preload() {
    handpose = ml5.handPose()
}

function setup() {
    createCanvas(640, 480, P2D, canvas);
    colorMode(HSL);
    angleMode(DEGREES);

    video = createCapture(VIDEO)
    // mirror video for selfie purposes
    video.flipped = true
    video.size(640, 480)
    // video.hide()

    handpose.detectStart(video, (e) => {
        hands = e
    })

    fill(0, 100, 50);
    noStroke();

}

function draw() {
    image(video, 0, 0, width, height)

    for (let i = 0; i < hands.length; i++) {
        let c = color(0)

        // Note: handedness seems to be flipped in the model.
        if (hands[i].handedness === "Left") {
            c = color(0, 100, 50)
        }
        if (hands[i].handedness === "Right") {
            c = color(240, 100, 50)
        }
        fill(c)

        let averageX = 0
        let countX = 0
        let averageY = 0
        let countY = 0

        for (let j = 0; j < hands[i].keypoints.length; j++) {
            let keypoint = hands[i].keypoints[j]

            // Identify specific digits
            // if (keypoint.name.indexOf("wrist") >= 0 ||
            //     keypoint.name.indexOf("thumb") >= 0) {
            //     continue
            // }

            circle(width - keypoint.x, keypoint.y, 10);

            averageX += (width - keypoint.x)
            averageY += (keypoint.y)
            countX++
            countY++
        }

        fill(50, 100, 50)
        circle(averageX / countX, averageY / countY, 20)
    }

}

You may use all or part of the p5 code seen on this page for your own creations, without restriction. Attribution is appreciated but not required.

This sketch also includes the following sources: p5common.js ml5.js . Sources are available under their respective licenses.

See all p5.js sketches