Computer Graphics Brera : : : Lez.6 - Transcodifiche e data visualization : ❬ ❭

Computer vision: p5.js + objectdetector.js

// height=240 lines=34
var detector;  // oggetto che gestisce il riconoscimento

function setup() {
    createCanvas(320, 240);
    ellipseMode(CORNER);

    strokeWeight(3);
    fill(255,128);

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

    detector = new objectdetect.detector( width, height, 1.2, objectdetect.eye );
}

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

    var eyes = detector.detect( capture.elt, 1, 3 );
    if (eyes) {
        eyes.forEach( drawEye );
    }
}

function drawEye( eye ) {
    var threshold = eye[4];
    if(threshold > 2) {
        ellipse( eye[0], eye[1], eye[2],  eye[3] );
    }
}

capture = createCapture(VIDEO);

Crea un elemento HTML <video> in cui far riprodurre i fotogrammi della webcam. L'elemento viene poi nascosto (capture.hide()) per non mostrare sia l'immagine catturata che quella elaborata.

detector = new objectdetect.detector( width, height, 1.2, objectdetect.eye );

Crea e inizializza l'oggetto che dovrà elaborare le immagini e riconoscere gli occhi (objectdetect.eye).

var eyes = detector.detect( capture.elt, 1, 3 );

Effettua il riconoscimento leggendo le immagini dall'elemento <video> (capture.elt). Se l'esito è positivo viene restituito un array contenente array di 5 elementi (2 per la posizione, 2 per le dimensioni e 1 per l'affidabilità del riconoscimento).

eyes.forEach( drawEye );
...
function drawEye( eye ) {
    ...
}

Per ogni elemento dell'array principale (eyes) viene chiamata una funzione a cui verranno passati i dati di ogni oggetto riconosciuto (eye).

 

Per la cattura del video è richiesta l'inclusione della libreria p5.dom.js. Per il riconoscimento degli occhi sono necessarie anche le librerie objectdetect.js e, almeno, objectdetect.eye.js scaricabili dal profilo GitHub di Martin Tschirsich.

 

Strutturazione dei file:

  • SKETCHES-FOLDER
    • assets
    • libs
      • p5.min.js
      • p5.dom.min.js
      • objectdetect.js
      • objectdetect.eye.js
    • SKETCH-NAME

Approfondimenti: