let poses = [];

​

function setup() {

    createCanvas(640, 480);

    video = createCapture(VIDEO);

    video.size(width, height);

​

    const poseNet = ml5.poseNet(video, {

        flipHorizontal: true

    });

​

    poseNet.on("pose", (newPoses) => {

        poses = newPoses;

    });

​

    // Hide the video element, and just show the canvas

    video.hide();

}

​

function draw() {

    push();

    translate(video.width, 0);

    scale(-1, 1);

    image(video, 0, 0);

    pop();

​

    drawKeypoints(poses);

    drawSkeleton(poses);

}

​

function drawKeypoints(poses) {

    for (let pose of poses) {

        for (let keypoint of pose.pose.keypoints) {

            if (keypoint.score > 0.2) {

                 fill(20, 255, 400);

                noStroke();

                 ellipse(keypoint.position.x, keypoint.position.y, 10, 10);

                 fill( 255);

                 ellipse(keypoint.position.x, keypoint.position.y, 5, 5);

                textSize(40);

                textAlign(CENTER);

                text('💗 ',keypoint.position.x, keypoint.position.y);

            }

        }

    }

}

​

function drawSkeleton(poses) {

    for (let pose of poses) {

        for (let skeleton of pose.skeleton) {

            let p1 = skeleton[0];

            let p2 = skeleton[1];

            stroke(255, 0, 0);

            line(p1.position.x, p1.position.y, p2.position.x, p2.position.y);

        }

    }

}