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

    //drawKeyPoints()

  }

}

​

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 drawKeyPoints(){

//   const leftHand = myResults[0];

//   const rightHand = myResults[1];

//   if (!leftHand && !rightHand) {

//     return;

//   }

//   // draw right hand

//   else if(!righthand) return;

//   const right_thumb = lefthand.thumb_tip;

//   const right_index = lefthand.index_finger_tip;

//   // draw left hand

//   // draw right hand

//   else if(!lefthand) return;

//   const left_thumb = lefthand.thumb_tip;

//   const left_index = lefthand.index_finger_tip;

// }

​

​

// This is the working section

​

function drawFire() {

  const leftHand = myResults[0];

  const rightHand = myResults[1];

  if (!leftHand && !rightHand) {

    return;

  }

  drawEmoji(leftHand);

  drawEmoji(rightHand);

}

​

function drawEmoji(hand) {

  if(!hand) return;

  const thumbTip = hand.thumb_tip;

  const indexTip = hand.index_finger_tip;

  const middleTip = hand.middle_finger_tip;

  const ringTip = hand.ring_finger_tip;

  const pinkyTip = hand.pinky_finger_tip;

  fill(0, 255, 0);

  noStroke();

​

  //draw a circle at thumbTip's x&y coords!

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

​

  //draw a circle at ringTip's x&y coords!

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

}

​

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

​

const nails = ['👁️']

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

    }

  }

};

​