Detecció de poses (I)

Què és la detecció de poses?

La detecció de poses (pose estimation) és la capacitat d'un algorisme per identificar la posició de les articulacions del cos humà en una imatge o vídeo. PoseNet és un model de Google que detecta 17 punts clau:

• Cap: nas, ulls, orelles.
• Tronc: espatlles, malucs.
• Braços: colzes, canells.
• Cames: genolls, turmells.

Amb aquests punts podem dibuixar un esquelet, crear ombres corporals, o fer que elements visuals segueixin el moviment del cos.

Els 17 punts clau de PoseNet

PoseNet detecta 17 parts del cos. Aquí tens una representació visual amb el nom de cada punt:

// 17 punts clau de PoseNet (ordre oficial)
0: nas
1: ull esquerre     2: ull dret
3: orella esquerra  4: orella dreta
5: espatlla esq.    6: espatlla dreta
7: colze esq.       8: colze dret
9: canell esq.      10: canell dret
11: maluc esq.      12: maluc dret
13: genoll esq.     14: genoll dret
15: turmell esq.    16: turmell dret

Estructura del codi amb PoseNet

El patró per utilitzar PoseNet amb ml5.js és similar al de FaceMesh, però amb una llista de 17 punts per persona:

let posenet;
let video;
let poses = [];

async function setup() {
  createCanvas(640, 480);
  video = await createCapture({ video: true });
  video.hide();
  posenet = ml5.poseNet(video, modelReady);
}

function modelReady() {
  posenet.on('pose', (results) => {
    poses = results;
  });
}

function draw() {
  image(video, 0, 0, width, height);
  for (let persona of poses) {
    for (let punt of persona.pose.keypoints) {
      if (punt.score > 0.5) {
        ellipse(punt.position.x, punt.position.y, 10, 10);
      }
    }
  }
}

poses és un array de persones. Cada persona té .pose.keypoints, un array de 17 objectes amb .position.x, .position.y i .score (confiança).

Connectar punts: dibuixar l'esquelet

Un cop tenim els punts clau, podem connectar-los amb línies per dibuixar un esquelet. PoseNet defineix unes connexions predeterminades entre punts.

// Connexions de l'esquelet (índexs de punts)
let connexions = [
  [5,6], [5,7], [6,8], [7,9], [8,10], // braços
  [5,11], [6,12], [11,12],            // tronc
  [11,13], [12,14], [13,15], [14,16]  // cames
];
for (let c of connexions) {
  line(punts[c[0]].x, punts[c[0]].y, punts[c[1]].x, punts[c[1]].y);
}

Exemples creatius pas a pas

// Partícules que emanen del canell (posició del ratolí)
let canell = { x: mouseX, y: mouseY };
particules.push({
  x: canell.x + random(-10, 10),
  y: canell.y + random(-10, 10),
  vx: random(-1, 1), vy: random(-3, -1), vida: 255
});

for (let i = 0; i < connexions.length; i++) {
  let to = map(i, 0, connexions.length, 0, 360);
  stroke(to, 80, 90, 200); // color arc de Sant Martí
  line(a.x, a.y, b.x, b.y);
}

Consells per treballar amb PoseNet

• Cos sencer: PoseNet funciona millor quan es veu el cos complet. Per a primers plans, utilitza FaceMesh.
• Confiança: utilitza punt.score > 0.5 per filtrar deteccions poc fiables.
• Múltiples persones: PoseNet pot detectar diverses persones. Cada element de poses és una persona diferent.
• Il·luminació: com amb la càmera, una bona llum i un fons contrastat milloren la detecció.
• Rendiment: processar múltiples persones a 60 fps pot ser exigent. Considera reduir la mida del vídeo.