ml5-HandPuppet-2025

// Makes a simple puppet using hand landmarks. 

// Uses p5.js v.1.11.3, and ml5 v.1.2.1 (2024):

// https://unpkg.com/ml5@1/dist/ml5.js

//

// If you'd like to use microphone input, this sketch includes:

// https://cdn.jsdelivr.net/npm/p5.sound@0.1.0 

// See this example to understand how to access sound: 

// https://openprocessing.org/sketch/2189445

​

let myWebcam;

let myHandTracker;

let hands = [];

let trackerOptions = { maxHands: 1, flipHorizontal: true };

let webcamAlpha = 60; // reduce this to make video transparent

​

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

function setup() {

  createCanvas(640, 480);

  initializeWebcamAndHandTracker(); 

}

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

function preload(){

  preloadHandTracker(); 

}

​

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

function draw() {

  background('LightCyan');

  drawWebcamVideo(); 

  // drawAllHandPoints(); 

  drawPuppet();

}

​

function drawPuppet(){

  if (hands.length > 0){ // keep this!

    let pts = hands[0].keypoints;

    strokeWeight(20);

    stroke('Indigo');

    fill('LavenderBlush');

    // Draw the head and ears

    let bunnyHeadY = pts[WRIST].y - 80;

    let bunnyHeadX = pts[WRIST].x;

    line(pts[INDEX_TIP].x, pts[INDEX_TIP].y, bunnyHeadX, bunnyHeadY); // ears!

    line(pts[MIDDLE_TIP].x, pts[MIDDLE_TIP].y, bunnyHeadX, bunnyHeadY);

    ellipse(bunnyHeadX, bunnyHeadY + 200, 160, 400); 

    circle(bunnyHeadX, bunnyHeadY, 160);

​

    // Draw the eyes

    strokeWeight(10); 

    fill('White');

    circle(bunnyHeadX - 25, bunnyHeadY, 60);

    circle(bunnyHeadX + 25, bunnyHeadY, 60);

    fill('Indigo');

    circle(bunnyHeadX - 25, bunnyHeadY, 10);

    circle(bunnyHeadX + 25, bunnyHeadY, 10);

  } else {

    noStroke(); 

    fill('black'); 

    text("hold up a hand", 20,30); 

  }

}

​

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

function drawAllHandPoints(){

  // Draw all the tracked hand points

  noStroke();

  fill('black');

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

    let hand = hands[i];

    let keypoints = hand.keypoints; // also available: keypoints3D

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

      let aKeypoint = keypoints[j];

      circle(aKeypoint.x, aKeypoint.y, 3);

    }

  }

}

​

//==============================================================

// DON'T CHANGE ANYTHING BELOW THIS LINE.

//

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

function initializeWebcamAndHandTracker(){

  // Create the webcam video, and start detecting hands:

  myWebcam = createCapture(VIDEO);

  myWebcam.size(640, 480).hide();

  myHandTracker.detectStart(myWebcam, gotHands);

}

​

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

function drawWebcamVideo(){

  // Draw the webcam video

  push();

  if (trackerOptions.flipHorizontal){

    translate(myWebcam.width,0); 

    scale(-1,1);

  }

  tint(255,255,255,webcamAlpha); 

  image(myWebcam, 0, 0, myWebcam.width, myWebcam.height);

  pop();

}

​

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

function preloadHandTracker() {

  // Load the Handpose model.

  myHandTracker = ml5.handPose(trackerOptions);

}

function gotHands(results) { 

  // If fresh Handpose data is received, store it.

  hands = results;

}

​

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

// The following hand point index labels may be useful:

const WRIST = 0;

const THUMB_CMC = 1;

const THUMB_MCP = 2;

const THUMB_IP = 3;

const THUMB_TIP = 4;

const INDEX_MCP = 5;

const INDEX_PIP = 6;

const INDEX_DIP = 7;

const INDEX_TIP = 8;

const MIDDLE_MCP = 9;

const MIDDLE_PIP = 10;

const MIDDLE_DIP = 11;

const MIDDLE_TIP = 12;

const RING_MCP = 13;

const RING_PIP = 14;

const RING_DIP = 15;

const RING_TIP = 16;

const PINKY_MCP = 17;

const PINKY_PIP = 18;

const PINKY_DIP = 19;

const PINKY_TIP = 20;