Detecció de cares

Què és la detecció facial?

La detecció facial és la capacitat d'un algorisme per identificar la presència i la posició de rostres humans en una imatge o vídeo. ml5.js ofereix diversos models:

• FaceMesh: detecta 468 punts clau del rostre (ulls, nas, boca, celles, contorn).
• FaceApi: detecta cares i expressions (alegria, tristesa, sorpresa...).

Amb aquests models podem crear filtres de realitat augmentada, màscares virtuals, o fer que elements visuals segueixin el moviment facial.

FaceMesh: 468 punts clau del rostre

FaceMesh és un model de Google que detecta una malla tridimensional de 468 punts sobre el rostre. Aquests punts cobreixen:

• Ulls: contorn, pupil·les, parpelles.
• Celles: arc complet de cada cella.
• Nas: punta, aletes, pont.
• Boca: llavis superior i inferior, comissures.
• Contorn facial: oval de la cara, barbeta, front.

Exemple conceptual: simulem la detecció de punts facials dibuixant una cara amb punts de referència.

// Simulació conceptual dels punts clau de FaceMesh
// Ulls: (110,110) i (190,110)
// Pupil·les: (107,107) i (187,107)
// Nas: (125,160) i (175,160)
// Centre: (150,140)
// Barbeta: (150,210)

Estructura del codi amb FaceMesh

El patró per utilitzar FaceMesh amb ml5.js és similar al del Tema 21, però ara treballem amb vídeo i una llista de punts:

let facemesh;
let video;
let cares = [];

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

function modelReady() {
  facemesh.on('predict', (results) => {
    cares = results;
  });
}

function draw() {
  image(video, 0, 0, width, height);
  for (let cara of cares) {
    for (let punt of cara.scaledMesh) {
      // punt[0] = x, punt[1] = y
      ellipse(punt[0], punt[1], 2, 2);
    }
  }
}

cares és un array. Cada element té .scaledMesh, que és un array de 468 parells [x, y] amb les coordenades normalitzades al llenç.

Màscares i filtres facials

Amb els punts clau podem crear efectes de realitat augmentada: ulleres, barrets, pintura facial, o qualsevol element que segueixi el moviment de la cara.

Exemple conceptual: simulem unes ulleres que es posicionen sobre els ulls detectats pel ratolí.

// Simulació d'ulleres que segueixen els ulls
let ux = map(mouseX, 0, width, 120, 170);
let uy = map(mouseY, 0, height, 65, 105);
circle(ux, uy, 30);     // ullera esquerra
circle(ux + 60, uy, 30); // ullera dreta
line(ux + 15, uy, ux + 45, uy); // pont

Interactivitat facial: què podem detectar?

Més enllà de dibuixar sobre la cara, podem utilitzar els punts clau per crear interaccions:

• Obrir/boca: calcular la distància entre els llavis per detectar si la boca està oberta.
• Parpelleig: comparar l'alçada dels ulls per saber si estan tancats.
• Inclinació del cap: angle entre els ulls per detectar si el cap està girat.
• Somriure: amplada de la boca comparada amb la posició de repòs.
• Proximitat: distància entre els ulls per saber si la persona és a prop o lluny.

Aquestes deteccions es tradueixen en paràmetres visuals: colors, mides, velocitats...

Exemples creatius pas a pas

let to = map(mouseX, 0, width, 0, 360);
fill(to, 80, 90, 150); // color segons posició
ellipse(100, 100, 25, 20); // ombra d'ull esquerre
ellipse(200, 100, 25, 20); // ombra d'ull dret

let ampleBoca = map(mouseY, 0, height, 20, 60);
let altBoca = map(mouseY, 0, height, 5, 25);
arc(140, 130, ampleBoca, altBoca, 0, PI);

Consells per treballar amb detecció facial

• Il·luminació: una bona llum frontal millora la detecció. Evita contraclars forts.
• Distància: el model funciona millor quan la cara ocupa almenys un 20% de la imatge.
• Múltiples cares: FaceMesh pot detectar diverses cares alhora. Cada cara és un element de l'array.
• Rendiment: processar 468 punts per cara a 60 fps pot ser exigent. Redueix la mida del vídeo si cal.
• Privacitat: recorda que la detecció facial implica processar dades personals. Utilitza-ho de manera ètica i responsable.