* 👋 Hello! This is an ml5.js example modified to add particle effects.

 * Learn more about the ml5.js project: https://ml5js.org/

 */

​

let handPose;

let video;

let hands = [];

let particles = [];

​

function preload() {

  // Load the handPose model

  handPose = ml5.handPose();

}

​

function setup() {

  createCanvas(640, 480);

  // Create the webcam video and hide it

  video = createCapture(VIDEO);

  video.size(640, 480);

  video.hide();

  // Start detecting hands from the webcam video

  handPose.detectStart(video, gotHands);

}

​

function draw() {

  // Draw the webcam video

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

​

  // Draw all the tracked hand points and generate particles

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

    let hand = hands[i];

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

      let keypoint = hand.keypoints[j];

      fill(0, 255, 0);

      noStroke();

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

​

      // Generate particles at the keypoint

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

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

      }

    }

  }

​

  // Update and draw particles

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

    let p = particles[i];

    p.update();

    p.show();

    if (p.isFinished()) {

      particles.splice(i, 1);

    }

  }

}

​

// Callback function for when handPose outputs data

function gotHands(results) {

  // Save the output to the hands variable

  hands = results;

}

​

// Particle class

class Particle {

  constructor(x, y) {

    this.x = x;

    this.y = y;

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

    this.vy = random(-2, 2);

    this.alpha = 255; // Particle transparency

  }

​

  update() {

    this.x += this.vx;

    this.y += this.vy;

    this.alpha -= 5; // Fade out

  }

​

  show() {

    noStroke();

    fill(255, 150, 0, this.alpha);

    circle(this.x, this.y, 5);

  }

​

  isFinished() {

    return this.alpha <= 0;

  }

}

​

​