Assignments Review

Tamara: left and right wrist painting

• Use lerp(oldVal, newVal) for both XY to smooth/interpolate btwn. two values to prevent body pose jittering
  • Similar to lag CHOP

createGraphics(): creates an offscreen drawing canvas (graphics buffer) and returns it as a p5.Graphics object

• similar to a layer in PS
• Useful for real-time painting (gesture)

MediaPipe face mesh

• 2D: draw with beginShape() and overlap onto the face

• 3D: output an array of triangles, then sequentially draw the next three 3D point as a triangle, then apply color through the underlying video image

  const indexA = TRIANGULATION[i];
  const indexB = TRIANGULATION[i + 1];
  const indexC = TRIANGULATION[i + 2];
  const pointA = face.keypoints[indexA];
  const pointB = face.keypoints[indexB];
  const pointC = face.keypoints[indexC];
  

  beginShape();
  vertex(pointA.x, pointA.y, 1 - pointA.z);
  vertex(pointB.x, pointB.y, 1 - pointB.z);
  vertex(pointC.x, pointC.y, 1 - pointC.z);
  endShape(CLOSE);
  

Flappy Millie - Christina

• Attractor + Particle system

Umbrella Hand Pose - Alina

• Confidence score comparison between two hands to determine umbrella display

Face and Hand Models

Week 4

Face Landmarks

Input: Image/Video stream

Output: Approximate 3D facial surface geometry OR 2D coord.

ml5.faceMesh

• MediaPipe from Google
• The XY coord. are interpolated from the video, while the Z is an estimation, with range: -2 to 2 meters
• UV coord are written in each vertex info
  • vertex(x1, y1, u, v)
  • vertex(x2, y2, u, v)