simplified lerp and video flip

mediaPipe/poseLandmarks/sketch.js

@@ -24,32 +24,22 @@ function setup() {
 
 function draw() {
   background(255);
+  lerpPositions();
 
-  // flip the webcam image so it looks like a mirror
-  push();
-  scale(-1, 1); // mirror webcam
-  image(capture, -capture.width, 0); // draw webcam
-  scale(-1, 1); // unset mirror
-  pop();
+  // draw the webcam
+  image(capture, 0, 0);
 
   // mediaPipe.landmarks contains an array of people
   if (mediaPipe.landmarks.length > 0) {
-    if (!madeClone) {
-      lerpLandmarks = JSON.parse(JSON.stringify(mediaPipe.landmarks));
-      madeClone = true;
-    }
-
     // l[start].x = simpLerp(l[start].x, p[start].x, lerpRate);
-    mediaPipe.landmarks.forEach((person, index) => {
-      let p = mediaPipe.landmarks[index];
-      let l = lerpLandmarks[index];
+    mediaPipe.landmarks.forEach((person, personIndex) => {
       // sometimes we don't have a person for a bit, if not then return
-      if (!l || !p) return;
       // each person contains an array of positions of each body part
-      person.forEach((part, index) => {
+      person.forEach((part, partIndex) => {
         // get the lerped position for detected body parts
-        l[index].x = lerp(l[index].x, part.x, lerpRate);
-        l[index].y = lerp(l[index].y, part.y, lerpRate);
+
+        const x = lerpLandmarks[personIndex][partIndex].x;
+        const y = lerpLandmarks[personIndex][partIndex].y;
         // draw a circle on each body part
 
         // non lerped
@@ -58,24 +48,57 @@ function draw() {
 
         // lerped
         fill("cyan");
-        circle(...getFlipPos(l[index]), 10);
+        // circle(...getFlipPos(l[index]), 10);
+        circle(x, y, 10);
       });
     });
   }
 }
 
-// return flipped x and y positions
-function getFlipPos(part, xAdd = 0, yAdd = 0) {
-  return [
-    capture.width - part.x * capture.width + xAdd,
-    part.y * capture.height + yAdd,
-  ];
+// create and set lerp positions
+// this function creates a deep clone of the mediaPipe.landmarks if it doesn't exist already
+// then it lerps the positions of the landmarks
+// lerp works by moving a percentage of the way from one position to another
+function lerpPositions(realPostions = true) {
+  // check we're getting landmarks
+  // we're probably already checking, but just in case...
+  if (mediaPipe.landmarks.length > 0) {
+    if (!madeClone) {
+      // deep clone the mediaPipe.landmarks
+      lerpLandmarks = JSON.parse(JSON.stringify(mediaPipe.landmarks));
+      madeClone = true;
+    }
+  }
+
+  // realpositions variable controls whether we set the capture width and height or not
+  // by default we make landmarks relative to the capture width and height
+  // if false it will be 0 to 1
+
+  let lerpWidth = realPostions ? capture.width : 1;
+  let lerpHeight = realPostions ? capture.height : 1;
+
+  mediaPipe.landmarks.forEach((person, personIndex) => {
+    let p = mediaPipe.landmarks[personIndex];
+    let l = lerpLandmarks[personIndex];
+    // sometimes we don't have a person for a bit, if not then return
+    if (!l || !p) return;
+    // each person contains an array of positions of each body part
+    person.forEach((part, partIndex) => {
+      // get the lerped position for detected body parts
+      l[partIndex].x = lerp(l[partIndex].x, part.x * lerpWidth, lerpRate);
+      l[partIndex].y = lerp(l[partIndex].y, part.y * lerpHeight, lerpRate);
+      // draw a circle on each body part
+    });
+  });
 }
 
 // this function helps to captuer the webcam in a way that ensure video is loaded
-// before we start predicting mediaPipe.landmarks. Creatcapture has a callback which is
+// before we start predicting mediaPipe.landmarks. Createcapture has a callback which is
 // only called when the video is correctly loaded. At that point we set the dimensions
 // and start predicting mediaPipe.landmarks
+
+// N.B. the video is flipped horizontally in the CSS
+
 function captureWebcam() {
   capture = createCapture(
     {

mediaPipe/poseLandmarks/style.css

@@ -1,7 +1,11 @@
-html, body {
+html,
+body {
   margin: 0;
   padding: 0;
 }
 canvas {
   display: block;
 }
+video {
+  transform: scaleX(-1);
+}