🚀

7:1 Using ML5js BodyPose the easy way

Getting started with ML5js does require understanding arrays and objects. It will also require knowing conditional statements work and loops. But if you're not there yet, here's a easy version to get started.

Easy ML5js BodyPose

This sketch does the hard work of setting up PoseNet and checking for poses for you. Have a look at the sketch here:
https://editor.p5js.org/amcc/sketches/ouGbq7DOV

You will need to open this in a new window for it to work. You'll see if you try you get "permission denied".*

In the sketch here you can see there's a easyBodyPose.js file included which does the hard work for you. You don't need to touch it - its included in the html already, just write your code in sketch.js as normal.

*When using a webcam there are special permissions the browser needs. In fact if you want to go further with this and make your own webpage with this example you'll have to make sure its on a https (secure) webpage because of this.

https://editor.p5js.org/amcc/sketches/ouGbq7DOV

Easy ML5js BodyPose

Make sure you're logged into the p5js editor and duplicate the sketch in the link above.

This sketch already works with your webcam, you can also use it with an image if you prefer. There's a lot of comments in the top of the sketch.js file to help you.

Lets look at the examples in the code for how to place a circle at a point on the body.

We have a variable called person which allows you access every body part BodyPose detects.

For instance this is all you need to do to place a circle on your nose:

circle(person.nose.x, person.nose.y, 50);

To see all the body parts run this code (you can use the console below the sketch, but its much easier to use the console in your browser to open up and see all the properties - in Chrome this is View > Developer menu, but the comments at the bottom of the sketch also list all the parts you can use): 

console.log(person)

Each body part has x, i and confidence available to use. Its very easy to use x and y to position a p5 shape for instance.

This allows you to choose whether to display a body part depending on the confidence. This is a number from 0 (not at all confident) to 1 (very confident) depending on how well PoseNet can see that part of the body.

Lets say you wanted to place a square on your right wrist, you would do this:

square(person.rightWrist.x, person.rightWrist.y, 50);

If you only wanted to draw that square when PoseNet was confident that it could see the right wrist you could do this:

  if(person.rightWrist.confidence > 0.7){
    square(person.rightWrist.x, person.rightWrist.y, 50);
  }

How to automatically draw all points on a body

We have a variable called keypoints available to use. This will have x and y positions for every detected point on the body. To automatically draw all of these we can use a loop. There's lots of ways of looping, heres a quick one:

keypoints.forEach((keypoint) => {
    circle(keypoint.position.x, keypoint.position.y, 10)
  });

You can see this example in the code - feel free to change it, or use a different kind of loop if you feel more comfortable. For instance this does exactly the same thing as above:

for (let i = 0; i < keypoints.length; i++) {
    circle(keypoints[i].position.x, keypoints[i].position.y, 10);
}

Why use this instead of the ML5JS BodyPose examples

There are great p5js editor examples on the ML here:
https://ml5js.org/

It is a very good idea to look at them and understand how they work. In fact the next page goes through exactly that.

However seeing as ML5JS has already hidden a lot the complexity of the machine learning model, why not go even further and have a super quick way of playing with BodyPose as a beginner. Its a lot of fun and hopefully you'll be excited to play more.

To move on to the next area it is probably a good idea to scrub up on:

Once you've done that you'll be well place to have fun in the next section.