Tema 24

Detecció de poses (II)

Passa de detectar a classificar. Utilitza els punts clau de PoseNet per reconèixer postures, gestos i moviments, i crea sistemes visuals que responen de manera diferent segons la teva posició.

De la detecció a la classificació

Al Tema 23 vam aprendre a obtenir els 17 punts clau del cos. Ara anem més enllà: interpretem aquests punts per reconèixer què està fent la persona.

Podem classificar postures calculant relacions geomètriques entre punts clau:

  • Distàncies: quina distància hi ha entre les dues mans?
  • Angles: quin angle forma el colze respecte a l'espatlla?
  • Posicions relatives: la mà dreta està per sobre del cap?
  • Velocitats: a quina velocitat es mou un punt respecte al fotograma anterior?
Idea clau: No necessitem intel·ligència artificial per classificar postures. Amb geometria bàsica (distàncies, angles, comparacions) podem reconèixer gestos com "braços amunt", "cames obertes" o "ajupit".

Reconeixement de postures per geometria

Vegem alguns exemples de com classificar postures a partir de les coordenades dels punts clau:

🙆 Braços amunt

// Canells per sobre de les espatlles
if (canellEsq.y < espatllaEsq.y && canellDret.y < espatllaDret.y) {
  // Postura: braços amunt!
}

🧘 Braços en creu

// Canells lluny del tronc (eix X)
if (abs(canellEsq.x - canellDret.x) > 200) {
  // Postura: braços oberts!
}

🦵 Ajupit

// Malucs prop dels genolls (eix Y)
if (abs(maluc.y - genoll.y) < 50) {
  // Postura: ajupit!
}

🤸 Salt

// Peus per sobre de la posició normal
if (turmell.y < maluc.y) {
  // Postura: saltant!
}

Classificador de postures interactiu

Simulem un classificador de postures que reacciona al ratolí. Segons la posició del cursor, el sistema reconeix diferents "gestos" i canvia el fons i les formes.

function draw() {
  let manosArriba = mouseY < 60;
  let manosAbiertas = abs(mouseX - width/2) > 120;
  let agachado = mouseY > 160;

  if (manosArriba) {
    postura = 'Braços amunt'; background(255, 220, 200);
  } else if (manosAbiertas) {
    postura = 'Braços oberts'; background(200, 220, 255);
  } else if (agachado) {
    postura = 'Ajupit'; background(200, 255, 200);
  } else {
    postura = 'Normal'; background(245);
  }
}

Partícules controlades per postura

Cada postura pot activar un comportament diferent en un sistema de partícules: colors, velocitats, direccions...

if (postura === 'amunt') {
  colorPart = color(255, 200, 0);  velY = random(-3, -1);
} else if (postura === 'abaix') {
  colorPart = color(100, 200, 255); velY = random(1, 4);
} else {
  colorPart = color(200, 100, 255); velY = random(-1, 1);
}

Exemples creatius pas a pas

Paleta de colors corporal

La postura determina la paleta de colors d'una composició abstracta.

let zona = floor(map(mouseX, 0, width, 0, 4));
let hueBase = zona * 90;
for (let i = 0; i < 12; i++) {
  fill((hueBase + i*15) % 360, 70, 80, 200);
  rect(x, height/2 - alt/2, 18, alt);
}

Instrument corporal visual

Diferents zones del cos (simulades pel ratolí) activen diferents efectes visuals, com un instrument.

if (zona.includes('esquerra')) { /* cercles vermells */ }
if (zona.includes('dreta'))    { /* quadrats blaus */ }
if (zona.includes('amunt'))    { /* punts grocs */ }

Consells per classificar postures

  • Normalitza les coordenades: divideix per l'alçada de la persona perquè funcioni a qualsevol distància.
  • Utilitza llindars suaus: en lloc de comprovar si un valor és major o menor, utilitza rangs (> 0.7 en lloc de > 100px).
  • Combina múltiples condicions: una postura es defineix per diverses relacions, no només una.
  • Dissenya per a la variabilitat: les persones tenen mides diferents. Prova amb diverses persones si és possible.
  • Suavitza les transicions: utilitza lerp() per evitar canvis bruscos entre postures.

Exercicis per practicar

  1. Implementa un detector de "braços amunt" simulat: quan el ratolí està a la part superior, el fons canvia a taronja i apareixen estrelles.
  2. Crea un classificador de 4 zones: divideix el llenç en 4 quadrants i assigna un efecte visual diferent a cada un.
  3. Dissenya un sistema de partícules amb estats: segons la "postura" (zona del ratolí), les partícules tenen colors i direccions diferents.
  4. Fes un joc de memòria corporal: el programa mostra una postura (text o forma) i l'usuari l'ha de reproduir amb el ratolí.
  5. Repte: Implementa la detecció d'ajupit amb geometria: calcula la distància entre malucs i genolls i activa un efecte visual quan és petita.

Reflexió artística

Classificar postures és donar significat al moviment. Quan el teu codi reconeix que estàs amb els braços amunt, no només detecta coordenades: interpreta una intenció, un gest, una emoció. Aquesta capacitat transforma l'art interactiu en una conversa entre el cos i la màquina. Pots crear instal·lacions on la postura de l'espectador controli la música, la llum, el color. Pots dissenyar jocs on el moviment sigui l'input. Pots construir narratives on el cos expliqui històries. La classificació de postures és el pont entre la detecció freda de punts i l'experiència càlida de l'art corporal. El teu cos és el comandament; el teu moviment, la interfície.

Mini-projecte del Tema 24

Crea un "Instrument de cos interactiu" amb les següents característiques:

  • Defineix almenys 4 postures diferents (braços amunt, braços oberts, ajupit, cama amunt, etc.) reconeixibles per la posició del ratolí.
  • Assigna a cada postura un comportament visual únic: partícules, formes, colors, trajectòries.
  • Inclou transicions suaus entre postures (utilitza lerp() o variables d'estat).
  • Mostra un indicador visual (text, icona, color de fons) de la postura detectada actualment.
  • Opcional: combina les postures amb el so (Web Audio API) per crear un instrument musical corporal.