let handPose;

let hands = [];

let emitters = [];

let icons = ['hi', 'hello', 'nice', 'to', 'meet', 'you', '❤️'];

let bodySegmentation;

let segmentation

​

let options = {

  maskType: "person", // This will generate the body silhouette

};

​

function preload() {

  handPose = ml5.handPose();

  bodySegmentation = ml5.bodySegmentation("SelfieSegmentation", options);

}

​

function mousePressed() {

  console.log(hands);

}

​

function gotHands(results) {

  hands = results;

}

​

function setup() {

  createCanvas(640, 480);

  video = createCapture(VIDEO);

  video.hide();

  handPose.detectStart(video, gotHands);

  // Start body segmentation

  bodySegmentation.detectStart(video, gotResults);

​

  // Initialize emitters for each keypoint (21 per hand, 2 hands max)

  for (let i = 0; i < 21 * 2; i++) {

    emitters.push(new Emitter(width / 2, height / 2, icons)); // Pass icons array to emitters

  }

  background(0);

}

​

function draw() {

  clear();

​

  if (segmentation && segmentation.mask) {

    // Draw the mirrored segmentation mask

    push();

    translate(width, 0); // Move to the right edge

    scale(-1, 1); // Mirror horizontally

    image(segmentation.mask, 0, 0);

    pop();

  }

​

  blendMode(ADD);

​

  if (hands.length > 0) {

    let counter = 0;

    for (let hand of hands) {

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

        let keypoint = hand.keypoints[i];

        let emitter = emitters[counter];

        // Mirror the keypoint's x-coordinate for flipped video

        emitter.origin.x = width - keypoint.x;

        emitter.origin.y = keypoint.y;

        if (frameCount % 5 === 0) {

          emitter.addParticle();

        }

        counter++; // Increment counter to match each keypoint with an emitter

      }

    }

  }

​

  for (let emitter of emitters) {

    emitter.run();

  }

}

​

function gotResults(result) {

  segmentation = result;

}

​