​

let video;

let poseNet;

let poses = [];

let skeletons = [];

let distance;

​

let shapes = []; // an array that will hold our shapes

let numberOfShapes = 3000; // how many shapes to draw

let mouseThreshold = 10; // how close can your mouse get to a shape before it moves

let moveDistance = 150; // how far shapes move away from your mouse

let animateDistance = 50; // how much each shape animates 

​

// create a "shape" class that holds all information about each shape

class Shape {

  constructor() {

    this.x = random(0, windowWidth); // each shape has a random x position

    this.y = random(0, windowHeight); // and a random y position

    this.radius = random(10, 50); // give each shape a random size between two values

    this.color = color(random(0, 150), random(0, 50), random(100, 255)); // and a random color

  }

​

  // create a function that moves a shape away from your mouse

  updateShape() {

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

      for (let j = 0; j < poses[i].pose.keypoints.length; j++) {

        let keypoint = poses[i].pose.keypoints[j];

          if (keypoint.score > 0.2) {

            distance = int(dist(this.x, this.y, keypoint.position.x, keypoint.position.y));

            if (distance <= mouseThreshold) { // if your mouse gets closer than the threshold...

              this.color.setAlpha(0);

​

​

              //this.x = this.x * noise(noiseSeed); // give the shape a new x position

             // this.y = this.y * noise(noiseSeed+5); // and a new y position

              //this.x += random(-moveDistance, moveDistance); // give the shape a new x position

              //this.y += random(-moveDistance, moveDistance); // and a new y position

      // this.x = lerp(this.x, random(this.x - moveDistance, this.x + moveDistance), 0.5);

      // this.y = lerp(this.y, random(this.y - moveDistance, this.y + moveDistance), 0.5);

          }

            else {

               // this.color.setAlpha(255);

            }

        }

      }

    }

    /*

    let mouseDistance = int(dist(this.x, this.y, mouseX, mouseY)); // check the distance from your mouse to the shape

    if (mouseDistance <= mouseThreshold) { // if your mouse gets closer than the threshold...

      this.x += random(-moveDistance, moveDistance); // give the shape a new x position

      this.y += random(-moveDistance, moveDistance); // and a new y position

      //this.x = lerp(this.x, random(this.x - moveDistance, this.x + moveDistance), 0.5);

      //this.y = lerp(this.y, random(this.y - moveDistance, this.y + moveDistance), 0.5);

    }

    */

  }

  // create a function to animate each shape

  animateShape(){

    this.x = lerp(this.x, random(this.x - animateDistance, this.x + animateDistance), 0.02);

    this.y = lerp(this.y, random(this.y - animateDistance, this.y + animateDistance), 0.02);

  }

​

  // create a function to draw each shape

  drawShape() {

    fill(this.color);

    ellipse(this.x, this.y, this.radius, this.radius);

  }

}

​

function setup() {

  createCanvas(windowWidth, windowHeight); // create a canvas that fills the whole screen

  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();

  noStroke(); // don't outline objects

  // create a bunch of shape objects

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

    shapes.push(new Shape());

  }

}

​

function modelReady() {

  select('#status').html('Model Loaded');

}

​

function draw() {

  background(0);

​

  drawKeypoints();

  drawSkeleton();

​

  // update shape positions based off of the mouse location

  // and draw them to the screen

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

    shapes[i].updateShape();

    shapes[i].animateShape();

    shapes[i].drawShape();

  }

  // draw ellipse that follows mouse

  // ellipse(mouseX, mouseY, 50, 50);

​

  noiseSeed = noiseSeed + 0.01;

}

​

function drawKeypoints()  {

  // Loop through all the poses detected

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

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

    for (let j = 0; j < poses[i].pose.keypoints.length; j++) {

      // A keypoint is an object describing a body part (like rightArm or leftShoulder)

      let keypoint = poses[i].pose.keypoints[j];

      // Only draw an ellipse is the pose probability is bigger than 0.2

      if (keypoint.score > 0.2) {

        fill(255, 0, 0);

        noStroke();

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

      }

    }

  }

}

​

function drawSkeleton() {

  // Loop through all the skeletons detected

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

    let skeleton = poses[i].skeleton;

    // For every skeleton, loop through all body connections

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

      let partA = skeleton[j][0];

      let partB = skeleton[j][1];

      push();

      stroke(255, 0, 0);

      line(partA.position.x, partA.position.y, partB.position.x, partB.position.y);

      pop();

    }

  }

}