let poseNet;

let poses = [];

let particles = [];

​

function setup() {

  createCanvas(1920/2, 1080/2);

  video = createCapture(VIDEO);

  video.size(width, height);

​

  poseNet = ml5.poseNet(video, modelReady);

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

    poses = results;

  });

​

  video.hide();

}

​

function keyPressed() {

    if ( key === '!' ) {

        let fs = fullscreen();

        fullscreen(!fs);

}}

​

​

​

​

function modelReady() {

  console.log("model ready")

}

​

function draw() {

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

​

  // Generate new particles

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

    let pose = poses[i].pose;

​

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

      let keypoint = pose.keypoints[j];

​

      if (keypoint.part == 'leftWrist' || keypoint.part == 'rightWrist') {

        if (keypoint.score > 0.2) {

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

            particles.push(new Particle(keypoint.position.x, keypoint.position.y));

          }

        }

      }

    }

  }

​

  // Update and draw particles

  for (let i = particles.length - 1; i >= 0; i--) {

    particles[i].update();

    particles[i].show();

    if (particles[i].finished()) {

      // remove this particle

      particles.splice(i, 1);

    }

  }

}

​

class Particle {

  constructor(x, y) {

    this.x = x;

    this.y = y;

    this.vx = random(-1, 1);

    this.vy = random(-5, -1);

    this.alpha = 255;

  }

​

  finished() {

    return this.alpha < 0;

  }

​

  update() {

    this.x += this.vx;

    this.y += this.vy;

    this.alpha -= 5;

  }

​

  show() {

    noStroke();

    fill(255, 100+random(100), 0, this.alpha);

    ellipse(this.x, this.y*0.9, 32);

  }

}

​