Computer vision: p5.js + objectdetector.js

// height=240 lines=auto
let capture;   // fotogrammi catturati dalla webcam
let 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);

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

function drawEye( eye ) {
    let 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).

let 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 uno o più 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 il riconoscimento degli occhi è necessario includere anche il file objectdetect.eye.js.


Strutturazione dei file: