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: