qilin-test

// Body tracking example using ml5-next-gen.

// Note: May take a moment to load. 

// Originally from https://editor.p5js.org/ml5/sketches/OukJYAJAb

// Requires: https://unpkg.com/ml5@0.20.0-alpha.3/dist/ml5.js

​

let myWebcam;

let myBodyTracker;

let bodies = [];

let bodyTrackerOptions = { maxPoses: 1, flipHorizontal: true };

​

//----------------------------

function preload() {

  preloadBodyTracker();

}

​

//----------------------------

function setup() {

  createCanvas(640, 480);

  initializeWebcamAndBodyTracker();

}

​

//----------------------------

function draw() {

  background('white'); 

  drawWebcamVideo(webcamAlpha = 60); 

  drawBodyKeypoints(); 

  drawWarpedLines(); 

}

​

function drawWarpedLines(){

  stroke('black');

  for (let x=0; x<width; x+=10){

    let px = x; 

    let py = 0; 

    for (let y=0; y<height; y+=10){

      let dx = 0; 

      let dy = 0; 

      let K = 500; 

      if (bodies.length > 0){

        let aBody = bodies[0];

        for (let j = 0; j < aBody.keypoints.length; j++) {

          let keypoint = aBody.keypoints[j];

          let fx = x - keypoint.x; 

          let fy = y - keypoint.y; 

          let fh = sqrt(fx*fx + fy*fy); 

          if (fh > 1){

            dx += K * fx/(fh*fh);

            dy += K * fy/(fh*fh);

          }

        }

      }

      let qx = x + dx; 

      let qy = y + dy;

      if (dist(px,py,qx,qy)< 30){

        line(px,py, qx,qy); 

      }

      circle(px,py,2);

      px = qx; 

      py = qy;

    }

  }

}

​

//----------------------------

function drawBodyKeypoints(){

  // Draw all the tracked landmark points

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

    let aBody = bodies[i];

    for (let j = 0; j < aBody.keypoints.length; j++) {

      let keypoint = aBody.keypoints[j];

      fill('red');

      noStroke();

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

    }

  }

}

​

//==============================================================

// DON'T CHANGE ANYTHING BELOW THIS LINE

// unless you know what you are doing :)

//

//----------------------------

function initializeWebcamAndBodyTracker(){

  // Create the webcam video, and start detecting hands.

  myWebcam = createCapture(VIDEO);

  myWebcam.size(640, 480);

  myWebcam.hide();

  myBodyTracker.detectStart(myWebcam, gotBodies);

}

​

//----------------------------

function preloadBodyTracker() {

  myBodyTracker = ml5.bodypose("BlazePose", bodyTrackerOptions);

}

​

//----------------------------

function gotBodies(results) {

  // If fresh body pose data is received, store it.

  bodies = results;

}

​

//----------------------------

function drawWebcamVideo(webcamAlpha){

  // Draw the webcam video

  push();

  if (bodyTrackerOptions.flipHorizontal){

    translate(myWebcam.width,0); 

    scale(-1,1);

  }

  tint(255,255,255,webcamAlpha); 

  image(myWebcam, 0, 0, myWebcam.width, myWebcam.height);

  pop();

}

​

//----------------------------

// These constants may be helpful as indexes:

const NOSE = 0;

const L_EYE_INNER = 1;

const L_EYE = 2;

const L_EYE_OUTER = 3;

const R_EYE_INNER = 4;

const R_EYE = 5;

const R_EYE_OUTER = 6;

const L_EAR = 7;

const R_EAR = 8;

const L_MOUTH = 9;

const R_MOUTH = 10;

const L_SHOULDER = 11;

const R_SHOULDER = 12;

const L_ELBOW = 13;

const R_ELBOW = 14;

const L_WRIST = 15;

const R_WRIST = 16;

const L_PINKY = 17;

const R_PINKY = 18;

const L_INDEX = 19;

const R_INDEX = 20;

const L_THUMB = 21;

const R_THUMB = 22;

const L_HIP = 23;

const R_HIP = 24;

const L_KNEE = 25;

const R_KNEE = 26;

const L_ANKLE = 27;

const R_ANKLE = 28;

const L_HEEL = 29;

const R_HEEL = 30;

const L_FOOT = 31;

const R_FOOT = 32;