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 einfache 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 bild; // Variable für das zu untersuchende Bild
var bildweite = 800; // Weite des zu untersuchenden Bilds
var bildhoehe = 480; // Höhe des zu untersuchenden Bilds

Dann wird die setup-Funktion gestartet, in der der Canvas zur Darstellung des Bilds erstellt wird und die Verbindung mit dem Modell für die Gesichtsserkennungserkennung hergestellt wird:

function setup() {
var container = createCanvas(800, 600); // Canvas erstellen
container.parent('p5container'); // an DIV-Container anhängen
const faceOptions = { withLandmarks: true, withExpressions: true, withDescriptors: false }; // Einstellung der Optionen für die Gesichtserkennung
faceapi = ml5.faceApi(faceOptions, faceReady); // Verbindung zu faceApi
// herstellen, um Gesichter zu erkennen und das Ergebnis in der Variablen faceapi zu speichern.
}

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

function faceReady() {
faceapi.detect(bild, gotFaces); // erkenne das Gesicht im Bild, wenn nur ein Gesicht
// erkannt werden soll, geht auch: faceapi.detectSingle(bild, gotResults);
}

... 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
}

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() {
faceapi.detect(gotFaces); // starte den Erkennungsvorgang mit jedem Frame.
background(255,255,255,125); // Hintergrund halb durchsichtig gestalten, damit mit der
// Maus zwischen Gesichtskontur und Bild hin- und hergeblendet werden kann
cursor(HAND); // Mauszeiger in eine Hand umwandeln
image(bild, 0, 0, width, height); // zeige das Bild in der Höhe und Weite des Canvas
// an
tint(255, 255, 255, map(mouseY, 0, height, 0, 255), ); // Transparenz des
// Bild 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 bild;
var bildweite = 403;
var bildhoehe = 600;

function preload(){
bild=loadImage("bilder/MonaLisa_L_da_Vinci.jpg");
}

function setup() {
var container = createCanvas(800, 600);
container.parent('p5container');
const faceOptions = { withLandmarks: true, withExpressions: true, withDescriptors: false, minConfidence: 0.2 };
faceapi = ml5.faceApi(faceOptions, faceReady);
}

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

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

function draw() {
background(255,255,255,125);
cursor(HAND);
image(bild, 0, 0, bildweite, bildhoehe);
tint(255, 255, 255, map(mouseY, 0, bildhoehe, 0, 255), ); // Transparenz des Videos mit der Y-Position der Maus verknüpfen
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>