let myVideo;

let myResults;

let myParticles;

​

function setup() {

  createCanvas(640, 480);

  myVideo = createCapture(VIDEO);

  myVideo.size(width, height);

  myVideo.hide();

​

  handPose = ml5.handpose();

  handPose.detectStart(myVideo, gotResults);

​

  stroke(255, 0, 0);

  fill(255, 0, 0);

  strokeWeight(5);

  textSize(48)

  textAlign(CENTER)

}

​

function gotResults(results) {

  console.log(results);

  myResults = results;

}

​

function draw() {

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

​

  if (myResults) {

    drawFire();

  }

}

​

function drawLines() {

  const leftHand = myResults[0];

  const rightHand = myResults[1];

​

  if (!leftHand && !rightHand) {

    return;

  }

​

  const leftIndexTip = leftHand.index_finger_tip;

  const rightIndexTip = rightHand.index_finger_tip;

  const leftThumbTip = leftHand.thumb_tip;

  const rightThumbTip = rightHand.thumb_tip;

}

​

​

​

​

function drawFire() {

  const leftHand = myResults[0];

  const rightHand = myResults[1];

  if (!leftHand && !rightHand) {

    return;

  }

  drawEmoji(leftHand);

  drawEmoji(rightHand);

}

​

const nails = ['👁️']

​

function drawEmoji(hand) {

  if(!hand) return;

  const thumb = hand.thumb_tip;

  const index = hand.index_finger_tip;

  const middle = hand.middle_finger_tip;

  const ring = hand.ring_finger_tip;

  const pinky = hand.pinky_finger_tip;

  if (!myParticles){

    myParticles = new ParticleSystem(createVector(index.x, index.y));

  }else{

    myParticles.origin = createVector(index.x, index.y)

    myParticles.addParticle();

    myParticles.run()

  }

}

​

// A simple Particle class

let Particle = function(position) {

  this.acceleration = createVector(0, 0.05);

  this.velocity = createVector(random(-1, 1), random(-1, 0));

  this.position = position.copy();

  this.lifespan = 255;

};

​

Particle.prototype.run = function() {

  this.update();

  this.display();

};

​

// Method to update position

Particle.prototype.update = function(){

  this.velocity.add(this.acceleration);

  this.position.add(this.velocity);

  this.lifespan -= 2;

};

​

// Method to display

Particle.prototype.display = function() {

  stroke(255,255, 255, this.lifespan);

  strokeWeight(2);

  fill(255,69,0, this.lifespan);

  ellipse(this.position.x, this.position.y, 12, 12);

};

​

// Is the particle still useful?

Particle.prototype.isDead = function(){

  return this.lifespan < 0;

};

​

let ParticleSystem = function(position) {

  this.origin = position.copy();

  this.particles = [];

};

​

ParticleSystem.prototype.addParticle = function() {

  this.particles.push(new Particle(this.origin));

};

​

ParticleSystem.prototype.run = function() {

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

    let p = this.particles[i];

    p.run();

    if (p.isDead()) {

      this.particles.splice(i, 1);

    }

  }

};

​