// The Coding Train / Daniel Shiffman

// https://thecodingtrain.com/learning/ml5/7.1-posenet.html

// https://youtu.be/OIo-DIOkNVg

// https://editor.p5js.org/codingtrain/sketches/ULA97pJXR

​

let video;

let poseNet;

let pose;

let skeleton;

let poseRad = 35;

let poses = [];

​

// v is controlling how much sin is scaled by

let v = 10;

​

function setup() {

  createCanvas(640, 480);

  video = createCapture(VIDEO);

  // video.size(640, 480);

  video.hide();

  // video.size(displayWidth, displayHeight);

  poseNet = ml5.poseNet(video, "multiple", modelLoaded);

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

    poses = results;

  });

  // frameRate(5);

}

​

// function gotPoses(poses) {

//   if (poses.length > 0) {

//     pose = poses[0].pose;

//     skeleton = poses[0].skeleton;

//   }

// }

​

function modelLoaded() {

  console.log("poseNet ready");

}

​

function draw() {

  image(video, 0, 0);

  let gridSize = 8;

​

  //   fill(0, 200);

  //   rect(0, 0, video.width, video.height);

​

  push();

​

  //reverse poses

  // translate(video.width, 0);

  // scale(-1, 1);

​

  //   access to pixel array

  video.loadPixels();

  filter(INVERT);

  console.log(v);

​

  //   if (poses.length > 1) {

​

  //     // pose information for 1st person

  //     let person0 = poses[0].pose;

  //     // Draw a red ellipse for key point

  //     fill(240, 0, 0);

  //     let point0 = person0.rightWrist;

  //     ellipse(point0.x, point0.y, 40, 40);

​

  //     // pose information for 2nd person

  //     let person1 = poses[1].pose;

  //     // Draw a blue ellipse for key point

  //     fill(0, 0, 240);

  //     let point1 = person1.rightWrist;

  //     ellipse(point1.x, point1.y, 40, 40);

  //   }

​

  // if poses exist, create my visualisation

  if (poses.length > 0) {

    // AM // where is the nose:

    //console.log(pose.keypoints[0].position.x);

​

    for (let y = 0; y < video.height; y += gridSize) {

      for (let x = 0; x < video.width; x += gridSize) {

        // let person0 = poses[0].pose;

        // let person1 = poses[1].pose;

​

        //       index in pixel array

        //       first pixel is in array is index 0 and is red

        let index = (y * video.width + x) * 4;

        // console.log(index)

​

        let r = video.pixels[index];

        let g = video.pixels[index + 1];

        let b = video.pixels[index + 2];

        let a = video.pixels[index + 3];

​

        // let d = map(r, 0, 255, gridSize, 5);

        let d = map(r, 0, 255, 2, gridSize);

        let s = map(sin(d), -1, 1, 0, 255);

​

        fill(200, s, s + 100);

        noStroke();

​

        // are we + / - 10 pixels of the nose

        // using abs we get a positive value then see if its less than 10

        // perhaps replace 10 with a variable

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

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

            poseRectangle(poses[p].pose, x, y, d, v)

          }

        }

      }

    }

    pop();

  }

}

​

function poseRectangle(person, x, y, d, v) {

  if (

    Math.abs(person.leftEye.x - x) < poseRad &&

    Math.abs(person.leftEye.y - y) < poseRad

  ) {

    // fill(r,g,b)

    rect(x, y, sin(d) * v, 5);

    // ellipse(x, y, 20);

  } else {

    // rect(x, y, sin(d) * (v * 10), 10);

    // ellipse(x*2, y*2, sin(d)*30);

  }

}

​