let keypointsPose = [];

​

const osc1 = new p5.Oscillator('square')

const osc2 = new p5.Oscillator('square')

let env = new p5.Envelope();

env.setADSR(0.001, 0.5, 0.1, 0.5);

env.setRange(0.8, 0.5);

​

const videoElement = document.getElementsByClassName("input_video")[0];

videoElement.style.display = "none";

​

function onPoseResults(results) {

  keypointsPose = results.poseLandmarks;

}

​

const pose = new Pose({

  locateFile: (file) => {

    return `https://cdn.jsdelivr.net/npm/@mediapipe/pose/${file}`;

  },

});

​

pose.setOptions({

  modelComplexity: 1,

  smoothLandmarks: true,

  enableSegmentation: true,

  smoothSegmentation: true,

  minDetectionConfidence: 0.5,

  minTrackingConfidence: 0.5

});

pose.onResults(onPoseResults);

​

const camera = new Camera(videoElement, {

  onFrame: async () => {

    await pose.send({ image: videoElement });

  },

  width: 1280,

  height: 720,

});

camera.start();

​

let videoImage;

let lx = 0;

let w = 2;

let w2 = 2*w;

​

function setup() {

  createCanvas(960, 480); 

  videoImage = createGraphics(640, 360);

}

​

function draw() {

  background(255, 255, 255);

  stroke(0,0,255);

  strokeWeight(2);

  fill(0, 255, 0);

​

  videoImage.drawingContext.drawImage(

    videoElement,

    0,

    0,

    videoImage.width,

    videoImage.height

  );

​

  push();

  if (isFlipped) {

    translate(width, 0);

    scale(-1, 1);

  }

  displayWidth = width;

  displayHeight = (width * videoImage.height) / videoImage.width;

  image(videoImage, 0, 0, displayWidth, displayHeight);

  pop();

​

  if (keypointsPose.length > 0) {

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

       indexTip = keypointsPose[i];

       let xx = (1-indexTip.x) * displayWidth;

       let yy = indexTip.y * displayHeight;

       if (((lx-w)<= xx)&&(xx<(lx+w))){

          osc1.stop();

          osc1.start();

          osc1.freq((1-indexTip.y) * 1000 + 200);

          env.play(osc1);

       }

       if (lx > xx) {

         fill(255,127,0);

       } else {

         fill(0,255,0);

       }

       ellipse(xx, yy, 20);

    }

    stroke(0,0,255);

    strokeWeight(w2);

    line(lx,0,lx,displayHeight);

    lx = lx + w2;

    if (lx >= displayWidth){

      lx = 0;

      osc1.stop();

    }

  }

}

​

​