public/tests/sketch2.js

// // Import TFJS runtime with side effects.
// import '@tensorflow/tfjs-backend-webgl';
// import * as poseDetection from '@tensorflow-models/pose-detection';
// // import 'https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-backend-webgl';
// // import * as poseDetection from 'https://cdn.jsdelivr.net/npm/@tensorflow-models/pose-detection';

/* 
=============
Params
=============
*/

let capture;
let font;

let detector;
let poses;

let angle = 0.0;

/* 
=============
Function
=============
*/

function preload() {
  
}

function setup() {

  createCanvas(640, 480);

  capture = createCapture(VIDEO, captureLoaded);

  background(255);

}

function captureLoaded() {
  console.log("capture loaded...");
  initModel();
}

async function initModel() {
  const _model = poseDetection.SupportedModels.MoveNet;
  console.log("model:", _model);
  const detectorConfig = {
    runtime: "tfjs", // 'mediapipe', 'tfjs'
    //modelType: "lite", // 'lite', 'full', 'heavy'
  };
  detector = await poseDetection.createDetector(_model, detectorConfig);
}

async function getPose() {
  poses = await detector.estimatePoses(capture.elt);
}

function draw() {
    background(0,1);
  if (detector) {
    getPose();
  }
  drawPoseInfo();
}


function drawPoseInfo() {
    noStroke();
    fill(255, 0, 0, 128);


  if (poses && poses.length > 0) {
    
    for (var i = 0; i < poses.length; i++) {
      for (var j = 0; j<poses[i].keypoints.length; j++) {
        if (poses[i].keypoints[j].score > 0.1) {
          let posX = width-int(poses[i].keypoints[j].x);
          let posY = height-int(poses[i].keypoints[j].y);
          
          //circle(posX, posY, 10);

        }
      }
    }

    
    stroke(255);
    if (poses.length > 0) {

        let l = poses[0].keypoints.length;

        for (var j = 4; j<l; j++) {
            for (var i = j+1; i<l; i++) {
                    let d = dist(int(poses[0].keypoints[i].x), 
                    int(poses[0].keypoints[i].y),
                    int(poses[0].keypoints[j].x), 
                    int(poses[0].keypoints[j].y));   

                    if(d > 150){
                    line( int(poses[0].keypoints[i].x), 
                        int(poses[0].keypoints[i].y),
                        int(poses[0].keypoints[j].x), 
                        int(poses[0].keypoints[j].y));
                    }

        
                }
            }
        }
    }
}


function keyPressed() {
  noLoop();
}