Ü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 diese Möglichkeiten zugreifen zu können, muss im Header der HTML-Seite neben der P5-Library auch die ML5-Library eingebunden werden, so dass es im Header der Seite folgendermaßen heisst:

Im Script wird nach der Deklarierung der für die Verbindung mit dem Posen-/Bewegungsmodell von poseNet und die Videodarstellung notwendigen Variablen ...

var poseNet; // Array für das von poseNet zurückgelieferte Ergebnis
var poses = []; // Array für die erfassten Posen = Personen
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 Bewegungserkennung erstellt wird als auch die Verbindung mit dem Modell für die Posen/Bewegungserkennung 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
poseNet = ml5.poseNet(video, modelReady); // Verbindung zu poseNet starten, um
// Pose/Bewegung zu erkennen und das Ergebnis in der Variablen poseNet zu speichern.
poseNet.on('pose', function(results) { //sobald eine Pose entdeckt wird ...
poses = results; // fülle ein Array mit einer zahlenmäßigen Beschreibung dieser Pose
});
video.hide(); // verstecke das Video (es würde sonst neben dem Canvas zusätzlich zum
// verarbeiteten Video erscheinen)
}

In der draw-Funktion von P5 werden dann neben der Darstellung des Videos nur noch zwei weitere Funktionen aufgerufen: drawKeypoints(), um markante Punkte = Körperteile der erfassten Personen wiederzugeben, und drawSkeleton(), um diese Punkte über Linien zu einem Skelett bzw. einer Strichfigur zu verbinden:

function draw() {
image(video, 0, 0, width, height); // zeige das Video in der Größe des Canvas
drawKeypoints(); // rufe eine Funktion auf, in der das von PoseNet zurückgelieferte Array
// als Punktfigur ausgegeben wird
drawSkeleton(); // rufe eine Funktion auf, in der die markanten Punkte der Punktfigur zu
// einem Skelett/einer Strichfigur verbunden werden
}

In beiden Funktionen wird zuerst geschaut wie viele Posen d.h. Personen pro Frame erkannt wurden und pro Person wird dann geschaut, welche keypoints d.h. Körperteile dazu entdeckt wurden und wie sie sich zu einer Strichfigur verbinden lassen:

Die Art der Körperteile wird in der Reihenfolge der keypoints codiert, so kann man über folgende Variablen auf die jeweiligen Körperteile zugreifen:

Zu jedem Punkt wird neben seiner X- und Y-Koordinate auch ein score mitgegegeben, bei dem sich zwischen 0 und 1 erkennen lässt, wie hoch die Wahrscheinlichkeit ist, dass es sich tatsächlich um das entsprechende Körperteil handelt.

var poseNet;
var poses = [];
var video;

function setup() {
var container = createCanvas(1024, 768);
container.parent('p5container');
video = createCapture(VIDEO);
video.size(width, height);
poseNet = ml5.poseNet(video, modelReady);
poseNet.on('pose', function(results) {
poses = results;
});
video.hide();
}

function modelReady() {
console.log("Model ready!");
}

function draw() {
image(video, 0, 0, width, height);
drawKeypoints();
drawSkeleton();
}

</script>