Christoph Reuter: Facetracking mit ml5, Konturen

Über ML5 kann P5 auf Machine-Learning-Modelle zugeifen, die im Bereich der Mustererkennung Dinge ermöglichen, die vor einigen Jahren für einfach Scriptsprachen wie Javascript oder P5 noch undenkbar waren. Einer dieser Hauptbereiche ist die Erkennung von menschlichen Posen und Bewegungen, so dass nun via Javascript/P5 Bewegungen und Posen erfasst und in Zahlen umgesetzt werden können, die dann mit anderen Zahlenwerten (z.B. aus physiologischen Messungen, Timbre Feature Analysen, EEG, Eye-Tracking etc.) in Verbindung gebracht werden können.

Um auf Möglichkeiten der Emotionserkennung zugreifen zu können, muss im Header der HTML-Seite neben der P5-Library auch eine frühere ML5-Library eingebunden werden, die auch unter header/ml5.min_expressions.js in dieser Seite eingebunden ist (mit späteren ML5-Libraries funktioniert die Emotionseinschätzung nicht mehr, da sie einen Verstoß gegen den Code of Conduct von ML5 darstellt), so dass es im Header der Seite folgendermaßen heisst:

Im Script wird nach der Deklarierung der für die Verbindung mit der Gesichtserkennung via faceApi und die Videodarstellung notwendigen Variablen ...

var faceapi; // Array für das von faceApi zurückgelieferte Ergebnis
var detections = []; // Array für die erfassten Gesichtskonturen
var video; // Variable für das von der Webcam erfasste Video

... die setup-Funktion gestartet, in der sowohl der Canvas zur Darstellung von WebCam-Video und Gesichtsserkennung erstellt wird als auch die Verbindung mit dem Modell für die Gesichtsserkennungserkennung hergestellt wird:

function setup() {
var container = createCanvas(1024, 768); // Canvas erstellen
container.parent('p5container'); // an DIV-Container anhängen
video = createCapture(VIDEO); // Videoeingang aktivieren
video.size(width, height); // Video der Größe des Canvas anpassen
const faceOptions = { withLandmarks: true, withExpressions: true, withDescriptors: false }; // Einstellung der Optionen für die Gesichtserkennung
faceapi = ml5.faceApi(video, faceOptions, faceReady); // Verbindung zu faceApi
// herstellen, um Gesichter zu erkennen und das Ergebnis in der Variablen faceapi zu speichern.
video.hide(); // verstecke das Video (es würde sonst neben dem Canvas zusätzlich zum
// verarbeiteten Video erscheinen)
}

Sobald die Verbindung zu faceApi hergestellt ist, wird über die Funktion faceReady() die Gesichtserkennung gestartet ...

function faceReady() {
faceapi.detect(gotFaces); // erkenne das Gesicht im Video
}

... und - unter Einbindung des Abfangens von eventuellen Fehlermeldungen - ein Array mit Zahlen gefüllt, die markante Punkte des Gesichts beschreiben:

function gotFaces(error, result) {
if (error) { console.log(error); return;} // Fehlermeldungen abfangen, damit das
// Script bei einem Fehler nicht gestoppt wird
detections = result; // fülle ein Array mit einer zahlenmäßigen Beschreibung des erkannten
// Gesichts
faceapi.detect(gotFaces); // und starte den Erkennungsvorgang erneut.
}

In der draw-Funktion werden dann die Funktionen drawLandmarks() und drawExpressions() gestartet, mit denen die einzelnen markanten Punkte des Gesichts ausgegeben sowie die dazu gehörenden Emotionen eingeschätzt werden:

function draw() {
background(255,255,255,125); // Hintergrund halb durchsichtig gestalten, damit mit der
// Maus zwischen Gesichtskontur und Video hin- und hergeblendet werden kann
cursor(HAND); // Mauszeiger in eine Hand umwandeln
image(video, 0, 0, width, height); // zeige das Video in der Höhe und Weite des Canvas
// an
tint(255, 255, 255, map(mouseY, 0, height, 0, 255), ); // Transparenz des
// Videos mit der Y-Position der Maus verknüpfen
drawLandmarks(detections); // gebe die markannten Gesichtspunkte aus
drawExpressions(detections); // gebe die dazu eingeschätzten Ausdrücke/Emotionen aus
}

Sobald ein Gesicht erkannt wird, werden die dazu gehörenden landmarks mit ihren Positionen in ein Array (points) geschrieben, das dann beliebig weiter verarbeitet/ausgegeben werden kann:

Die Art der Gesichtskontur wird in der Reihenfolge der points codiert. So kann man über folgende Variablen auf die jeweiligen Körperteile/Sinnesorgane zugreifen:

In der Funktion drawExpressions() werden die aus den Gesichtsausdrücken eingeschätzten Emotionen in prozentualen Anteilen ausgegeben:

var faceapi;
var detections = [];
var video;

function setup() {
var container = createCanvas(1024, 768);
container.parent('p5container');
video = createCapture(VIDEO);
video.size(width, height);
const faceOptions = { withLandmarks: true, withExpressions: true, withDescriptors: false, minConfidence: 0.2 };
faceapi = ml5.faceApi(video, faceOptions, faceReady);
video.hide();
}

function faceReady() {
faceapi.detect(gotFaces);
}

function gotFaces(error, result) {
if (error) {
console.log(error);
return;
}
detections = result;
faceapi.detect(gotFaces);
}

function draw() {
background(255,255,255,125);
cursor(HAND);
image(video, 0, 0, width, height);
tint(255, 255, 255, map(mouseY, 0, height, 0, 255), );
drawLandmarks(detections);
drawExpressions(detections);
}

function drawLandmarks(){
if (detections.length > 0) {
var points = detections[0].landmarks.positions;

stroke(184, 0, 0); noFill(); strokeWeight(4);

//Gesicht
beginShape(); for (let i = 0; i < 17; i++) {vertex(points[i]._x, points[i]._y);} endShape();
//Augenbraue links
beginShape(); for (let i = 17; i < 22; i++) {vertex(points[i]._x, points[i]._y);} endShape();
//Augenbraue rechts <br>
beginShape(); for (let i = 22; i < 27; i++) {vertex(points[i]._x, points[i]._y);} endShape();
//Nase
beginShape(); for (let i = 27; i < 36; i++) {vertex(points[i]._x, points[i]._y);} endShape();
//Auge links
beginShape(); for (let i = 36; i < 42; i++) {vertex(points[i]._x, points[i]._y);} endShape();
//Auge rechts
beginShape(); for (let i = 42; i < 48; i++) {vertex(points[i]._x, points[i]._y);} endShape();
//Mund
beginShape(); for (let i = 48; i < 68; i++) {vertex(points[i]._x, points[i]._y);} endShape();
//Alle Gesichtspunkte
stroke(184, 184, 184); for (let i = 0; i < points.length; i++) {point(points[i]._x, points[i]._y);}
}
}

</script>