ml5-BodyBroccoli-2025

// Quick broccoli costume controlled by body tracking.

// Requires: p5.js 1.11.3 and ml5.js 1.2.1:

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

// This software is released under the MIT License.

// 

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

let bodies = [];

let bodyTrackerOptions = { maxPoses: 1, flipHorizontal: true, runtime: "mediapipe"};

​

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

function preload() {

  preloadBodyTracker();

}

​

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

function setup() {

  createCanvas(640, 480);

  initializeWebcamAndBodyTracker();

}

​

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

function draw() {

  background('MistyRose'); 

  drawWebcamVideo(webcamAlpha = 60); 

  // drawBodyKeypoints(); 

  drawBodyAsBroccoli();

}

​

function drawBodyAsBroccoli(){

  // Always check that there's at least one body!

  if (bodies.length > 0){

    // Get the first body's keypoints

    let aBody = bodies[0];

    let pts = aBody.keypoints;

    // Store some useful coordinate values

    let slx = pts[L_SHOULDER].x;

    let sly = pts[L_SHOULDER].y;

    let srx = pts[R_SHOULDER].x;

    let sry = pts[R_SHOULDER].y;

    let hlx = pts[L_HIP].x;

    let hly = pts[L_HIP].y;

    let hrx = pts[R_HIP].x;

    let hry = pts[R_HIP].y;

    let flx = pts[L_FOOT].x;

    let fly = pts[L_FOOT].y;

    let frx = pts[R_FOOT].x;

    let fry = pts[R_FOOT].y;

    let elx = pts[L_ELBOW].x;

    let ely = pts[L_ELBOW].y;

    let erx = pts[R_ELBOW].x;

    let ery = pts[R_ELBOW].y;

    let nx = pts[NOSE].x;

    let ny = pts[NOSE].y;

    let hipWidth = dist(hlx,hly,hrx,hry);

    // Draw the broccoli stems

    strokeCap(ROUND);

    strokeWeight(hipWidth * 0.5); 

    stroke('green'); 

    line(slx,sly,hlx,hly);

    line(srx,sry,hrx,hry);

    line(hlx,hly,elx,ely); 

    line(hrx,hry,erx,ery); 

    line(hlx,hly,(flx+frx)/2,(flx+fly)/2);

    line(hrx,hry,(flx+frx)/2,(flx+fly)/2);

    line(nx,ny,(hlx+hrx)/2,(hly+hry)/2);

    line((hlx+hrx)/2,(hly+hry)/2,

         (flx+frx)/2,(flx+fly)/2);

    // Draw the broccoli florets

    noStroke();

    randomSeed(12345); 

    let pxs = [elx, erx, slx, srx, nx];

    let pys = [ely, ery, sly, sry, ny];

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

      fill(0, random(85,115), 0);

      for (let i=0; i<60; i++){

        let bx = pxs[j] + randomGaussian(0,hipWidth*0.30);

        let by = pys[j] + randomGaussian(0,hipWidth*0.20);

        circle(bx,by, hipWidth*0.4); 

      }

    }

    // Draw the broccoli eyes

    let eyeR = hipWidth * 0.75; 

    let eyelx = (slx + pts[L_EYE_OUTER].x)/2;

    let eyely = (sly + pts[L_EYE_OUTER].y)/2;

    let eyerx = (srx + pts[R_EYE_OUTER].x)/2;

    let eyery = (sry + pts[R_EYE_OUTER].y)/2;

    let lookx = (nx - eyelx)/(eyerx-eyelx);

    let dx = (0.5 - lookx)*eyeR;

    fill('Honeydew');

    stroke(0,80,0);

    strokeWeight(hipWidth*0.1);

    circle(eyelx,eyely, eyeR);

    circle(eyerx,eyery, eyeR);

    fill(0,40,0);

    noStroke(); 

    circle(eyelx+dx,eyely, eyeR*0.5);

    circle(eyerx+dx,eyery, eyeR*0.5);

    stroke(0,40,0);

    noFill(); 

    arc(eyelx,eyely, eyeR*2,eyeR*2.5,0.70*TWO_PI,0.80*TWO_PI);

    arc(eyerx,eyery, eyeR*2,eyeR*2.5,0.70*TWO_PI,0.80*TWO_PI);

  }

}

​

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

function drawBodyKeypoints(){

  // Draw all the tracked landmark points. 

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

    let aBody = bodies[i];

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

      let keypoint = aBody.keypoints[j];

      fill('red');

      noStroke();

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

    }

  }

}