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:

<script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>

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

... über die preload-Funktion das zu untersuchende Bild vorausgeladen:

function preload(){
bild = loadImage("bilder/renaissance.png"); // Das zu untersuchende Bild
// vorausladen
}

Danach wird die setup-Funktion gestartet, in der sowohl der Canvas zur Darstellung des Bildes und der Posenerkennung erstellt wird als auch die Verbindung mit dem Modell für die Posen/Bewegungserkennung hergestellt wird:

function setup() {
var container = createCanvas(800, 500); // Canvas erstellen
container.parent('p5container'); // an DIV-Container anhängen
poseNet = ml5.poseNet(bild, {imageScaleFactor: 1, minConfidence: 0.1, multiplier: 1.0, quantBytes:4, maxPoseDetections:3}, modelReady);
// Verbindung zu poseNet starten, um Pose/Bewegung zu erkennen und das Ergebnis in der Variablen
// poseNet zu speichern.
}

In der ml5.poseNet()-Funktion können in den geschweiften Klammern {...} folgende Optionen für die Genauigkeit des Pose/Motion-Trackings eingestellt werden:

• imageScaleFactor: = um welchen Faktor das Bild vergrößert oder verkleinert werden soll.
• outputStride: = wie kleinschrittig die Ausgabe des Ergebnisses sein soll. Je kleiner der Wert, desto genauer die Abbildung, aber desto langsamer die Ausgabe (kann 8, 16 oder 32 sein).
• flipHorizontal: = horizontale Spiegelung der Ausgabe (kann true oder false sein)
• maxPoseDetections: = maximale Anzahl der entdeckten Personen/Posen (default bei 5)
• scoreThreshold: = Schwelle, ab welcher Entdeckungswahrscheinlichkeit zwischen 0 und 1 ein Körperteil berücksichtigt werden soll (default bei 0,5).
• nmsRadius: = bei mehreren Posen, wie groß der Radius sein soll, ab dem sich zwei Posen gegenseitig verdecken (default ist bei 20).
• detectionType: = ob einzelne ('single') oder mehrere Personen erkannt werden sollen ('multiple')(für die Entdeckung von Einzelposen empfiehlt es sich das 'single' außerhalb der Optionen in die PoseNet-Funktion zu schreiben, also z.B.:
  poseNet = ml5.poseNet(video, {scoreThreshold: 0.2, multiplier:0.75}, 'single', modelReady);)
• inputResolution: = Eingabe-Auflösung auf die das Bild reduziert wird, bevor es ins poseNet-Modell gespeist wird. Je größer die Auflösung, desto genauer die Erkennung, desto langsamer die Ausgabe (kann 161, 193, 257, 289, 321, 353, 385, 417, 449, 481, 513 und 801 sein, default ist bei 257).
• multiplier: = Tiefe der Entdeckung, je höher die Zahl, desto genauer die Abbildung, desto langsamer die Ausgabegeschwindigkeit (kann 1.01, 1.0, 0.75 oder 0.5 sein).
• quantBytes: = Quantisierung des Bilds, je höher die Auflösung desto genauer die Abbildung, desto langsamer die Ausgabegeschwindigkeit (kann 1 oder 4 sein).

Sobald das Modell geladen ist, kann es in der Funktion modelReady() gestartet werden:

function modelReady() {
console.log("Model ready!"); // Rückmeldung, dass das PoseNet-Model geladen und bereit
// ist.
poseNet.on('pose', function(results) { //sobald eine Pose entdeckt wird ...
poses = results; // fülle ein Array mit einer zahlenmäßigen Beschreibung dieser Pose
});
poseNet.multiPose(bild); // tracke viele Personen in einem Bild. Wenn nur eine Person im
// Bild getrackt werden soll, muss es heissen: poseNet.singlePose(bild);
}

In der draw-Funktion von P5 werden dann neben der Darstellung des Bilds 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() {
background(255,255,255,125); // Hintergrund halb durchsichtig gestalten, damit mit der
// Maus zwischen Drahtgitterfigur und Bild hin- und hergeblendet werden kann
cursor(HAND); // Mauszeiger in eine Hand umwandeln
image(bild, 0, 0, bildweite, bildhoehe); // zeige das Bild in seiner Höhe
// und Weite nach den oben definierten Variablen an
tint(255, 255, 255, map(mouseY, 0, video_hoehe, 0, 255), ); // Transparenz
// des Bildes mit der Y-Position der Maus verknüpfen
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:

function drawKeypoints() { // Zeichne die markanten Punkte einer/mehrerer Personen/Posen
for (let i = 0; i < poses.length; i++) { //zähle das zurückgegebene Array durch,
// wie viele Posen = Personen pro Frame gefunden wurden
var pose = poses[i].pose; // übergebe der Reihe nach jede gefundene Pose = Person an die
// Variable pose (= wiederum ein Array mit einzelnen Keypoints = Körperteilen)
for (let j = 0; j < pose.keypoints.length; j++) { // zähle die zurückgegebenen
// Keypoints = Körperteile pro Person durch ...
let keypoint = pose.keypoints[j]; //... und weise sie der Variablen keypoint zu.
if (keypoint.score > 0.2) { //... wenn die Wahrscheinlichkeit für ein gefundenes
// Körperteil größer als 0,2 ist ...
noStroke(); fill(184, 0, 0); //... setze die Füllfarbe auf dunkelrot und ...
ellipse(keypoint.position.x, keypoint.position.y, 10, 10); // ... gebe den
// Punkt als kleinen Kreis aus ...
text(round(keypoint.position.x, 2), keypoint.position.x, keypoint.position.y); //.. und mit ihm seine X- ...
text(round(keypoint.position.y, 2), keypoint.position.x, keypoint.position.y+10); // ... und Y-Koordinaten.
}
}
}

function drawSkeleton() { // Zeichne Strichfiguren auf Grundlage der markanten Punkte
// einer/mehrerer Personen/Posen
for (var i = 0; i < poses.length; i++) { //zähle das zurückgegebene Array durch,
// wie viele Posen = Personen pro Frame gefunden wurden
var skeleton = poses[i].skeleton; // übergebe der Reihe nach jede gefundene Pose =
// Person an die Variable skeleton (= wiederum ein Array mit einzelnen Linien = Bestandteilen des
// Skeletts)
for (var j = 0; j < skeleton.length; j++) { // zähle die zurückgegebenen Linien =
// Skelettbestandteile pro Person durch ...
var partA = skeleton[j][0]; // weise den Anfangspunkt einer Skelettlinie mit zwei
// Koordinaten der Variablen partA zu ...
var partB = skeleton[j][1]; // und den Endpunkt der jeweiligen Skelettlinie mit zwei
// Koordinaten der Variablen partB.
stroke(184, 0, 0); // setze die Strichfarbe auf dunkelrot
line(partA.position.x, partA.position.y, partB.position.x, partB.position.y); // zeichne die Linie aus den Koordinaten von partA und partB
}
}
}

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

• pose.keypoints[0] = Nase
• pose.keypoints[1] = linkes Auge
• pose.keypoints[2] = rechtes Auge
• pose.keypoints[3] = linkes Ohr
• pose.keypoints[4] = rechtes Ohr
• pose.keypoints[5] = linke Schulter
• pose.keypoints[6] = rechte Schulter
• pose.keypoints[7] = linker Ellenbogen
• pose.keypoints[8] = rechter Ellenbogen
• pose.keypoints[9] = linkes Handgelenk
• pose.keypoints[10] = rechtes Handgelenk
• pose.keypoints[11] = linke Hüfte
• pose.keypoints[12] = rechte Hüfte
• pose.keypoints[13] = linkes Knie
• pose.keypoints[14] = rechtes Knie
• pose.keypoints[15] = linkes Fußgelenk
• pose.keypoints[16] = rechtes Fußgelenk

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.

Insgesamt sieht das Script dann folgendermaßen aus: