ml5 Example

PoseNet example using p5.js

​

Modified based on Kyle McDonald's ml5 poseNet sketch:

https://editor.p5js.org/kylemcdonald/sketches/H1OoUd9h7

=== */

​

let video;

let poseNet;

let poses = [];

​

/*

See below link for complete list of available keypoints:

https://github.com/tensorflow/tfjs-models/tree/master/posenet#keypoints

*/

let keypointIndex = 0;

​

function setup() {

  createCanvas(640, 480);

  video = createCapture(VIDEO);

  video.size(width, height);

​

  // Create a new poseNet method with a single detection

  poseNet = ml5.poseNet(video, modelReady);

  // This sets up an event that fills the global variable "poses"

  // with an array every time new poses are detected

  poseNet.on('pose', function(results) {

    poses = results;

  });

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

  video.hide();

}

​

function modelReady() {

  console.log('model ready');

}

​

function draw() {

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

​

  // Loop through all the poses detected

  for (let i = 0; i < poses.length; i++) {

    // For each pose detected, loop through all the keypoints

    let pose = poses[i].pose;

    if (!pose) continue; // Check if pose exists, if not, skip to the next pose

    // Draw flowers on shoulders

    let shoulderLeft = pose.keypoints.find(k => k.part === 'leftShoulder');

    let shoulderRight = pose.keypoints.find(k => k.part === 'rightShoulder');

    if (shoulderLeft && shoulderRight) {

      drawFlower(shoulderLeft.position.x - 40, shoulderLeft.position.y - 40);

      drawFlower(shoulderRight.position.x - 40, shoulderRight.position.y - 40);

    }

    // Draw hat on face

    let nose = pose.keypoints.find(k => k.part === 'nose');

    if (nose) {

      drawHat(nose.position.x - 40, nose.position.y - 100);

    }

    //try changing to value of keypointIndex in line 29!

    let keypoints = pose.keypoints;

    if (keypoints && keypoints[keypointIndex]) {

      let xpos = keypoints[keypointIndex].position.x;

      let ypos = keypoints[keypointIndex].position.y;

      fill(255, 0, 0);

      ellipse(int(xpos), int(ypos), 50, 50);

    }

  }

}

​

function drawHat(x, y) {

  console.log("Drawing hat at:", x, y);

  // Hat base

  fill(0);

  rect(x - 30, y, 60, 40);

​

  // Hat top

  fill(100);

  triangle(x - 30, y, x + 30, y, x, y - 40);

}

​

function drawFlower(x, y) {

  console.log("Drawing flower at:", x, y);

  // Flower stem

  fill(0, 150, 0);

  rect(x - 2, y, 4, 60);

​

  // Flower petals

  fill(255, 0, 0);

  for (let i = 0; i < 8; i++) {

    let angle = i * TWO_PI / 8;

    let petalX = x + cos(angle) * 20;

    let petalY = y + sin(angle) * 20;

    ellipse(petalX, petalY, 20, 20);

  }

}

​

​