Computer vision con le reti neurali: ml5.js

    let capture;  // fotogrammi catturati dalla webcam
let poseNet;  // oggetto che gestisce il riconoscimento
let poses;    // array delle pose rilevate

function setup() {
    createCanvas(320, 240);
    strokeWeight(3);
    fill(255,128);

    capture = createCapture(VIDEO);
    capture.size( width, height );
    capture.hide();

    poseNet = ml5.poseNet(capture);   
    poseNet.on('pose', gotPoses);
}

function gotPoses(results) {  
    poses = results;
}

function draw() {
    image(capture, 0, 0);

    if (poses && poses.length > 0) {
        let occhioSxPos = poses[0].pose.keypoints[1].position;
        circle(occhioSxPos.x, occhioSxPos.y, 25);
        let occhioDxPos = poses[0].pose.keypoints[2].position;
        circle(occhioDxPos.x, occhioDxPos.y, 25);
    }
}
  

  poseNet = ml5.poseNet(capture);  
poseNet.on('pose', gotPoses);   

Inizializzazione della libreria e caricamento del modello di rete neurale “addestrato” per stimare le pose delle persone eventualmente inquadrate.
Per gestire correttamente l’array delle pose (poses) è necessario indicare la funzione da chiamare ogni volta che le pose vengono riconosciute.

  function gotPoses(results) {  
    poses = results;
}

Quando le pose vengono riconosciute memorizza i dati ottenuti nell’array poses.

  if (poses && poses.length > 0) {
    let occhioSxPos = poses[0].pose.keypoints[1].position;
    circle(occhioSxPos.x, occhioSxPos.y, 25);
    let occhioDxPos = poses[0].pose.keypoints[2].position;
    circle(occhioDxPos.x, occhioDxPos.y, 25);
}

Se l’array poses è valido e se contiene almeno una posa, leggi le posizioni degli occhi e visualizza i cerchi. Nel caso specifico viene considerata solo la prima posa (poses[0]).
Le corrispondenze con gli indici dell’array keypoints si trovano nella tabella dei nodi chiave.

Strutturazione dei file:

• CARTELLA-SKETCH
  • libs
    • p5.min.js
    • ml5.min.js
  • index.html
  • sketch.js